Avatar billede hanxa Nybegynder
22. september 2008 - 19:19 Der er 11 kommentarer

Undgå at div klapper sammen

Hej, ved brug af absolute klapper min <div class="indhold"></div> sammen, er der en god måde at undgå dette? Der er en grund til at jeg gerne vil placere det sådan.

<style type="text/css">
body{
    margin:0;
    padding:0;
    font:1em Arial, Helvetica, sans-serif;
}
.indhold{
    margin: 0 auto;
    width:655px;
    background-color: #fff;
    border:1px solid #00CC00;
    position:fixed
}
.menu{
position:absolute;
height:20px;
}
</style>


<div class="indhold">
    <p>Noget tekst</p>
   
    <div class="menu">
        <a href="/forside" title="forside">forside</a>
    </div>
</div>
Avatar billede soerenlyn Nybegynder
22. september 2008 - 19:28 #1
Når jeg tester det klapper din div med class="indhold" ikke sammen ... ?
Avatar billede hanxa Nybegynder
22. september 2008 - 19:31 #2
Jo den gør, hvis du sætter en border på .indhold vil du se den ikke omslutter .menu
Avatar billede soerenlyn Nybegynder
22. september 2008 - 19:35 #3
Det kan jeg godt se, men den klapper jo ikke sammen, menuen er bare ikke inden i.
Men position:absolute gør at dens placering måles i forhold til øverste venstre hjørne, og ikke i forhold til den boks den omkranses af. Sæt position:relative i stedet...
Avatar billede hanxa Nybegynder
22. september 2008 - 19:55 #4
Det ved jeg godt, men nej - det skal være:

.menu{
position:absolute;
top:0px
height:20px;
}

og jeg ville høre om der er en måde at undgå at den klapper sammen.
Avatar billede w13 Novice
22. september 2008 - 20:34 #5
Når du bruger absolute, ryger den jo uden for den omkransende div. :P Brug relative for at løse det.
Avatar billede hanxa Nybegynder
22. september 2008 - 22:44 #6
Jo, men vælger jeg at gøre det - så beholder <div class="indhold"> højden

altså hvis jeg sætter

.menu{
top:-70px;
position:relative;
height:20px;
}

så følger bunden på indhold ikke med op?
Avatar billede roenving Novice
22. september 2008 - 22:48 #7
-- måske skal du bare bruge en clear-div ?-)

<div class="indhold">
    <p>Noget tekst</p>
   
    <div class="menu">
        <a href="/forside" title="forside">forside</a>
    </div>
    <div style="clear:both;font-size:0;line-height:0;">&nbsp;</div>
</div>
Avatar billede w13 Novice
22. september 2008 - 22:49 #8
Hvor skulle den følge med op? :)
Avatar billede hanxa Nybegynder
22. september 2008 - 22:59 #9
: ) det er sku da lidt svært at forklare : ) roenving, det hjælper ikke, eller er det ved absolute?

body{
    margin:0;
    padding:0;
    font:1em Arial, Helvetica, sans-serif;
}
.indhold{
    margin: 0 auto;
    width:655px;
    background-color: #fff;
    border:1px solid #00CC00;
}
.menu{
    position:relative;
    height:70px;
    top:-30px;
    border:1px solid #0000FF;
}
</style>



<div class="indhold">
    <p>Noget tekst</p>
   
    <div class="menu">
    <p><a href="/forside" title="forside">forside</a></p>
    </div>
</div>
Avatar billede w13 Novice
23. september 2008 - 09:11 #10
Når du giver et element en minus-værdi som "top" og sætter position:relative;, så vil bunden på .indhold ikke følge med op, nej.
Det er bare sådan, det fungerer. Så må du gøre indhold mindre, sætte en minus-værdi som bundmargin el.lign.

Hvis du derimod retter din .menu-CSS-del til:

.menu{
    height:70px;
    margin-top:-30px;
    border:1px solid #0000FF;
}

så skulle det fungere helt fint. Og helt uden brug af position.
Avatar billede w13 Novice
27. september 2008 - 12:53 #11
Kommet videre?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester