Avatar billede djthomas Nybegynder
23. maj 2004 - 16:05 Der er 9 kommentarer og
1 løsning

Centrering med div i mozilla

Jeg har en index.php fil som ser sådan ud.

<body>

<div id="site">
   
    <div id="banner">
        <img src="images/top_banner.jpg" alt="">
    </div>

</div>

</body>

og en css fil som ser sådan ud:

body {
    margin: 0px 0px 0px 0px;
    background-color: #000;
    text-align: center;
    width: 100%;
}

#site{
    width: 100%;
    text-align: center;
   
}

#banner{
    background-color: #DBD9D9;
    width: 750px;
}

Hvorfor tager den kun og centrere billedet i IE og ikke i Mozilla?

Hvordan skal det så se ud hvis den skal centreres i Mozilla også?
Avatar billede roenving Novice
23. maj 2004 - 16:14 #1
Fordi IE fejlagtigt også centrerer block-level elementer, som det udtrykkeligt er angivet i definitionen på text-align ...

Men løsningen er simpel:

body {
    margin: 0px;
    background-color: #000;
}

#site{
    text-align: center;
}

#banner{
    background-color: #DBD9D9;
    width: 750px;
    margin:0px auto;
}

-- jeg fjernede også width:100%, da både div og body pr. definition fylder hele bredden i forvejen ...

-- hvis du også skal have andre ting ind i #site, kan det være, at du skal bibeholde text-align på body, og hvis du vil styre højden ift. skærm-højden skal du tilføje:

html,body{height:100%}
Avatar billede djthomas Nybegynder
23. maj 2004 - 17:22 #2
Det virker...Svare du så får du point...
Avatar billede roenving Novice
23. maj 2004 - 17:30 #3
Velbekomme '-)
Avatar billede roenving Novice
23. maj 2004 - 17:33 #4
-- og tak for point ;~}
Avatar billede djthomas Nybegynder
23. maj 2004 - 18:10 #5
Nyt problem:

Når jeg putter mere ind i site så viser den det ikke.

<body>

<div id="site">
   
    <div id="banner">
        <img src="images/top_banner.jpg" alt="">
    </div>
   
    <div id="container">
       
        <div id="left_colum">
            left
        </div>
       
        <div id="main_colum">
            main
        </div>
       
        <div id="right_colum">
            right
        </div>
       
    </div>

</div>

</body>

og css:

body {
    margin: 0px;
    background-color: #000;
    text-align: center;
}

#site{
    text-align: center;
   
}

#banner{
    background-color: #DBD9D9;
    width: 750px;
    margin: 0px auto;
}

#container{
    background-color: #DBD9D9;
    width: 750px;
    margin: 0px auto;
}

#left_colum{
    width: 100px;
    padding-left: 5px;
    float: left;
    text-align: left;
    vertical-align: top;
}

#main_colum{
    width: 460px;
    padding-left: 10px;
    float: left;
    text-align: left;
    vertical-align: top;
}

#right_colum{
    width: 150px;
    padding-right: 5px;
    float: left;
    text-align: left;
    vertical-align: top;
}

IE viser left, main og right, som jeg forestiller mig, men Mozilla viser kun banner
Avatar billede roenving Novice
23. maj 2004 - 18:24 #6
En højde på #container gjorde det hos mig ...

-- men spørg mig ikke hvorfor !-)
Avatar billede djthomas Nybegynder
23. maj 2004 - 18:25 #7
Der har jeg prøvet med height: 100%; men det hjælper ikke
Avatar billede roenving Novice
23. maj 2004 - 18:27 #8
100% af hvad ?-)

Jeg prøvede med 20px !-)
Avatar billede djthomas Nybegynder
23. maj 2004 - 19:29 #9
Jeg fatter altså ikke ret meget af det der css og div tags...

#container vil ikke rykkes ind i midten, den er HELE tiden ude i venstre siden... Hvorfor det?
Avatar billede djthomas Nybegynder
23. maj 2004 - 19:30 #10
Arhh fandt den lige... Havde glemt margin: auto;
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