Divar brevid varandra
Försöker lära mig koda i CSS istället för att använda tabeller för design. Detta kräver en hel del omtänk och jag förstår mig inte riktigt hur jag ska få mina divar lägga sig brevid varandra utan att lägga in absoluta värden, vilket jag vill undvika.
Har denna HTML-kod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <body><div class="container"> <img src="bilder/head.gif" width="720" height="100"> <div class="SidSpalt"> test </div> <div class="MittenSpalt"> test </div> <div class="SidSpalt"> test </div></div></body> |
Och detta är min CSS-kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | body { text-align:center; background-image:url(bilder/bak.gif); margin:5; padding:0;}#container { width: 750px; }#SidSpalt{ width: 140px; border-left-width: 1px; border-left-color: #000000; border-right-width: 1px; border-right-color: #000000; background-color:#0099FF}#MittenSpalt{ width: 440px; background-color:#FFFFFF} |
Vore bra om någon hade en guide/exempel som beskriver hur man löser vissa design problem. Om jag behöver hjälp med CSS egenkaper går jag bara till W3C. Jag behöver en knuff att komma in i rätt tankar och helt enkelt glömma tabeller.
Svara
Sv: Divar brevid varandra
Ex:
<code>
.contentLeft
{
clear: none;
float: left;
}
.contentRight
{
clear: none;
float: Right;
}
.contentCenter
{
clear: none;
float: none;
}
<div id="contentLeft">
Vänster!
</div>
<div id="contentRight">
Höger!
</div>
<div id="contentCenter">
Mitten!
</div>
</code>
Snabbt och enkelt! (och fel?)
Svara
Sv:Divar brevid varandra
Nu får jag dom på samma rad, dock vill jag ha sidan centrerad, vänsterspalten hamnar längst ut, mitten direkt efter och höger längst ut i högerkanten.
Svara
Sv: Divar brevid varandra
Spontant, och kanske fel: Gör alla till float: left; lägg dem i en yttre div, vilken du centrerar.
Svara
Sv:Divar brevid varandra
Bra, nu får jag dom ligga efter varandra. dock fortfarande längst med vänster kanten, vill inte centras. Vilka attribut ska den yttre diven ha?
Nu har den:
1 2 3 4 5 | #container { text-align:center; width: 750px; } |
Min bild som jag har överst blir centrarad men inte divarna (se kod från första inlägget)
Svara