Oprettet man. d. 23. august 2010 kl. 00:47:01

dennism
dennism (4.891 point. Point ude: 0)
www.dennismadsen.com

Problem med position absolute

Jeg har lavet dette eksempel:
http://uploads.dennismadsen.com/ (...)

Jeg har tre bokse, som indeholder noget data. Indholdet i disse bokse bliver genereret af et CMS, så jeg ved ikke, hvor høje de bliver. Da jeg skal have en afstand mellem boksene på 40px, har jeg sat en margin-left. Da denne så kommer til at gælde for alle mine bokse og da der kun skal være denne afstand mellem dem, bliver der 40px i overskud, da det ikke skal være på den første. For at kompencere for dette, har jeg laves position:absolute på main-divet, og sat left:-40, for at få det til at passe med bredden.

Eneste problem er, at når min main-div bliver absolute, så optager den jo ikke længere plads - og derfor bliver footer-teksten i bunden ikke vist.

Hvordan kan jeg komme uden om dette?

Skrevet man. d. 23. august 2010 kl. 11:06:58| #1

-mundi-
-mundi- (36.262 point)
magictraders.dk
Lav endnu en klasse som du sætter på det første div. I den sætter du margin-left: 0px !important;

Skrevet man. d. 23. august 2010 kl. 19:43:15| #2

kimdolleris
kimdolleris (12.075 point)
Enten det eller brug last-child pseudo klassen og vend din margin om til højre.

#main .box {
    float:left;
    width:200px;
    margin-right:40px;
    background-color:#e0e0e0
}
#main .box:last-child{
    margin-right:0px !important;
}

Garanterer ikke for ie6, men resten skulle det virke i..

=) Kim

Skrevet ons. d. 25. august 2010 kl. 16:12:02| #3

Virker heller ikke i IE8, så må nok lave noget jQuery som fjerner margin i stedet.

Skrevet ons. d. 25. august 2010 kl. 17:47:35| #4

kimdolleris
kimdolleris (12.075 point)
Hov, du har ret.. jQuery kan håndtere last-child;

// IE hack
    $(function(){
        $("#main .box:last-child").css("margin-right","0")
    })

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

CSS - praktisk hjælp

Oprettet den 9. februar 2012 kl. 22.33
pstidsen giver 30 point for svar | Giv et svar »

CSS - teoretisk hjælp

Oprettet den 9. februar 2012 kl. 22.33
pstidsen giver 100 point for svar | Giv et svar »

Problemer med inline-block i webshop

Oprettet den 9. februar 2012 kl. 13.48
mckeene giver 200 point for svar | Giv et svar »

Seneste guides

Installer win 7
Den gode bruger


   




Tips & Tricks fra PC World

Teaser billede

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.


Anmeldelser fra PC World

Teaser billede

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Nu kan du snart hente Windows 8

Den nye offentlige betaversion af Windows 8 er klar i denne måned.


Nyheder fra Computerworld

Teaser billede

Måske snart slut med Androids helt store problem

Android-platformen har længe været plaget af et særligt problem. Men måske er problemet nu ved at være elimineret.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger