10 svar · 590 visningar · startad av Emil W
Jag får inte till det med div boxar jag har försökt och försökt
för jag vill ha div boxar brevid varandra.
här är koden jag har försökt med.
.blogglista{background:#CCCC99; border:1px solid #000000; height:180px; width:172px; margin-top:0; margin-left:300; font-weight:bold; float:left; position:relative; padding:90;}
Hmm....
Kort sagt - mer info behövs - utifrån det du visar upp kan vi nog i princip bara spekulera i att du kanske har en container som är såpass smal att kalendern + blogglistans summa av bredd,margin och padding inte får plats - vlket gör att blogglistan "rasar ner" under kalendern (den är ju en float) ;)
Det och kombinationen att du inte angett enheter "px" på margins,paddings i din CSS, vilket kan göra resultatet oberäkneligt mellan olika webbläsare ;)
Men mer info som sagt så löser vi detta! :bire
Är det viktigt med <!DOCTYPE
Här kommer min html kod
<html>
<head>
<title>|||----Emils blogg----|||</title>
<link href="mallblogg.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="topp"><center><h3>Välkommen till Emils blogg</h3></center></div>
<div class="kalenderruta">
<center>
<b>Kalender</b>
<table border="0" cellpadding="3" align="center">
<tr><th align="center">M</th><th align="center">T</th><th align="center">O</th><th align="center">T</th><th align="center">F</th><th align="center">L</th><th align="center">S</th></tr>
<tr><td align="center">1</td><td align="center">2</td><td align="center">3</td><td align="center">4</td><td align="center">5</td><td align="center">6</td><td align="center">7</td></tr>
<tr><td align="center">8</td><td align="center">9</td><td align="center">10</td><td align="center">11</td><td align="center">12</td><td align="center">13</td><td align="center">14</td></tr>
<tr><td align="center">15</td><td align="center">16</td><td align="center">17</td><td align="center">18</td><td align="center">19</td><td align="center">20</td><td align="center">21</td></tr>
<tr><td align="center">22</td><td align="center">23</td><td align="center">24</td><td align="center">25</td><td align="center">26</td><td align="center">27</td><td align="center">28</td></tr>
<tr><td align="center">29</td><td align="center">30</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr>
</table>
</center>
</div>
<div class="sokruta"><center>Sök i bloggen
<form method="get" action="">
<input type="text" name="sokbloggen" size="15"> <input type="submit" value="Sök">
</form>
</center>
</div>
<div class="blogglista">
Provar
</div>
</body>
</html>
Här är css-koden
body{
margin:0px;
}
.topp{background:#CCCC99; border:0px solid #000000; height:40px;}
.kalenderruta{background:#CCCC99; border:1px solid #000000; height:180px; width:172px; margin-top:20px; font-weight:bold;}
.blogglista{background:#CCCC99; border:1px solid #000000; height:180px; width:900px; margin-top:0px; margin-left:400px; font-weight:bold; float:left; position:relative; padding:90px;}
.sokruta{background:#CCCC99; border:1px solid #000000; height:90px; width:172px; margin-top:20px; font-weight:bold;}
Är det viktigt med <!DOCTYPE
ja.
Väljer du fel ser du till att besökarens webbläsare börjar emulera "uråldrigt felbeteende" (även kallat "ställer in sig för rendering i Quirks mode") och det ger bara trubbel iom att t.ex. beräkningarna av bredder av div-block sker lite olika i olika webbläsare då.
Det är lika illa att utelämna den! (vilket gör att de flesta moderna webbläsare får för sig att använda uråldrigt felbeteende istället för modern fungerande standard ;)
Se t.ex. http://jarvklo.se/arkivet/2005/11/vadan-av-att-valja-fel-doctype.html
Jag har provat med DOCTYPE men det blir inte rätt ändå
Här kommer min html kod
[...]
Hmm...
Den där har jag råkat ut för också nån gång (det är inte <DOCTYPE som spökar värst i det här fallet) :)
Du har råkat blanda ihop två olika layoutmetoder lite bara.
Testa det här:
Men du så här
<div class="kalenderruta">
<div class="sokruta">
</div>
</div>
alternativ två
<div class="kalenderruta">
lägga in både kalendern och
sökrutan här
</div>
Men du så här
<div class="kalenderruta">
<div class="sokruta">
</div>
</div>alternativ två
<div class="kalenderruta">
lägga in både kalendern och
sökrutan här
</div>
Bägge kan funka med lite mekande - men jag menade alernativ 2 men med namnet "sidspalt" - det känns "renare" för mig.
<div class="sidspalt">
<div class="kalenderruta">...</div>
<div class="sokruta">...</div>
</div>
<div class="blogglista">Provar</div>
Huvudsaken är att du lägger en float-left-div med fast bredd först i koden, och därefter en "vanlig" div (icke-float) med en margin-left som är "större" än bredden på float-divven. (det såg ut i din kod som att det var den du höll på att komma fram till ;) )
Tack jarvklo för hjälpen allt löste sig nu
Kalas :birp