Min första div-layout

4 svar · 319 visningar · startad av K@llen 2 jan. 2005

K@llenMedlem sedan mars 20032 667 inlägg

Frågan2 jan. 2005 19:27#1

Nu har jag gett mig fanken på att inte använda tabeller. *snyft*

Men det går inte så bra. Sidan ser ut som följer:

http://member.webforum.nu/K%40llen/sajt.pdf

* Headern är som den ska.
* Topmenyn är som den ska.
* Menyn är som den ska.

Sedan börjar strulet. Det vita där det står text, text text ska gå ända ut till högerkanten, det grå ska bort. Menyn och innehållet ska fylla ut sidan så att footern alltid hamnar längst ner även om innehållet inte räcker till.

Hur fixar jag detta?

Även andra synpunkter tas emot på koden så här långt.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Testsida</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" type="text/css" href="layout.css" />
   <link rel="stylesheet" type="text/css" href="presentation.css" />
</head>
<body>
<div id="container">
   <div id="header"><h3>Header</h3></div>
   <div id="menubar"><p>Huvudsida > subsida1 > subsida2</p></div>
   <div id="bodyblock">
	<div id="leftcolumn"><h4>Menu</h4></div>
	<div id="content"><p>Text <br/>text<br/> text</p></div>
   </div>
   <div id="footer"><p>Copyright Jörgen Johnsson</p></div>
   </div>
</body>
</html>

layout.css

body {
 margin-top:0px;
 margin-left:0px;
 background:#FFFFFF;
 background-image: url(background.gif);
 background-repeat: repeat-y;
 color: #333333;
 text-align:left;
 padding:0;
 }

#container {
text-align:left;
 border: none;
 width:700px;
 margin:left; 
 }

#header {
 height:50px;
 background:#FFFFFF;
 color:#FFFFFF;
 }

#menubar {
 height:50px;
 background:#F2F2F2;
 border:none;	
 }

#bodyblock {
 position:relative;
 background: #DCDCDC;
 width:700px;
 padding:0;
 }

#leftcolumn {
height: 100%;
 float:left;
 background:#DCDCDC;
 color: #D7DBD3;
 width:200px;
 }

#content {
 width:500px;
 background-color:#FFFFFF;
 color: #FFFFFF;
 border:none;	
 text-align:left;
 }

#footer {
 height:25px;
 background:#F2F2F2;
 color: #FFFFFF;
border: none;
 margin:0;
 }

zcorpanMedlem sedan dec. 20042 245 inlägg

2 jan. 2005 20:51#2

Om du tar bort width för #bodyblock och #content samt lägger till clear:both; på #footer...

Andra synpunkter:

Använd en strict DTD.
Undvik <br>
Börja med h1 och inte med h3
Om du ska (låstas) använda XHTML så använd inte saker som inte fungerar med XML... tex <meta http-equiv="content-type" ... /> har ingen som helst verkan i XML. Jag vet inte om du hade skrivit ">" och att forumet ändrade det till ">", men i XML måste man använda entities (eller CDATA (som inte fungerar i HTML)) om man ska använda saker som <, > och &. Sålänge du använder medietypen text/html så tolkas din kod som dåligt skriven HTML av UA:n (webbläsaren).

K@llenMedlem sedan mars 20032 667 inlägg

2 jan. 2005 20:57#3

zcorpan skrev:

Om du tar bort width för #bodyblock och #content samt lägger till clear:both; på #footer...

Andra synpunkter:

Använd en strict DTD.

Undvik <br>

Börja med h1 och inte med h3

Om du ska (låstas) använda XHTML så använd inte saker som inte fungerar med XML... tex <meta http-equiv="content-type" ... /> har ingen som helst verkan i XML. Jag vet inte om du hade skrivit ">" och att forumet ändrade det till ">", men i XML måste man använda entities (eller CDATA (som inte fungerar i HTML)) om man ska använda saker som <, > och &. Sålänge du använder medietypen text/html så tolkas din kod som dåligt skriven HTML av UA:n (webbläsaren).

Ahh tack! :D

Hur får jag "kolumnerna" för menyn och innehållet att gå ner till sidans botten då?

zcorpanMedlem sedan dec. 20042 245 inlägg

2 jan. 2005 21:12#4

Varför ska de göra det? Du får väl fylla på med innehåll ;)

Anyway, om du *måste* få sidan att gå ända ner så finns det ett antal lösningar. En av dem: http://www.sitepoint.com/forums/showthread.php?t=143801

Jag har släppt iden med 100% height, det finns ingen egentlig mening med det ;)

K@llenMedlem sedan mars 20032 667 inlägg

3 jan. 2005 11:40#5

Mening eller inte mening är individuellt. ;) Jag löste det enligt följande:
http://www.alistapart.com/articles/fauxcolumns