Noch nicht viel geschrieben
ich habe verschiedene html-seiten erstellt, mit mehreren layers, die absolut positioniert sind.wie kann ich den gesamte Seiteninhalt zentrieren, also, daß er für jeden Browser jeweils in der Mitte steht?
layout zentrieren
Allrounddilettant
AW: layout zentrieren
Zitat aus Herr_D's Sigantur:
"Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden." Zitat Ende
der GoMeZ
Zitat aus Herr_D's Sigantur:
"Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden." Zitat Ende
der GoMeZ
Noch nicht viel geschrieben
ok, und wo genau? in der css-datei ist ja jedes element einzeln definiert..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<link href="../css/index.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="logo"><img src="../bilder_seite/mslogogreygreenneu.gif" width="217" height="69" alt="logo" /></div>
<div id="balken"><img src="../bilder_seite/balken.gif" alt="balken" width="908" height="30" /></div>
<div id="agenturfuer"><img src="../bilder_seite/agenturweiss.gif" width="229" height="21" /></div>
<div id="navi"><img src="../bilder_seite/navi2.gif" alt="navi" width="701" height="36" /></div>
</body>
</html>
Zuletzt bearbeitet von einem Moderator:
AW: layout zentrieren
das mir margin und padding auf 0 is absoluter humbuck...du musst ein layer über alle layer legen und den dann mittels margin: auto zentrieren... dieser layer sollte natürlich nicht absolute positioniert sein. Ich würd relative nehmen. Auserdem muss im body tag auch noch margin: auto rein.
Edit: Wo ich gerad dein Queltext seh..mach ne 1.1 xhtml version draus.
das mir margin und padding auf 0 is absoluter humbuck...du musst ein layer über alle layer legen und den dann mittels margin: auto zentrieren... dieser layer sollte natürlich nicht absolute positioniert sein. Ich würd relative nehmen. Auserdem muss im body tag auch noch margin: auto rein.
Edit: Wo ich gerad dein Queltext seh..mach ne 1.1 xhtml version draus.
Noch nicht viel geschrieben
AW: layout zentrieren
das hab ich auch schon gelesen und probiert.ich weiss nur net wo dieser layer liegen soll (´über´), und ob es ein div sein soll.(also als AP-Element).
das hab ich auch schon gelesen und probiert.ich weiss nur net wo dieser layer liegen soll (´über´), und ob es ein div sein soll.(also als AP-Element).
AW: layout zentrieren
Der gesamte Quelltetx und vor allem die CSS
Meine Signatur ist ja schon zitiert worden
... die Frage kannst du mittels Forensuche bestimmt 100x beantworten...
Ohne dein CSS zu kennen raten wir nur rum... und Positionierung absolut oder relativ ist unnötig...
Der gesamte Quelltetx und vor allem die CSS
Meine Signatur ist ja schon zitiert worden
... die Frage kannst du mittels Forensuche bestimmt 100x beantworten...Ohne dein CSS zu kennen raten wir nur rum... und Positionierung absolut oder relativ ist unnötig...
AW: layout zentrieren
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<link href="../css/index.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body id="body">
<div id="zentrieren">
<div id="logo"><img src="../bilder_seite/mslogogreygreenneu.gif" width="217" height="69" alt="logo" /></div>
<div id="balken"><img src="../bilder_seite/balken.gif" alt="balken" width="908" height="30" /></div>
<div id="agenturfuer"><img src="../bilder_seite/agenturweiss.gif" width="229" height="21" /></div>
<div id=""><img src="../bilder_seite/navi2.gif" alt="navi" width="701" height="36" /></div>
</div>
</body>
so muss dus machen den zentrieren div mus du relative positionieren. Dann in der body un zentrieren klasse margin:auto eintragen.
Das funktioniert soweit ich weiss aber nur mit einer xhtml 1.1 version.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable -->
<link href="../css/index.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body id="body">
<div id="zentrieren">
<div id="logo"><img src="../bilder_seite/mslogogreygreenneu.gif" width="217" height="69" alt="logo" /></div>
<div id="balken"><img src="../bilder_seite/balken.gif" alt="balken" width="908" height="30" /></div>
<div id="agenturfuer"><img src="../bilder_seite/agenturweiss.gif" width="229" height="21" /></div>
<div id=""><img src="../bilder_seite/navi2.gif" alt="navi" width="701" height="36" /></div>
</div>
</body>
so muss dus machen den zentrieren div mus du relative positionieren. Dann in der body un zentrieren klasse margin:auto eintragen.
Das funktioniert soweit ich weiss aber nur mit einer xhtml 1.1 version.
Noch nicht viel geschrieben
AW: layout zentrieren
wie geht das mit dem layer, der über alle anderen gelegt wird?
"ich weiss nur net wo dieser layer liegen soll (´über´), und ob es ein div sein soll.(also als AP-Element). "
das sind jetzt natürlich nur die 4 layers..
@charset "utf-8";
#logo {
position:absolute;
left:446px;
top:16px;
width:217px;
height:69px;
z-index:2;
visibility: visible;
}
#balken {
position:absolute;
left:94px;
top:90px;
width:906px;
height:29px;
z-index:3;
visibility: visible;
}
#agenturfuer {
position:absolute;
left:405px;
top:92px;
width:312px;
height:18px;
z-index:4;
visibility: visible;
}
#navi {
position:absolute;
left:200px;
top:120px;
width:701px;
height:36px;
z-index:5;
visibility: visible;
wie geht das mit dem layer, der über alle anderen gelegt wird?
"ich weiss nur net wo dieser layer liegen soll (´über´), und ob es ein div sein soll.(also als AP-Element). "
das sind jetzt natürlich nur die 4 layers..
@charset "utf-8";
#logo {
position:absolute;
left:446px;
top:16px;
width:217px;
height:69px;
z-index:2;
visibility: visible;
}
#balken {
position:absolute;
left:94px;
top:90px;
width:906px;
height:29px;
z-index:3;
visibility: visible;
}
#agenturfuer {
position:absolute;
left:405px;
top:92px;
width:312px;
height:18px;
z-index:4;
visibility: visible;
}
#navi {
position:absolute;
left:200px;
top:120px;
width:701px;
height:36px;
z-index:5;
visibility: visible;
Zuletzt bearbeitet:
localhorst
AW: layout zentrieren
HTML:
CSS:
Wichtig, damit das später auch im IE funktioniert muss deine Seite valide sein. Testen kannst du es hier: validator.w3.org!
Gruß
Tim
HTML:
Code:
<div id="page-zentrieren">
<!-- alle anderen divs hierzwischen -->
</div>CSS:
Code:
#page-zentrieren{
width: 500px; /* oder was auch immer du für eine Breite haben möchtest! */
margin: 0 auto; /* damit wird es zentriert - 0 = 0px Abstand nach oben */
position: relative; /* optional */
}Wichtig, damit das später auch im IE funktioniert muss deine Seite valide sein. Testen kannst du es hier: validator.w3.org!
Gruß
Tim
Zuletzt bearbeitet:
undefined
AW: layout zentrieren
Soweit richtig, jedoch ist position:relative nicht optional sondern zwingend. Wenn du das raus nimmst richten sich die anderen Divs nicht an "page-zentrieren" sondern wieder am Browserfenster aus.
Soweit richtig, jedoch ist position:relative nicht optional sondern zwingend. Wenn du das raus nimmst richten sich die anderen Divs nicht an "page-zentrieren" sondern wieder am Browserfenster aus.
Noch nicht viel geschrieben
AW: layout zentrieren
danke für die antworten!
gilt das für die gesamte page, auch wenn die divs völlig verschieden positioniert sind, brauche ich dafür noch den neuen layer ´drüber´oder nicht?
#page-zentrieren{
width: 500px; /* oder was auch immer du für eine Breite haben möchtest! */
margin: 0 auto; /* damit wird es zentriert - 0 = 0px Abstand nach oben */
position: relative; /* optional */
}
danke für die antworten!
gilt das für die gesamte page, auch wenn die divs völlig verschieden positioniert sind, brauche ich dafür noch den neuen layer ´drüber´oder nicht?
#page-zentrieren{
width: 500px; /* oder was auch immer du für eine Breite haben möchtest! */
margin: 0 auto; /* damit wird es zentriert - 0 = 0px Abstand nach oben */
position: relative; /* optional */
}
Zuletzt bearbeitet:
localhorst
AW: layout zentrieren
Das gilt für die ganze Page! Der Satz mit dem "Layer drüber" war verwirrend. Es war wohl eher "Layer drum" gemeint!
Richtig, in seinem Fall notwendig.
Das gilt für die ganze Page! Der Satz mit dem "Layer drüber" war verwirrend. Es war wohl eher "Layer drum" gemeint!
Richtig, in seinem Fall notwendig.
AW: layout zentrieren
Beides nicht wirklich - ok, beim 2. hast du kommentiert "optional"...
In habe ich ein komplettes Layout gepostet, kannst du gern verwenden und dir dementsprechen anpassen. Die Seite ist schon zentriert.
Natürlich ist dies optional
Gruß
Edit: Ok, das AP überlesen, dann macht position: relativ; wieder Sinn, sorry!
Code:
<body id="body">
Code:
position: relative; /* optional */In habe ich ein komplettes Layout gepostet, kannst du gern verwenden und dir dementsprechen anpassen. Die Seite ist schon zentriert.
Natürlich ist dies optional
Gruß
Edit: Ok, das AP überlesen, dann macht position: relativ; wieder Sinn, sorry!
Zuletzt bearbeitet:
Noch nicht viel geschrieben
AW: layout zentrieren
--------edit----
--------edit----
Zuletzt bearbeitet:
localhorst
AW: layout zentrieren
<div id="page-zentrieren"></div> ist quasi der neue "Layer"!
Wenn du das div so einbaust, wie ich es gezeigt habe, sollte es bei dir funktionieren. Alles was du an anderen Elementen absolut positioniert hast, orientiert sich dann an dem neuen Div, welches alle deine Elemente umschließt.
<div id="page-zentrieren"></div> ist quasi der neue "Layer"!
Wenn du das div so einbaust, wie ich es gezeigt habe, sollte es bei dir funktionieren. Alles was du an anderen Elementen absolut positioniert hast, orientiert sich dann an dem neuen Div, welches alle deine Elemente umschließt.
Mod | Web
AW: layout zentrieren
Der Div mit der ID page-zentrieren ist dein äusserer Behälter in dem alle anderen untergebracht werden. Hier gehts nicht um 'drüber' und 'drunter' sondern im 'innen' und 'drumherum'.
vielleicht solltest du Dir mal ein paar Grundbegriffe aus diesem Bereich ansehen:
Der Div mit der ID page-zentrieren ist dein äusserer Behälter in dem alle anderen untergebracht werden. Hier gehts nicht um 'drüber' und 'drunter' sondern im 'innen' und 'drumherum'.
vielleicht solltest du Dir mal ein paar Grundbegriffe aus diesem Bereich ansehen:
AW: layout zentrieren
"Funktioniert", sobald ich, zumind. für meine Auflösung, die Breite auf 1200px stelle, dann ist erst "mittig". Verkleinere ich die Auflösung, steht nix mehr mittig, auch nicht im IE.
Ergo: Nicht die ideale Lösung.
Warum eigentlich diese Absolut-Positionierungen?
"Funktioniert", sobald ich, zumind. für meine Auflösung, die Breite auf 1200px stelle, dann ist erst "mittig". Verkleinere ich die Auflösung, steht nix mehr mittig, auch nicht im IE.
Ergo: Nicht die ideale Lösung.
Warum eigentlich diese Absolut-Positionierungen?
Noch nicht viel geschrieben
AW: layout zentrieren
und wie positioniert sich dieser div dann zum browserfenster, je nach Auflösung, mittig?
und wie positioniert sich dieser div dann zum browserfenster, je nach Auflösung, mittig?
AW: layout zentrieren
Hast du dir den Link angesehen?
Wurde schon genannt:
Sorgt fürs zentrieren der Seite.
Dass die Inhaltselemente sich in diesem Container anpassen, was sie bei absolute Positionierungen und deiner CSS "nicht" tun, zumindest wenn sich die Auflösungen ändert. Ich würde es mit "floaten" der Div´s lösen oder die CSS umschreiben.
Wäre auch die elegantere Variante...
Hast du dir den Link angesehen?
Wurde schon genannt:
Code:
#container {
padding: 0;
margin: 0 auto;
width: deine gewünschte seiten-breite;
}Dass die Inhaltselemente sich in diesem Container anpassen, was sie bei absolute Positionierungen und deiner CSS "nicht" tun, zumindest wenn sich die Auflösungen ändert. Ich würde es mit "floaten" der Div´s lösen oder die CSS umschreiben.
Wäre auch die elegantere Variante...
Zuletzt bearbeitet:
Willkommen auf PSD-Tutorials.de
In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.
Nächster neuer Gratisinhalt
03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Flatrate für Tutorials, Assets, Vorlagen
Statistik des Forums