FuelMedlem sedan okt. 20001 285 inlägg Kanske ett problem för div-master jarvklo ? Jag vill ha utseendet som i den bifogade bilden. Divarna ska ligga i ordningen logo, content, right & copyright. Hela sidan ska vara 100%, right ska vara fast bredd 200px och content auto Ex.
<div id="wrapper">
<div id="logo"><h1>My website</h1></div>
<div id="content"><p>My content div asd asd asdsd as dasd sd asds</p></div>
<div id="right"><p>My right div sad asd ssdas ds asda</p></div>
<div id="copyright">My copyright</div>
</div>
gärna så enkel css / div upplägg som möjligt och kompatibel. Nån som kan ? jag har inte fått det att lyckas 100% och vill helst undvika position:absolute
überfuzzMedlem sedan apr. 2006409 inlägg Jag förstår inte vad det är som är själva problemet..? Kan du inte bara sätta upp fyra div:ar. Sen är det bara att bolla med storlekarna.
#square1 { width: 200px; height: 40px; background: ffffff; border: 1px solid #000000; position: absolute; left: 10px; top: 10px; z-index: 0; }
#square2 { width: 170px; height: 150px; background: ffffff; border: 1px solid #000000; position: absolute; left: 10px; top: 55px; z-index: 0; overflow: auto;}
#square3 { width: 25px; height: 150px; background: ffffff; border: 1px solid #000000; position: absolute; left: 185px; top: 55px; z-index: 0; }
#square4 { width: 200px; height: 35px; background: ffffff; border: 1px solid #000000; position: absolute; left: 10px; top: 210px; z-index: 0; }
smacka in skiten i din html/php-kod.
<div id="square1"><p>logo</p></div>
<div id="square2"><p>innehåll</p></div>
<div id="square3"><p>meny</p></div>
<div id="square4"><p>copyright</p></div>
OkkidoMedlem sedan maj 20007 492 inlägg überfuzz; ditt exempel är värdelöst.
#wrapper {width:100%; height:100%}
h1 {width:100%; height: 200px; background: green;}
#content {width:100%; margin-right: -200px; float:left; background: yellow;}
#right {float:right; width: 200px; background: blue}
#copyright {height: 200px; background: red;}
.clear {clear:both;}
<div id="wrapper">
<h1>My website</h1>
<div id="content"><p>My content div asd asd asdsd as dasd sd asds</p></div>
<div id="right"><p>My right div sad asd ssdas ds asda</p></div>
<br class="clear" />
<div id="copyright">My copyright</div>
</div>
Där är ett exempel. Fast du kanske vill ha den 100% i height också? isf, är det något i höjdled som ska ha fast värden?
FuelMedlem sedan okt. 20001 285 inlägg det är fanimig amazing! :birp det funkar i både FF & Internut Exploder.. kanon ! super ! tack! tror det var här jag har har fastnat på width:100%; margin-right: -200px; har testat width:auto; margin-right: 200px; & liknande :x
FuelMedlem sedan okt. 20001 285 inlägg oj ..nej det gjorde det inte
texten försvinner i content och logo divven buggar ur i IE .. jobbar vidare
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Okkido Example</title>
<style type="text/css">
#wrapper {width:100%; height:100%}
#logo { width:100%; height: 80px; background: green;}
h1 { margin:0; padding:10px; }
#content { width:100%; margin-right: -200px; float:left; background: yellow;}
#right {float:right; width: 200px; background: blue}
#copyright {height: 80px; background: red;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>My website</h1>
<div>
<div id="content">
<p>My content div</p>
<p>
Lorem ipsum ne eius lucilius inimicus vim.
Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale
virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam
adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem.
Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing
comprehensam.
</p>
</div>
<div id="right">
<p>My right div</p>
<p>
Lorem ipsum ne eius lucilius inimicus vim.
Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale
virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam
adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem.
Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing
comprehensam.
</p>
</div>
<br class="clear" />
<div id="copyright">
<p>My copyright</p>
</div>
</div>
</body>
</html>
kör jag med bara H1 istället för en div runt H1 fungerar den saken iaf, & andra sidan kan jag inte dölja den taggen och lägga in en bild istället :l
FuelMedlem sedan okt. 20001 285 inlägg so far so good.. bara problem med content..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Okkido Example</title>
<style type="text/css">
#wrapper { width:100%; height:100% }
#logo { width:100%; height: 80px; background: green; }
h1 { visibility:hidden; background-image:url(); }
#content { width:100%; margin-right: -200px; float:left; background: yellow; }
#right { float:right; width: 200px; background: blue }
#copyright { height: 80px; background: red; clear:both; }
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>My website</h1>
</div>
<div id="content">
<p>My content div</p>
<p>
Lorem ipsum ne eius lucilius inimicus vim.
Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale
virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam
adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem.
Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing
comprehensam.
</p>
</div>
<div id="right">
<p>My right div</p>
<p>
Lorem ipsum ne eius lucilius inimicus vim.
Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale
virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam
adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem.
Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing
comprehensam.
</p>
</div>
<div id="copyright">
<p>My copyright</p>
</div>
</div>
</body>
</html>
OkkidoMedlem sedan maj 20007 492 inlägg Vad är det för problem med content?
Och ang. h1:an, har du satt display:block och en width och height på den?
FuelMedlem sedan okt. 20001 285 inlägg Content döljs under right
NiponMedlem sedan juli 2003270 inlägg Nja.. För att det där ska funka i "de flesta" webläsare måste man "floata" fler divvar... Och sätta dit en clear-div.
Dessutom måste right vara lika hög eller högre än content-divven. Annars verkar det som om "Content döljs under right". Är den inte det måste man sätta en höjd på right.
Annars funkar detta (utan höjd på right):
<html>
<head>
<style type="text/css">
body { margin: 0; padding: 0; }
#wrapper { width: 100%; float:left; }
#logo { width: 100%; float: left; height: 80px; background: green; }
#logo h1 { visibility: hidden; background-image: url(); }
#content { width: 100%; float: left; margin-right: -200px; background: yellow; }
#right { width: 200px; float: right; background: blue; }
#copyright { width: 100%; float: left; height: 80px; background: red; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>My logo div</h1>
</div>
<div id="content">
<p>My content div</p>
<p>Lorem ipsum ne eius lucilius inimicus vim. Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem. Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing comprehensam. </p>
</div>
<div id="right">
<p>My right div</p>
<p>Lorem ipsum ne eius lucilius inimicus vim. Libris copiosae volutpat sea ut. Congue accusata has ei, mel te tale virtute scripserit. Qui in solet everti patrioque. Nec ei sonet nusquam adversarium, est at alii adhuc reprehendunt, vel in nusquam definitionem. Qui liber graeci propriae ex, ei est viris mediocrem, eum ut adipiscing comprehensam. </p>
</div>
<div id="clear"></div>
<div id="copyright">
<p>My copyright</p>
</div>
</div>
</body>
</html>
Hoppas jag :l ...
NiponMedlem sedan juli 2003270 inlägg Har kollat min kod i IE 6, FF, Opera o Netscape... Funkar finfint!
Vad är det som inte funkar för dig?
