HTML & CSSur HTML, XHTML & CSS
9 svar · 391 visningar · startad av Troll
Hejsan!
Har ett problem som jag skulle vilja ha hjälp med. Hur ska jag skriva min kod så att "left", "center" och "right" att bete sig som tabeller?
Det jag vill göra är att få dem att anpassa sig efter varandra i höjd. Dvs om jag tex klämmer in massa text i "center" så ska längden på "left" och "right" anpassa sig efter höjden på "center".
css:
body {
text-align:center;
padding:0px;
margin:0px;
}
#frame {
width:700px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}
#contentleft {
width:140px;
padding:0px;
float:left;
background:#666333;
}
#contentcenter {
width:420px;
padding:0px;
float:left;
background:#eee;
}
#contentright {
width:140px;
padding:0px;
float:left;
background:#666666;
}
#contentheader {
background:#999999;
height: 70px;
}
#contentbttm {
background:#222222;
height: 20px;
}
Sidan:
<!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">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="frame">
<div id="contentheader">
top
</div>
<div id="contentleft">
left
</div>
<div id="contentcenter">
center
</div>
<div id="contentright">
right
</div>
<div id="contentbttm">
bttm
</div>
</div>
</body>
</html>
Något annat jag undrar rent allmänt är hur jag ska skriva för att med samma kod få layouten att bli 100% i höjd. Eftersom header och bttm har fasta värden så antar jag att jag ska sätta height:100%; på resten men det funkar inte som jag vill utan sidan får en scroll av någon anledning.
Någon som kan och har lust att hjälpa mig lite med detta?
En enkel väg ut är att lägga in en bakgrundsbild i #frame; en pixel hög, 700 px bred. De första 140pixlarna till vänster med färgen #666333, nästa 420: #eee; sista 140 #666666.
Då kommer det se ut som de fortsätter ända ner.
(glöm inte clear:left i #contentbttm) :)
Nämen fy dum jag är.. så enkelt. :D
Tack så mycket!
Du har ingen aning om hur jag ska göra för att få sidan att bli 100% i höjd? Har testat att lägga in 100% i #frame och i right, center och left men det funkar endå inte som jag vill :/
Får en scroll på sidan och det vill jag ju inte att det ska göra när det inte finns någon information på den. Det blir ju inte så när man använder tabeller så det borde väll gå att lösa med css?
css:
* {margin:0;padding:0}
html,body {height:100%;}
body {
text-align:center;
}
#frame {
width:700px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
min-height:100%;
background:#f00;
}
#contentleft {
width:140px;
padding:0px;
float:left;
background:#666333;
}
#contentcenter {
width:420px;
padding:0px;
float:left;
background:#eee;
}
#contentright {
width:140px;
padding:0px;
float:left;
background:#666666;
}
#contentheader {
background:#999999;
height: 70px;
}
#contentbttm {
background:#222222;
height: 20px;
clear:left;
}
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<style type="text/css">
#frame {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="frame">
<div id="contentheader">
<p>top</p>
</div>
<div id="contentleft">
<p>left</p>
</div>
<div id="contentcenter">
<p>center sdfsdf sdfsdf sdfsdf sdf sdf sdf sdf sd fs dfsdfsdf sdf sdfsdf sdfs dfsdf sdfs dfsdf sdf sdf sdfs dfsldkjfsklödfj öjdfsöf
söodkfösldkf sdöflksdf öslkdfös dfö lksdfö lskdf sd fölks dfsödk ösldf ösdkf</p>
</div>
<div id="contentright">
<p>right</p>
</div>
<div id="contentbttm">
<p>bttm</p>
</div>
</div>
</body>
</html>
För att din #contentbttm alltid ska hamna längst ner; kika på det här exemplet:
http://member.webforum.nu/2241/okkidos_bilskola.html
Ok, tack så väldigt mycket, ska kika igenom detta!
Jag fick tråkigt så jag fixade iordning koden enligt exemplet jag länkade till:
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<style type="text/css">
#frame {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="frame">
<div id="contentheader">
<p>top</p>
</div>
<div id="contentleft">
<p>left</p>
</div>
<div id="contentcenter">
<p>center sdfsdf sdfsdf sdfsdf sdf sdf sdf sdf sd fs dfsdfsdf sdf sdfsdf sdfs dfsdf sdfs dfsdf sdf sdf sdfs dfsldkjfsklödfj öjdfsöf
söodkfösldkf sdöflksdf öslkdfös dfö lksdfö lskdf sd fölks dfsödk ösldf ösdkf</p>
</div>
<div id="contentright">
<p>right</p>
</div>
<div id="belowthebottom"> </div>
</div>
<div id="contentbttm">
<p>bttm</p>
</div>
</body>
</html>
css:
* {margin:0;padding:0}
html,body {height:100%;}
body {
text-align:center;
}
#frame {
width:700px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
min-height:100%;
background:#f00;
}
#contentleft {
width:140px;
padding:0px;
float:left;
background:#666333;
}
#contentcenter {
width:420px;
padding:0px;
float:left;
background:#eee;
}
#contentright {
width:140px;
padding:0px;
float:left;
background:#666666;
}
#contentheader {
background:#999999;
height: 70px;
}
#contentbttm {
background:#222222;
height: 20px;
width:700px;
text-align:left;
margin-left:auto;margin-right:auto;
margin-top:-20px; /* samma som height */
}
#contentbttm p {
line-height:18px;
padding: 1px 10px 1px 10px;
}
#belowthebottom {
height:20px;
clear:left;
}
Nu blev jag fundersam igen, hur kommer det sig att #contentbttm inte kan ligga innanför #frame egentligen?
Sen kom jag på att jag faktiskt måste ha left, right och center 100% hi höjd eftersom jag vill klämma in borders på sidorna till center så att de går ända ner till bttm. Fy så knepigt det blev plöttsligt :D
Hmm..
Inga konstigheter egentligen :e
#frame är exakt 100% hög. Men du kan inte enkelt placera sidfoten längst ner utan att trixa - så hela lösningen bygger på att sidfoten (#contentbttm) ligger under #frame, men att den "dras upp" med en negativ toppmarginal... Orsaken är att jag av olika anledningar ville testa att ta fram en lösning helt utan absolutpositioneringar...
Detta tillvägagångssätt funkar perfekt så länge inte innehållet i #frame blir "högre" än webbläsarfönstret, för då hamnar ju sidfoten ovanpå den nedersta biten innehåll - därav att jag lägger en "spök-fot" under innehållet i #frame med samma höjd som #contentbttm - för på så sätt hamnar ju "foten" alltid över ett "tomt" utrymme i #frame ;)
borders sköter du med bakgrundsbilden i #frame - inte i respektive div! - Se exemplet http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html som är en variant av samma tvåspaltade tema som du utgick ifrån (tricket är detsamma som insider beskrev högre upp i tråden - och det funkar även för trespaltade lösningar om man är lite noga med pixlarna ;) )