I html byter du plats för main och sidebar
i css sätter du float:left; på main
och tar bort margin-left på main.
Tror det ska räcka.
Frågan#1
Hej!
Jag är en nolla på css/div-layout, har alltid använt mig av tabeller.... Men nu ska det bli ändring på det!
Har tänkt mig en layout som ska vara precis som jarvklos exempel här:
Jarvklos tvåspaltexempel
Men skillnaden är att jag vill byta plats på sidebar och main. Jag vill alltså att det ska se ut som min bifogade layout nedan.
layout som jag vill ha
Skulle någon vänlig själ kunna ändra i koden nedan så det blir som jag vill ha det? Jag har försökt lite men det vill sig inte...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* nollställ marginaler och indrag för alla element - inklusive listor
Läs t.ex. [url]http://www.clagnut.com/blog/1287/[/url] om du inte sett denna förr */
* {margin:0;padding:0;}
/* Grundinställningar för visningsytan */
html,body {
color: #000; background-color:#cdd;
height:100%; /* se till att vi kan utnyttja hela visningsytan */
text-align:center; /* centrera #container a'la bluerobot.com del 1 */
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px; line-height: 18px;
color: #000; background-color:transparent;
padding: 5px 10px 5px 10px;
}
#container {
width:740px; /* innehållets totala bredd */
min-height:100%; /* ta upp hela sidan (se MISIE-hack nedan) */
background-image:url(bakgrund_tvaspalt.gif); /* Se alistapart.com "faux columns" */
margin:0 auto; /* centrera #container a'la bluerobot.com del 2 */
text-align: left; /* ... och del 3 */
}
#header{
height: 140px;
background-color:#c44;
}
#menu {
height: 23px;
background-color:#cc8;
}
/* tvåspaltad lösning a'la realworldstyle.com del 1*/
#sidebar {
width:220px; /* skall vara mindre än margin-left på #main (med marginal) */
float:left;
}
/* tvåspaltad lösning a'la realworldstyle.com del 2*/
#main {
width:500px; /* width+margin-left skall vara < width på #container, med marginal */
margin-left:230px; /* något mer än bredden på #sidebar */
}
/* sidfotsmek */
#belowthebottom {
height:28px; /* samma som #bottom */
clear:both;
}
#bottom{
width:740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color:#cc8;
margin-top:-28px; /* samma som height */
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if IE]>
<style type="text/css">
/* fulhack - nödvändigt bl.a. pga att MSIE inte förstår min-height */
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>menu</p></div>
<div id="sidebar"><p>sidebar</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean tristique tortor nec neque.</p>
</div>
<div id="main"><p>main</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
<p>Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.</p></div>
<div id="belowthebottom"> </div>
</div>
<div id="bottom"><p>Bottom</p></div>
</body>
</html>
Tack så mycket!
