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
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>
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
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
<!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>
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>
