Autor |
Nachricht |
superheld
Threadersteller
Dabei seit: 12.05.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 06.05.2010 18:25
Titel CSS: divs zentriert UND ganzseitig. |
|
|
Hallo!
Ich habe das Problem, dass ich es nicht hinbekomme, divs zu zentrieren UND ganzseitig darzustellen. Ich zentriere so:
Code: |
body {
text-align: center;
}
.page {
width : 960px;
margin: 0px auto;
text-align: left;
}
|
Um die Sache ganzseitig darzustellen, möchte versorge ich das .page mit position und top, sowie bottom 0. Das Ergebnis: das Element geht über die gesamte Seite in der vorgegebenen Größe, aber es ist links und nicht mehr zentriert. Egal was ich versuche, immer dieses Ergebnis. Weiß jemand Rat?
Danke.
|
|
|
|
|
michael2105
Dabei seit: 26.04.2010
Ort: Köln
Alter: 47
Geschlecht:
|
Verfasst Do 06.05.2010 18:29
Titel
|
|
|
Mach das so:
Code: | body {
text-align:center;
padding:0;
margin:0;
}
.page {
width:100%;
height:100%;
margin:0;
padding:0;
text-align:left;
}
|
.page fungiert hierbei wie ein klassischer Wrapper - bzw. Container, der alles umfasst was auf der Seite dargestellt wird.
Padding:0 und margin:0 dienen dazu den Abstand auf 0 zu halten - IE interpretiert das Box-Model falsch, darum brauchst du beide Angaben.
Gruß
Michael[/code]
Zuletzt bearbeitet von michael2105 am Do 06.05.2010 18:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
superheld
Threadersteller
Dabei seit: 12.05.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 06.05.2010 19:23
Titel
|
|
|
Hmm... Ich habe das jetzt eingebaut, aber ohne Erfolg. Vielleicht mal den ganzen Code, nicht nur die relevanten Ausschnitte:
Code: |
body {
background-image:url('/images/hintergrund.jpg');
background-position-x:center;
background-repeat:repeat-y;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding:0;
margin:0;
}
.page {
width : 960px;
height:100%;
margin: 0px auto; padding:0;
text-align: left;
}
|
Der Hintergrund wird jetzt von oben bis unten gezeigt, jedoch am linken Rand.
Baue ich den Hintergrund in .page, wird er nur hinter dem ersten darin enthaltenen Element gezeigt (.content, in dem ein Blindtext steht). .page ist lt. Webdeveloper im FF nicht 100% groß.
|
|
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Fr 07.05.2010 08:11
Titel
|
|
|
Servus,
die 100% Höhe beziehen sich immer auf das umschließende Element. Da du aber weder dem body noch dem html eine Angabe zur Höhe gönnst, tritt nicht der gewünschte Effekt ein.
Dein Code müsste also so aussehen:
HTML:
Code: |
<html>
<body>
<div id="page">
</div>
</body>
</html>
|
CSS:
Code: |
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#page {
min-height: 100%;
width: 960px;
margin: 0 auto;
}
|
Zitat: | Padding:0 und margin:0 dienen dazu den Abstand auf 0 zu halten - IE interpretiert das Box-Model falsch, darum brauchst du beide Angaben. |
Das hat mit dem IE nichts zu tun ... solange man ihn nicht in den Quirksmode schickt, hat er auch keine Probleme mit dem Boxmodell. Die Angaben dienen einfach dazu das Browserstylesheet zu überschreiben und lassen sich auch auf alle anderen Elemente ausdehen (CSS-Reset).
Frohes Schaffen
|
|
|
|
|
|
|
|
Ähnliche Themen |
divs in div zentriert darstellen
[CSS] Will nicht zentriert...
<div> zentriert ausrichten
Objekt zentriert
CSS linksbündige ul zentriert
In IE zentriert, in FF nicht
|
|