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å?
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
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%}
Det virker...Svare du så får du point...
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
En højde på #container gjorde det hos mig ... -- men spørg mig ikke hvorfor !-)
Der har jeg prøvet med height: 100%; men det hjælper ikke
100% af hvad ?-) Jeg prøvede med 20px !-)
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?
Arhh fandt den lige... Havde glemt margin: auto;
Vi tilbyder markedets bedste kurser inden for webudvikling