13 svar · 457 visningar · startad av hypatia
Jag har en sida som är uppbyggd enligt den här modellen:
<div id="container"> (width: 800 px)
<div id="top>logga</div> (width: 100%)
<div id="meny">menylänkar</div> (float: left width: 120px)
<div id="innehall"> (margin-left: 120px, ingen float)
sidans innehåll
<div style="clear:both;"> </div>
</div>
<div id="sidfot">sidfot</div> (width: 100%)
</div>
På min fotosida hämtar jag namnen på bilderna ur en databas och eftersom jag inte vet precis hur varje bild ser ut, men jag ändå vill ha dem "på samma rad" valde jag att köra två bilder bredvid varandra med float left och right och därefter en div med clear: both.
Detta ligger alltså i #innehall.
Nu till mitt problem.
När jag använder clear: both efter de två första fotonas floats bryter den även efter menyn, vilket medför att fotorad nr 2 hamnar ganska långt ner. Det blir bara så i Mozilla, inte i IE.
Kolla t.ex. här: http://www.familjenandersson.nu/foton.asp?album=17
Jag vill helst inte sätta fast höjd på divarna eftersom fotona har olika storlek och det då ibland bli onödigt mycket luft på sidan.
Förslag till hur man ska få upp rad två utan att ge efter på att divarna ska vara på samma nivå i underkant?
En bra början är att:
#innehall
{
float:left; <--- lägg till
width:644px; <----- lägg till
margin-left:0px; <---- ändra
#sidfot {
clear:both; <----- lägg till
Nu styr du bakgrunden i menyn med bakgrundsfärgen du använder i container.
Sen kan man ju fundera på om du verkligen behöver lägga varje bild i en egen div.
Det går ju att sätta bilderna till display:block och floata dem som du gör med divvarna.
Hoppas det löste problemet... har inte kunnat testa i IE. ;)
Hmm... det har jag inte ens tänkt på. Klart att man kan sätta float redan i img-taggen. Jag ska testa och lägga till grejerna du föreslog! :D
Hmm...
Jag har inte testat detta men...
Eftersom du ändå genererar sidan ur en databas kan du väl ändra lite i koden och lägga en div runt varje bildpar istället?
Om du gör så, och sedan kör samma tvåspaltstrick där som du har mellan #meny/#innehåll (float:left + width:... på den vänstra, margin-left och utelämnad width på den högra) - så bör du komma undan "clear-problemet" helt ;)
Alltså - Prova att ändra från
<div class="left"><img ... /><br />Text</div>
<div class="right"><img ... /><br />Mer text</div>
<div class="clear">&nbsp;</div>
till
<div>
<div class="newleft"><img ... /><br />Text</div>
<div class="newright"><img ... /><br />Mer text</div>
</div>
där du t.ex. har
.newleft {float:left; width:340px; }
.newright {margin-left:340px}
YES, YES, YES!!! Åh, vad jag är glad! Det funkar! :f
(Så, nu får jag inte använda fler utropstecken idag... ;))
Men om jag använder float och display: block direkt på img, hur får jag då texten att hamna där jag vill? Det måste väl ändå bli en div eller p för den då antar jag?
Jo, nånting måste du ju lägga texten i såklart. Jag vet inte, det är klurigt...
Förresten så fick du en liten glugg på 1 pixel övanför sidfoten nu. Jag fattar inte riktigt varför men en fullösning är att sätta margin-bottom:-1px på #innehall.
En alternativ lösning hade varit jarvklos förslag ovan. Nu kör du med ett annat "tvåspaltstrick" iochmed att du floatar båda. Fast båda tricken ska väl funka lika bra.
Jag testade jarvklos lösning och den funkade också. Men då måste jag hitta på någon annan asp-kod för att få det att funka när det bara är en bild på raden.
Men Insiders kod behöver jag inte ändra någonting! :D
Insider, jag höll på att ladda upp filer för att testa jarvklos förslag och då kanske något blev knas, för jag ser då inte någon glugg ovanför sidfoten nu. Gör du?
Ja, det är en glugg på 1 pixel när jag kollar i FireFox. Det är din #innehall-div som inte går ända ner till sidfoten.
Nu har jag laddat hem Firefox också, men ser fortfarande inte någon glugg...
Finns det fler som ser den?
Det syns enklast över den knapp som det står Valid XHTML på. Där den svarta kantlinjen går ner mot footern.
Det syntes tydligare på min plattskärm hemma än på den crtskärm jag sitter vid nu.
Jämför mellan IE och FF..
Nä, nu har jag testat med IE6, Moz 1.7.5, Firefox 1.0.2 och Opera 7.54, men jag ser inte något glapp i någon av dem. :)
Skumt.
Det är bara en pixlel. Minst en halv iaf. ;)
Men det spelar kanske ingen större roll om det bara är jag som ser den. :)
Tihi... en halv pixel... :D
Nä, det spelar nog inte så stor roll om det inte är fler än du som ser den. Tills vidare får den vara i alla fall. :)