Avatar billede coolcom Nybegynder
03. oktober 2008 - 13:08 Der er 10 kommentarer og
1 løsning

Problemer med float

Hey..

Jeg har et problem med float. Jeg vil tage udgangspunkt i dette billed:

http://lildholdt.dk/float.jpg

Den pink kasse er #menu og den grå er #banner.

Mit stylesheet ser således ud:

#menu {
    background: url(images/menu_bg.png) no-repeat;
    width:220px;
    height:270px;
    float:left;
    margin-right: 6px;
    margin-left: 15px;
}

#banner {
    background: url(images/banner.jpg) no-repeat;
    width: 594px;
    height: 270px;

}

Mit problemer er at i Firefox overlapper de to hinanden, hvorimod i IE bliver de placeret korrekt. Jeg har fundet en løsning på dette, ved at sætte margin-left, på banneret, men er det den "korrekte" løsning?
Avatar billede ssv Nybegynder
03. oktober 2008 - 13:26 #1
Hvis du sætter en float: left; på #banner bør det da gerne virke :-)
Avatar billede coolcom Nybegynder
03. oktober 2008 - 13:54 #2
Korrekt. Det har jeg også prøvet, men så ryger jeg ind i andre problemer:

http://lildholdt.dk/float2.jpg

Baggrunden dækker ikke indholdet.
Avatar billede w13 Novice
03. oktober 2008 - 13:54 #3
Sæt en <div style="clear:both"></div> til sidst i den omkransende (hvide) div.
Avatar billede coolcom Nybegynder
03. oktober 2008 - 14:05 #4
Det virkede ikke. Min style.css ser nu således ud:

/*
---------------------------------
//Generelt
---------------------------------
*/

* {margin:0px;padding:0px;}

body {
    background: #858680;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color:#333333;
}

a {
    color:#d61059;
    text-decoration: underline;
}




/*
---------------------------------
//Containers
---------------------------------
*/

#container {
    width: 850px;
    background-color: #FFFFFF;
    display:block;
    position:relative;   
    text-align: left;
    padding-bottom: 15px;
    padding-top: 15px;
    margin: 15px auto;
    clear:both;
}

#top {
    background: url(images/top.jpg) no-repeat;
    width:820px;
    height:76px;
    margin-left: 15px;
}

#menu {
    background: url(images/menu_bg.png) no-repeat;
    width:220px;
    height:270px;
    float:left;
    margin-right: 6px;
    margin-left: 15px;
}

#banner {
    background: url(images/banner.jpg) no-repeat;
    width: 594px;
    height: 270px;
    margin-left: 241px; !important
}

Det er #container der er den hvide.
Avatar billede w13 Novice
03. oktober 2008 - 14:15 #5
Nej, der skal heller ikke clear:both; på din #container, men du skal lægge et nyt div-element ind til sidst i containeren. Og dette element skal så have clear:both; :)
Avatar billede coolcom Nybegynder
03. oktober 2008 - 14:27 #6
Jep.. Så virker det.. Smid et svar for point :)
Avatar billede coolcom Nybegynder
03. oktober 2008 - 14:32 #7
Lige et side spørgsmål..

Da jeg har brugt * {margin:0px;padding:0px;}, er der ikke længere noget mellemrum mellem de forskellige <p></p>. Hvis jeg f.eks. tilføjer margin-bottom:10px; til p {}, laver den jo også et mellemrum til sidst. og Tilsvarende hvis jeg tilføjer margin-top: 10px, laver den et mellem rum i starten. Kan disse mellemrum undgås og stadig have mellemrum imellem, uden fjerne * {margin:0px;padding:0px;} ?
Avatar billede w13 Novice
03. oktober 2008 - 15:02 #8
Nej. =)
Avatar billede coolcom Nybegynder
03. oktober 2008 - 15:05 #9
øv :(

Men du mangler lige at give et svar hvis du vil have pointene:P
Avatar billede w13 Novice
03. oktober 2008 - 15:07 #10
;)
Avatar billede w13 Novice
03. oktober 2008 - 15:33 #11
Tak for points! :)
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