[div][iframe] overflow; - Softwareontwikkeling

woensdag 7 april 2004 10:52

Acties:

Topicstarter

search is down (vind totaal geen resultaten wat je ook zoekt)

ok here goes

ik heb een pagina (code komt zo) opgemaakt met een table
deze table is 100% hoog en wijd (hele scherm dus)

ik heb een top gedeelte dat 100% breed is....
en daaronder 3 delen verticaal
1 voor het menu (links)
1 voor de text (midden)
1 voor reclame of wat dan ook (rechts)

nu wil ik dat de pagina zelf niet scrolled... simple gedaan door style voor de body

code:

1	overflow: hidden

te geven

maar nu wil ik dat de text wel kan scrollen in het midden stuk

ik wil GEEN gebruik maken van frames en ook niet van absolute waardes

code:

1	height: 500px

dat wil ik dus niet gebruiken

ik heb geprobeert met een div en daarvan de height op inherit te zetten

code:

1	height: inherit

dit werkt niet zoals ik verwacht had dat het zou werken
inherit in mijn ogen is dat de hoogte van de huidige plaats waar de div staat wordt overgenomen en dat als height wordt gegeven en dan overflow op auto te zetten zou die moeten scrollen.... niet dus

ik heb het wel goed werkend met een iframe, maar dat is dus iets wat ik niet wil

dit is de code (met de div in comment style en de iframe gewoon):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
 margin: 0;
 border: 0px;
 overflow: hidden;
}
td
{
 color: green;
 border: 1px solid #AFAFAF;
}
</style>
<base target="test">
</head>

<body>
<table cellpadding="3px" cellspacing="0" width="100%" height="100%">
 <tr>
  <td colspan="3" height="100px" valign="middle" align="center">
   <div style="padding: 5px; display: inline">
    <a href="iframe.htm">test</a>
   </div>
  </td>
 </tr>
 <tr>
  <td width="150px" valign="top">test</td>
  <td valign="top" style="overflow: inherit" style="padding: 0px;">
   <!--<div style="position: relative; height: 517px; overflow: auto; padding: 5px">-->
   <iframe name="test" width="100%" height="100%" frameborder="0" scrolling="auto">
   </IFRAME>
   <!--</div>-->
  </td>
  <td  valign="top" width="150px">test</td>
 </tr>
</table>
</body>
</html>

opsomming:
ik wil dus geen absolute waardes zetten zoals 100px enzo
ik wil geen frames gebruiken
ik wil geen iframes gebruiken
ik wil dus de div gebruiken om te laten scrollen maar ik wil dus wel de pagina zoveel mogelijk resolutie onafhankelijk houden

als er nog iets nodig is dan hoor ik het graag

ik zoek naar ideeen of uitleg waarom mijn manier met de div scrollen niet werkt dus (ik wil niet de oplossing kant en klaar gemaakt krijgen

)

edit: vergeten de titel af te maken: [div][iframe] overflow; scrollen resolutie onafhankelijk zonder absolute waardes

[ Voor 15% gewijzigd door WPN op 07-04-2004 10:53 ]

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

woensdag 7 april 2004 11:17

Acties:

Verwijderd

Dit doet ook precies wat je wilt, en is net even anders opgelost:

HTML:

<div id="container">
    <div id="top">top</div>
    <div id="links">links</div>
    <div id="rechts">rechts</div>
    <div id="content">
        content
    </div>
</div>

Die je vervolgens styled met:

Cascading Stylesheet:

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#container {
    height: 100%;
    padding-top: 100px;
    -moz-box-sizing: border-box;
}

#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border-bottom: 2px solid grey;
}

#content {
    height: 100%;
    overflow: auto;
}

#links {
    height: 100%;
    width: 150px;
    float: left;
    border-right: 2px solid grey;
}

#rechts {
    border-left: 2px solid grey;
    height: 100%;
    width: 150px;
    float: right;
}

woensdag 7 april 2004 11:32

Acties:

T-MOB

Gister ook al zo'n vraagje gehad

. Maargoed je wou geen voorbeeld.

Maargoed je wil dus een frameset faken faken. Om dit goed te doen hebben we het IE box-model nodig. We beginnen dus met een comment voor het doc-type.

code:

1 2	<!-- IE in quirks --> <!DOCTYPE whatever you like />

In de stylesheet zorgen we dat html en body 100% hoog en breed worden en geen margin en padding hebben.
Met position absolute kun je nu je header, rechterkant en linkerkant neerzetten.

Nu hebben we een container nodig waarbinnen we strax de inhoud enzo kunnen plaatsen. Deze container is 100% hoog en 100% breed. We geven hem padding zoveel ruimte als we kwijt waren aan header, linkerkant en rechterkant.
In het stylesheet moet je voor deze container -moz-box-sizing: border-box; en box-sizing: borderbox opgeven. In het W3C-model zou de padding immers bij de 100% width en height optellen we willen hier nu juist dat het naar binnen toe werkt.

Binnen deze container plaats je je eigenlijke *frame*. Width op 100% en height op 100% en overflow op auto. In IE kan dit problemen opleveren met het bepalen van de hoogte. Als dat gebeurt moet je binnen dit zogenaamde frame een andere div plaatsen en daar de overflow opzetten...

p.s: Dit was gelijksoortig topic van gister

Regeren is vooruitschuiven

woensdag 7 april 2004 11:39

Acties:

WPN

Topicstarter

ik gaat gelijk checken hoe en wat

ik heb de search gebruikt, maar die is om een of andere rede niet goed werkend, geeft totaal geen resultaten weer.....
alles geselecteerd (alle mogelijke forums) en gezocht op mijn problemen, en op woorden die heel veel voor komen (zoals mysql en dat soort dingen) maar totaal geen results... vandaar dat ik deze topic opende

ik zal laten weten of het (van ieder van jullie) een oplossing is voor wat ik zoek

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

woensdag 7 april 2004 12:31

Acties:

WPN

Topicstarter

ik heb RIFFs oplossing gechecked en werkt super

ik gaat ook nog kijken naar jouw suggesties kijken T-MOB

dit topic kan dicht

Als ik denk zoals ik dacht, dan doe ik zoals ik deed, als ik doe zoals ik deed, dan denk ik zoals ik dacht! Cogito Ergo Sum

woensdag 7 april 2004 12:33

Acties:

T-MOB

Het is ongeveer dezelfde oplossing alleen in woorden ipv code

Regeren is vooruitschuiven

Pagina: 1

Reageer