• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Divbox vertikal zentrieren..

B

bobomampf

Mitglied
Hey,
ich schaffe es nicht meine Divbox vertikal zu zentrieren.. Ich habe in der Box ein Background-Image welches eine Feste größe haben sollte.. Außerdem habe ich Kopf und Fußzeile, diese sollten aber immer nur so groß sein, dass man nicht scrollen muss..

Jetzt die Frage:
Wie kann ich die Divbox zentrieren??

Ich will es möglichst xHTML Valide machen.. Mit der Seite habe ich erst begonnen, also alles was falsch ist und nicht mit dem Problem zu tun hat nicht beachten :D

Wäre euch dankbar wenn ihr mir helfen könntet :)

HTML: 
<!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" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(bg.jpg);
	background-attachment: fixed;
	margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
#header {
    background:#000000;
    height:20%;
    text-align:left;
    padding-bottom:1% auto 10% auto;
}

#content {
	background-image: url(Content.png);
	margin: 30px auto 45px auto;
	width: 848px;
    height: 540px;
    overflow:auto;
}
#footer {
    background:#000000;
    height:5%;
	width: 100%;
	position: fixed;
	bottom: 0px;
    text-align:right;
	margin: 2px;
    padding-top:1%;	
}
</style>
</head>

<body>
<div id="header">
<img src="Title.png" width="450" height="55" alt="Title Stefan Binder - Fotograf aus Ravensburg" /></div>

<div id="content">

</div>
  
<div id="footer">
	<b><font color="#178d00">Stefan Binder </font><font color="#FFFFFF">&copy; Copyrighted 2011. All Rights Resrved &nbsp;&nbsp;&nbsp;&nbsp;</font></b>
</div>
</body>
</html>
 
Also der Klassiker funktioniert bei mir nicht :/

Kannst du mir vielleicht sagen, was ich genau ändern muss in meiner schon vorhandenen CSS?? :)
 
Ich habe mal versucht dir mein Problem bildlich zu zeigen..
Ich möchte die Contentbox die Rot umrandet ist, immer zu 100% sichtbar haben von Kopfzeile zu Fußzeile.. also dass sie komplett von oben anfängt und unten dran abschließt.
Das muss ja dynamisch gehen, da ich mit festen px werten nicht alle Browser abdecken kann.. Mein Chrome hat z.b. mehr sichtbar fläche als mein IE..
6j6rkofyww1c.jpg


Kannst du meinen Code vielleicht so hinbiegen, dass das funktioniert? :sad: Du scheinst dich so gut auszukennen, dass das für dich eine einminütige Sache wäre.. und dann könnte ich es nachvollziehen und nächstes mal selbst machen. :oops:

HTML: 
<!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" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(bg.jpg);
	background-attachment: fixed;
	margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
#header {
    background:#000000;
    height: 55px;
	width: 100%;
	position: fixed;
	top: 0px;
	font-size: 18px;
	font-family: Tahoma, Geneva, sans-serif;
	color: #ffffff;
    text-align:left;
	padding-bottom: 35px;
	margin-bottom: auto;
}

#content {
	background-image: url(bg%20content.png);
	background-repeat: repeat;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	width: 848px;
	height: auto;
    overflow: hidden;
}
#footer {
    background:#000000;
    height:5%;
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
    text-align:right;
    padding-top:1%;	
}
</style>
</head>

<body>
<div id="header">
  <p><img src="Bilder/Page_01.jpg" width="450" height="55" alt="Stefan Binder - Fotograf aus Ravensburg" /><img src="Bilder/Page_02.jpg" width="369" height="55" alt="zwischen" /><img src="Bilder/Page_03.jpg" width="77" height="55" alt="Startseite" /><img src="Bilder/Page_04.jpg" width="12" height="55" alt="leer" /><img src="Bilder/Page_05.jpg" width="131" height="55" alt="Portfolio" /><img src="Bilder/Page_06.jpg" width="12" height="55" alt="leer" /><img src="Bilder/Page_07.jpg" width="120" height="55" alt="Über mich" /><img src="Bilder/Page_08.jpg" width="12" height="55" alt="leer" /><img src="Bilder/Page_09.jpg" width="149" height="55" alt="Kontakt" /></p>
</div>

<div id="content">
<img src="Title.png" width="450" height="55" /></div>
  
<div id="footer">
	<b><font color="#178d00">Stefan Binder </font><font color="#FFFFFF">&copy; Copyrighted 2011. All Rights Resrved &nbsp;&nbsp;&nbsp;&nbsp;</font></b>
</div>
</body>
</html>
 
Du könntest beispielsweise durchgängig mit absoluter Positionierung arbeiten. Die Frage ist nur, wo die Scrollbar erscheinen soll. Die einfachste Möglichkeit ist, innerhalb des .content-Containers. Aber so richtig schick ist das nicht.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

body {
    margin: 0;
    padding: 0;
}

.header {
    position: absolute;
    height: 50px;
    background: red;
    top: 0;
    right: 0;
    left: 0;
}

.footer {
    position: absolute;
    height: 30px;
    background: green;
    right: 0;
    bottom: 0;
    left: 0;
}

.content {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 30px;
    left: 0;
    background: blue;
    overflow: auto;
}

        </style>
    </head>

    <body>
        
        <div class="header">.header</div>

        <div class="content">.content

            <div style="height: 2000px;"></div>

        </div>

        <div class="footer">.footer</div>

    </body>

</html>
 
Also gescrollt werden soll im Prinzip gar nicht.. Ich möchte die Seite komplett Scrollfrei halten.. Das heißt sie ist immer nur so groß wie das Browserfenster, und dafür muss sich halt eben die contentbox anpassen.. Bisher waren meine Seiten alle statisch, das ist jetzt etwas total neues :S
 
Dann siehe mein Beispiel in #6 mit der absoluten Positionierung. Aber Scrollen wirst du so oder so nicht vermeiden können, da ein Benutzer seinen Viewport ja beliebig verkleinern kann.
 
Klasse :) Vielen Dank.. Ich hab deins bisschen umgeschrieben und es funktioniert perfekt wie es soll :) Vielen dank (Y)
 
Also das mit deiner Seite hat jetzt sehr gut geklappt.. Aber jetzt habe ich doch noch eine Frage.. Die Divbox Content soll nicht komplett zentriert sein. Das wäre dann optisch versetzt, da ja mein header 90 und mein footer 30px hoch sind.. deshalb sollte er genau mittig zwischen header und footer liegen.. aber ich krieg das verdammt nochmal nicht hin.. weder mit irgendwelchen prozent angaben noch mit festen höhen, da diese ja von browser zu browser variieren.. Das ist echt zum verrückt werden.

Ich habe mal ein beispiel wie ich meine.. Wie muss ich dass jetzt mit dem Code den du mir in #6 gemacht hast einbauen.. :sad:

pdakds5g897v.jpg
 
Addiere zu den Werten der top- und bottom-Eigenschaften von .content jeweils x hinzu. Also statt 90px und 30px etwa 190px und 130px (mit x=100).
 
Bin jetzt daheim und habs probiert :) Klappt!!

Nur noch mein letztes Problem, dann ist die Seite am Ende angelangt..

Hier siehst du einmal Google Chrome:
6pne8njmkyv.jpg


Und hier den FF
c24w4lqxaska.jpg


Wie du siehst ist alles perfekt mittig.. Aber eben durch die Browsergröße nicht gleich groß.. Aber das sollte es sein, da da ja Texte und alles reinkommen.. :(
 
Wie stellst du es dir denn vor, zu erreichen, dass die Elemente immerzu dieselben Abmessungen haben? Das geht bei unterschiedlichen Viewportgrößen schlicht und ergreifend nicht, oder?

(Die erste Frage ist übrigens nicht rhetorisch gemeint. ;))
 
Ich habe mir gedacht, dass der Abstand vom Div zu Header und Footer Browserspezifisch variieren muss.. Aber dafür müsste ich ja eine Css pro Browser machen :/ So kann dann auch das Div immer die Gleiche Höhe haben und nur der Abstand variiert.. Oder?
 
Hallo.

Dann musst du deinem div eben eine feste Höhe geben.

Übrigens es kommt nicht auf den Browser an sondern auf den Viewport, und der kann auch bei zwei gleichen Browsern total unterschiedlich sein.

Gruss
Elroy
 
Der Div hat eine feste Höhe.. Das aber durch den Wert x den ich in Top und Bottom hinzugefügt habe ändert sich die Größe von Browser zu Browser.. Kann ich den Abstand nicht mit Prozenten irgendwie regeln.. ? Das muss doch gehen dass es alle fast gleich sehen :/
 
Ich nehme an es handelt sich um den div content.

Das war deine letzte Version:
Code: 
#content {
    background-image: url(bg%20content.png);
    background-repeat: repeat;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    width: 848px;
    height: auto;
    overflow: hidden;
Ich kann da keine feste Höhe erkennen. Wie sieht denn dein aktueller Code aus?

Gruss
Elroy
 
Die Höhe wird durch den Top und Bottomwert definiert.. In Chrome ist sie bei mir 500px.. Wenn ich die Höhe aber fest eingebe wie im Code unten, dann ist es beim FF nicht mehr mittig, da ja kein Platz mehr für den Abstand unten ist..

HTML: 
.content {
    background-image: url(bg%20content.png);
	background-repeat: repeat;
	position: absolute;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	width: 848px;
	height: 500px;
    top: 156px;
    right: 0;
    bottom: 137px;
    left: 0;
    overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #FFF;
}
 
Ich hatte die absolute positionierung vergessen.

Da hilft eigentlich nur das du die komplette Seite auf eine bestimmte Grösse festlegst was dann wieder den Nachteil von Scrollbalken oder viel freier Fläche hat.

Anders ist das bei deinem Design wohl nicht zu machen. Vielleicht fällt ja mermshaus noch etwas ein.

Ein Besucher mit einem 36 Zoll Monstermonitor und voll geöffnetem Browser wird deine Seite immer anders sehen als ein ipad Benutzer, auch wenn beide den gleichen Bowser benutzen.

Damit musst du dich abfinden, und so etwas solltest du bei deinem Design berücksichtigen.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben