mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 23:19 Benutzername: Passwort: Auto-Login

Thema: CSS: divs zentriert UND ganzseitig. vom 06.05.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: divs zentriert UND ganzseitig.
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.

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
michael2105

Dabei seit: 26.04.2010
Ort: Köln
Alter: 47
Geschlecht: Männlich
Verfasst Do 06.05.2010 18:29
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
superheld
Threadersteller

Dabei seit: 12.05.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 06.05.2010 19:23
Titel

Antworten mit Zitat Zum Seitenanfang

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ß.
  View user's profile Private Nachricht senden
tschuingum

Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
Verfasst Fr 07.05.2010 08:11
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.