CSS icm Div ipv Table

Status
Niet open voor verdere reacties.
S

SMeijer

Gebruiker
Lid geworden
1 mei 2007
Berichten
8
Goedenmorgen helpij helpers :D,

Ik ben al een hele tijd opzoek naar een oplossing voor mijn probleem. Echter kan ik
er zelf niet meer uitkomen. Waarschijnlijk zie ik door de bomen het bos niet meer, en
hoop dan ook dat mijn probleem snel een eenvoudig opgelost kan worden.

Wat is nu het probleem? Ik heb een layout gemaakt met een top, bottom, en main.
De top moet helemaal bovenin komen te staan ( #top {top: 0px;}), bottom moet
helemaal onderin het beeld komen te staan ( #bottom {bottom: 0px;}) en main moet daar
tussen komen te staan, echter dan wel verticaal scherm vullend. Dan heb ik ook
nog een footer, die komt onderin de main te hangen. Dat moet niet zo'n probleem
zijn als ik de main eindelijk voor elkaar krijg.

Het probleem zit hem in dat ik de #main div geen 100% hoogte kan geven. Hij is namelijk
100% - de hoogte in pixels. van top. - de hoogte in pixels van bottom. Hoe doe ik dit?

Ter verduidelijking heb ik hieronder twee stukken code staan. Een daarvan is in table
structuur. Die doet precies wat ik hebben wil. De ander is in divjes gemaakt. Die doet
het dus niet.

Alvast heel erg bedankt voor jullie hulp.
S. Meijer

HTML: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Layout in Tables</title>

<style>
html, body {
    height: 100%; /* héél belangrijk */
    margin: 0,0;
    overflow: hidden;
    }

</style>
</head>

<body>

  <table height="100%" width="25%" bgcolor="#CCCCCC">
    <tbody>
    <tr id="top" style="background-color: blue; height: 50px;">
      <td>TOP</td>
    </tr>
    <tr id="main" style="background-color: green; height: 100%">
      <td>MAIN </td>
    </tr>
    <tr id="footer" style="background-color: yellow; height: 50px; bottom: 100; width:100%">
      <td>FOOTER </td>
    </tr>
    <tr id="bottom" style="background-color: red; bottom: 100px; width: 100%; height: 50;">
      <td>BOTTOM </td>
    </tr>
      </tbody>
  </table>

</body>

</html>

HTML: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Layout in div</title>

<style>
html, body {
    height: 100%; /* héél belangrijk */
    margin: 0,0;
    overflow: hidden;
    }

</style>
</head>

<body>

<div id="placeholder" style="position: relative; margin: 0,0; height: 100%; width: 25%; background-color: #3c3c3c;">
    <div id="top" style="background-color: blue; height: 50px;">TOP</div>
    
    <div id="main" style="background-color: green; position: relative; height:100%">MAIN
    
    <div id="footer" style="background-color: yellow; height: 50px; bottom: 100; width:100%">FOOTER</div>
    
    </div>
    <div id="bottom" style="background-color: red; position: absolute; bottom: 100px; width: 100%; height: 50;">BOTTOM</div>
</div>
    
</body>

</html>
 
SMeijer,
Als ik het goed versta moet 100% van de hoogte en 25% van de breedte van het scherm worden ingevuld. Ik veronderstel dan dat die 25% in het midden van het scherm moet komen.
groetjes
defietser
 
Laatst bewerkt:
De breedte maakt niet zo veel uit, hij komt inderdaad in de midden. Maar dat stukje
lukt wel. Het gaat hier dus puur om de "main" div die schermvullend moet worden, maar
de "top" en "bottom" div's niet mag overlappen. De 25% heb ik nu dus ook puur
als invulling gebruikt.

Het probleem is dus echt de hoogte.
 
Dit komt altijd in het midden:
PHP: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content=" ">
<META name="keywords" content="  ">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css" media="all">
 @import url("zp.css"); 
</style>

<style type="text/css">

      BODY {
       margin: 0px 0px 0px 0px;
       font-family: verdana, arial, helvetica;
       background-image: url(layout/sfeerstrook/site_home.jpg);
       background-repeat: no-repeat;      
       font-size: 14px;
       font-color: #000000;
       color: #000066;
}
.info{
border: dotted 3px #000000;
padding:10px;
}
       
.midden
{
border:2px solid #ff0000;  /* om te zien wat je doet, mag later weg */

position: absolute;
width:700px;
left:50%;
margin-left:-350px;  /* helft van de breedte */

height: 188px; /* Hoogte van je object */
margin-top: -94px; /* helft van de hoogte */
top: 50%;}
</style>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

<div class="midden" >
<table  width="100%" border="1" cellspacing="0" cellpadding="4" bgcolor="#dfdfdf">
	<tr>
		<!-- Row 1 Column 1 -->
		<td bgcolor="#c0c0c0" width="50"  >
			<b>
				1<br>
<br>
1
			</b>
		</td>
		<!-- Row 1 Column 2 -->
		<td bgcolor="#c0c0c0">
		<div class=" info" >	<b>
				2<br>
<br>
Centreren in het midden door negative ingave in je css.

			</b>
 </div>		</td>
		<!-- Row 1 Column 3 -->
		<td bgcolor="#c0c0c0" width="50"  >
			<b>
				3<br>
<br>
1

			</b>
		</td>
	</tr>
	<tr>
		<!-- Row 2 Column 1 -->
		<td >
			<b>
				4<br>
<br>
1

			</b>
		</td>
		<!-- Row 2 Column 2 -->
		<td >
			5<br>
<br>
1

		</td>
		<!-- Row 2 Column 3 -->
		<td >
			6<br>
<br>
1

		</td>
	</tr>
</table> </div>


</body>

</html>

Kijk even of je het kunt benutten.
Voor wat betreft de hoogte:
100% werkt niet in alle browsers.
gebruik in css
height:auto;
of
overflow: auto;


En..............
je moet je document wel een doctype geven.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
of
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

om het door de browser te laten snappen.

:cool:
 
Dat kan ik niet benutten, want je gebruikt tables. Ik wil dus volledig met div's werken.

Het midden is het probleem niet, dat lukt mij wel. Slechts de main moet de ruimte
tussen top en bottom gaan vullen. Dat lukt niet. Ook niet met css height; auto.

Overflow, zorgt ervoor dat de div niet meer automatisch gaat groeien. Dat gebruik
ik dus ook. Echter moet ik die hoogte zien te krijgen. Dat lukt mij niet. Gewoon
de ruimte vullen tussen "top" en "bottom". Op ieder scherm, op elke resolutie.
Dus heb je een percentage nodig, en geen pixels. Maar percentage kan weer niet
omdat top en bottom wel een vaste pixel hoogte heeft?

Op mijn website gebruik ik ook een doctype. Die van xhtml 1.1 strict.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Wat ik dus eigenlijk van jullie wil weten is hoe ik mijn div voorbeeld ( zie eerste post )
gelijk krijg aan het voorbeeld met tables.
 
Met javascript kan het:
PHP: 
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Layout in divs</title>
  <style type="text/css">
   body { height: 100%; margin: 0px; padding: 0px; overflow: hidden;}
   div { width: 25%; height: 50px;}
   #top    { background: blue;}
   #main   { background: green;}
   #footer { background: yellow;}
   #bottom { background: red;}
  </style>
  <script type="text/javascript">
   // Egel 070502 ;)
   function resizeMain() {
    var main = document.getElementById('main');
    main.style.height = '100%';
    main.style.height = (main.offsetHeight - 150) + 'px';
    };
   window.onload = resizeMain;
   window.onresize = resizeMain;
  </script>
 </head>
 <body>
  <div id="top">TOP</div>
  <div id="main">MAIN</div>
  <div id="footer">FOOTER</div>
  <div id="bottom">BOTTOM</div>
 </body>
</html>
100% - 150px. :cool: ;)


Vr.Gr. Egel.
 
SMeijer,
Ik weet niet hoe het er uitziet met een andere schermresolutie of op mijn Pc maar ik ben tot dit resultaat gekomen
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Layout in div</title>
<style type="text/css">
body {
background-color:#663333;
margin:0px;
}
#placeholder{
background-color:#3c3c3c;
background-attachment:scroll;
width:800px;
height:auto;
position:absolute;
top:0px;
bottom:0px;
}
#top{
	background-color:#0000FF;
	width:800px;
	height:25px;
}
#main{
	background-color:#00FF00;
	position:absolute;
	top:25px;
	bottom:100px;
	height:auto;
	width:800px;
	
}
#footer{
	background-color:#FFFF00;
	height:50px;
	width:800px;
	position:absolute;
	top:auto;
	bottom:50px;
	
}
#bottom{
	background-color:#FF0000;
	height:50px;
	width:800px;
	position:absolute;
	top:auto;
	bottom:0px;
	
}
</style>
</head>
<body> 

<div id="placeholder"> 
    <div id="top">TOP</div>
    <div id="main">MAIN	</div>
    <div id="footer">FOOTER</div>
    <div id="bottom">BOTTOM </div>
</div>

</body>
</html>
Maar om het geheel in het midden van het scherm te zetten nog niet geprobeerd nu staat het geheel links op het scherm. Bij mij staan ze zoals je bedoeld in IE 7 en FF2. Hopelijk heb je er iets aan.
groetjes
defietser
 
defietser,

Als ik jouw code in een html bestand stop, en dat bestand open. Dan heb ik hem hier
niet goed?

Bij mij staat de bottom dan bovenin beeld, en de footer is verdwenen.
Main is gewoon een klein smal balkje, en niet vertikaal schermvullend.

Lijkt er dus op dat ik javascript moet gaan gebruiken.
 
Dit script werkt nog wat beter, de pagina laadt met percentages en daarna maakt het script er pixels van:
PHP: 
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Layout in divs</title>
  <style type="text/css">
   body { height: 100%; margin: 0px; padding: 0px; overflow: hidden;}
   #top    { width: 25%; height:  8%; background: blue;}
   #main   { width: 25%; height: 76%; background: green;}
   #footer { width: 25%; height:  8%; background: yellow;}
   #bottom { width: 25%; height:  8%; background: red;}
  </style>
  <script type="text/javascript">
   // Egel 070503 ;)
   function resizeMain() {
    var main = document.getElementById('main');
    main.style.height = '100%';
    main.style.height = (main.offsetHeight - 150) + 'px';
    };
   function resizeAll() {
    document.getElementById('top').style.height = '50px';
    document.getElementById('footer').style.height = '50px';
    document.getElementById('bottom').style.height = '50px';
    resizeMain();
    };
   window.onload = resizeAll;
   window.onresize = resizeMain;
  </script>
 </head>
 <body>
  <div id="top">TOP</div>
  <div id="main">MAIN</div>
  <div id="footer">FOOTER</div>
  <div id="bottom">BOTTOM</div>
 </body>
</html>


Vr.Gr. Egel.
 
Egel,

Ik denk dat ik jouw eerste script maar eens ga proberen. Top en Bottom hebben
al vaste hoogtes, dus die liggen gewoon vast in mijn .css bestand.

Main moet ik nu dus in mijn css bestand op 100% gaan zetten, en dan het javascriptje
laten draaien in mijn index.php.

Jullie allen heel erg bedankt :thumb: , en ik laat nog wel even weten of het gelukt is.

Greetz,
S. Meijer.

ps. Als iemand nog een full CSS oplossing heeft, hoor ik hem graag.



*edit,

Heb je voorbeeld gevolgt Egel. Maar heb het omgezet naar een functie die met
het prototype.js ajax framework werkt.

Allen heel erg bedankt voor het meedenken aan een oplossing.

Hieronder de code die ik nu gebruik, misschien dat het makkelijk is voor iemand die
hetzelfde probleem heeft of krijgt. Moet het nog wel even testen op hoge resoluties;
resolutie 1200*1600 of groter.

Greetz,
S. Meijer

PHP: 
     <script type="text/javascript"> 
   function resizeDiv(element, proc, pix) {
            var d = document.getElementById(element);
            d.style.height = (proc - pix) + 'px';
            document.body.appendChild(d);
            return d;
   }

   window.onload = resizeDiv('main', '100%', '232');
   </script>
 
Laatst bewerkt:
SMeijer zei:
PHP: 
     <script type="text/javascript"> 
   function resizeDiv(element, proc, pix) {
            var d = document.getElementById(element);
            d.style.height = (proc - pix) + 'px';
            document.body.appendChild(d);
            return d;
   }

   window.onload = resizeDiv('main', '100%', '232');
   </script>
Klik om te vergroten...
Dat kan toch niet? :eek:

window.onload = resizeDiv;
kan alleen zonder (). Of het kan in deze vorm:
window.onload = function() { resizeDiv('main', '100%', '232'); };

Maar:
'100%' - '232' == NaN


Het script werkt door de main.style.height op 100% te zetten, de hoogte te meten (main.offsetheight) en daar vervolgens 150 pixels vanaf te trekken.
PHP: 
main.style.height = '100%';
main.style.height = (main.offsetHeight - 150) + 'px';
:)


Vr.Gr. Egel.
 
Goedendag Smeijer,

U probleem is heel simpel op te lossen als ik u probleem goed heb begrepen door:

Ten eerste: als u in CSS schrijft zult u dit ook aan u browser moeten vertellen, om bij de openingstag van style de type erbij te zetten. Zoals dit <style type="text/css">

Ten tweede: u heeft in de body geen afsluittag van </div> staan bij de maincontainer.

Ten derde: heeft u de main op 100% staan en de overflow op hidden. dit klopt niet, omdat de main onder aan de top hangt en daarvan uit 100% naar beneden gaat en omdat dan de overflow op hidden staat verdwijnt de footer en de bottom dus onder uit het beeld. U zult dus de height van de main moeten veranderen in bv 75%.

U schrijft in u vraag dat u een top, main, footer en een bottom heeft. Wat betekend dan de div id "placeholder" dan in de body.


Succes :thumb:

Gerrit

PHP: 
<html> 
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
 <title>Layout in div</title>
 <style type="text/css"> 
body { height: 100%; /* héél belangrijk */ margin: 0,0; overflow: hidden; }
 </style>
	 </head>
 <body> 
	<!-- <div id="placeholder" style="position: relative; margin: 0,0; height: 100%; width: 25%; background-color: #3c3c3c;"> -->
		<div id="top" style="background-color: blue; height: 50px;">TOP</div> 
			<div id="main" style="background-color: green; position: relative; height: 75%">MAIN </div>
				<div id="footer" style="background-color: yellow; height: 50px; position: relative; 50px;  width:100%">FOOTER</div>
					 </div> <div id="bottom" style="background-color: red; position: absolute;  width: 100%; height: 50px">BOTTOM</div>
		 </div>
	 </body>
 </html>
 
Bester heer Voorn,

- Styletype doe je wel als je een externe stylesheet gebruikt, op deze manier hoeft
het niet persé. Echter doe ik het in mijn website dus wel! Daar gebruik ik namelijk
externe stylesheets.

- Ten tweede, de main container div wordt wel gesloten, echter zoals u ziet pas na
de footer. Die footer is onderdeel van de main container.

- Ten derde, Overflow moet op hidden, ik wil geen scrollbalk krijgen. En hij moet niet
uit kunnen rekken.

Gerrit Voorn zei:
de main onder aan de top hangt en daarvan uit 100% naar beneden gaat en omdat dan de overflow op hidden staat verdwijnt de footer en de bottom dus onder uit het beeld. U zult dus de height van de main moeten veranderen in bv 75%.
Klik om te vergroten...

Kijk, dat is nou precies mijn probleem. 100% kan niet, dan komt hij onder het beeld uit.
En 75% kan ook niet, want mijn top en bottom div krijgen wel hoogtes in pixels. Dat wil
ik ook zo houden.

Dus beste heer Voorn, ik hoop dat mijn probleem nu duidelijker is. En wellicht heeft u
nu de oplossing?

De oplossing van "Egel" die werkt netjes, echter niet als ik hem test op windows vista
met internet explorer 7.0.

Wie heeft een definitieve oplossing voor mij?

Greetz from the north :)
S. Meijer.
 
Beste Smeijer

Ik heb de height van de top, footer en bottom aangepast van 50 px naar 8%. De main is blijven staan op 76%. Dit tesamen is nu 100%.
De layout blijft nu in elk schermresolutie ongewijzigd.

Ik hoop dat dit bedoeling is. :)



Groet,
Gerrit Voorn

Hierbij de code

PHP: 
<html> 
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
 <title>Layout in div</title>
 <style type=text/css> <!--


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

#top
	{
	background-color: blue;
	height: 8%;
	width: 50%
	}

#main
	{
	background-color: green;
	position: relative;
	height: 75%;
	width: 50%
	}

#footer
	{
	background-color: yellow;
	height: 8%;
	position: relative;
	width:50%
	}

#bottom
	{
	background-color: red;
	position: absolute;
	width: 50%;
	height: 8%
	}


 --></style>

	 </head>

 		<body> 
			<div id="top">TOP</div> 
				<div id="main">MAIN</div>
					<div id="footer">FOOTER</div>
					 	<div id="bottom">BOTTOM</div>
			
				
					
		 </div>

	 </body>
 </html>
 
Gerrit Voorn zei:
Beste Smeijer

Ik heb de height van de top, footer en bottom aangepast van 50 px naar 8%. De main is blijven staan op 76%. Dit tesamen is nu 100%.
De layout blijft nu in elk schermresolutie ongewijzigd.

Ik hoop dat dit bedoeling is. :)
Klik om te vergroten...


Beste heer Voorn,

Zoals u wellicht zelf ook begrijpt is ook dat niet de oplossing. De top, footer en bottom
hebben vaste hoogtes. Zoals u begrijpt is het omrekenen naar procenten dus niet
de bedoeling.

8% van 768 is namelijk minder als 8% van 1600. Gevolg is dus dat de header anders
wordt zodra iemand hem op een monitor bekijkt, waarvan de resolutie anders is dan
van mijn monitor. Dat is dus absoluut niet de bedoeling.

Wat ik wil, is dus dat de main schermvullend wordt. Maar dat er wel een header en
foot met vaste grootte, in pixels, boven en onder mogen.

Dit blijkt echter niet mogelijk.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan