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

Seite zentrieren

A

autonom

Neues Mitglied
Hallo,

ich weiß, Suchfunktion usw. und ich habe auch schon einiges gefunden, was aber nicht geholfen hat.

Ich habe eine Seite erstellt, die im Safari super lief, wie auch Firefox, Opera usw. Jedoch im IE6 und IE7 Probleme gemacht hat. Jetzt habe ich die Seite komplett neu aufgebaut und die position erstmal absolute links und oben gemacht. Jetzt hätte ich aber gerne, dass die Seite zentriert ist, sowohl von oben als auch von unten.

Die Seite ist so ausgerichtet, dass sie ein Haupt div hat (#main), in welchem ich dann alles andere absolute positioniert habe. Somit müsste doch eigentliich lediglich im css etwas an dem Haupt-div geändert werden, oder? Wenn ja, was? Ich bin einfach nicht mehr durchgestiegen...

Über Hilfe würde ich mich freuen!

Code: 
body,td,th {
	font-family: Helvetica Neue;
	font-size: 12px;
	color: #3D4045;
}
body {
	background-color: #CBDCFF;
	background-image: url(img/hintergrund-page.png);
	background-repeat: repeat;
}
a {
	font-size: 12px;
	color: #617B8B;
}
a:link {
	color: #3D4045;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #3D4045;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
	color: #3D4045;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}
h1 {
	font-size: 16px;
}
#main {
	position: absolute;
	left:4px;
	top:4px;
	width:950px;
	height:772px;
	z-index:1;
	background-image: url(../img/hintergrund-komplett.png);
}
#inhalt {
	position:absolute;
	width:651px;
	height:415px;
	z-index:2;
	left: 238px;
	top: 276px;
	overflow: auto;
}
#navi-links {
	position:absolute;
	width:234px;
	height:430px;
	z-index:1;
	left: 1px;
	top: 276px;
}
#button1 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:1;
	left: -1px;
}
#button2 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 42px;
}
#button3 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 84px;
}
#button4 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 126px;
}
#button5 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 168px;
}
#button6 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 210px;
}
#button7 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 252px;
}
#button8 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 294px;
}
#button9 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 336px;
}
#button10 {
	position:absolute;
	width:234px;
	height:38px;
	z-index:2;
	left: -1px;
	top: 378px;
}
#garagentor-bild {
	position:absolute;
	width:280px;
	height:229px;
	z-index:4;
	background-image: url(../img/produktpalette/garagentore.png);
	left: 354px;
	top: 324px;
}
#aktuelles {
	position:absolute;
	width:234px;
	height:207px;
	z-index:2;
	top: 210px;
	left: 1px;
	background-image: url(../img/hintergrund-aktuelles.gif);
}
#navi-oben {
	position:absolute;
	width:631px;
	height:38px;
	z-index:1;
	left: 276px;
	top: 234px;
}
#ebene-ansprechpartner {
	position:absolute;
	width:659px;
	height:416px;
	z-index:1;
	left: 234px;
	top: 276px;
	overflow: auto;
	background-image: url(../img/hintergrund-ansprechpartner.png);
}
#ebene-ansprechpartner-text {
	position:absolute;
	width:314px;
	height:336px;
	z-index:1;
	left: 9px;
	top: 62px;
	overflow: auto;
	text-align: left;
}
#aktuelles-scroll {
	position:absolute;
	width:198px;
	height:144px;
	z-index:2;
	float:left;
	top: 48px;
	left: 12px;
	overflow: auto;
}
#flash-intro {
	position:absolute;
	width:200px;
	height:177px;
	z-index:1;
	top: 0px;
	left: 278px;
}
#lbs {
	position:absolute;
	width:200px;
	height:100px;
	z-index:1;
	top: 11px;
	left: 431px;
	background-image: url(../img/lbs-logo.gif);
}
#lbs-partner {
	position:absolute;
	width:auto;
	height:auto;
	z-index:1;
	top: 5px;
	left: 5px;
}
#lbs-text {
	position:absolute;
	width:630px;
	height:115px;
	z-index:2;
	left: 5px;
	top: 187px;
}
#lbs-details {
	position:absolute;
	width:630px;
	height:115px;
	z-index:3;
	left: 5px;
	top: 372px;
}
#lbs-bedingungen {
	position:absolute;
	width:630px;
	height:115px;
	z-index:4;
	left: 0px;
	top: 757px;
}
#muecke {
	position:absolute;
	width:119px;
	height:98px;
	z-index:1;
	top: 261px;
	left: 0px;
}
#video1-sicherheitsgriffe {
	position:absolute;
	width:320px;
	height:240px;
	z-index:1;
	left: 167px;
	top: 67px;
}

die Seite ist weku-muenchen.de
 
Wenn Du etwas absolut positionierst, wie soll es dann gleichzeitig zentriert sein?
Das ist nicht vorstellbar. Für eines davon musst Du Dich entscheiden.
 
Verzichte am besten auf die Positionierung mittels Position. Das geht wesentlich einfacher.

Horizontal zentrierst du Objekte mittels des auto-Werts für Margin.
(Natürlich nur, wenn das Element schmaler ist, als der Viewport.)

Für die vertikale Zentrierung gibt es hier einen Lösungsansatz:
CSS vertical center using float and clear
 
@ Efchen:
Ich habe es vorerst absolut positioniert, weil alles andere schiefgegangen ist. Sollte nur eine vorübergehende Lösung sein, trotzdem danke für deine Hilfe!

@ Ishmael...

das mit dem margin:0 auto;
hab ich schon ausprobiert... vll. noch nicht zu genüge.... ich werde das einfach mal übernehmen. bei mir war dann alles, was innerhalb der ebene war, links,... aber nicht links in dem div, sondern auf der seite links...
 
soooo, sollte funktionieren mit der zentrierung...

kann jemand das mal mit ie 6 oder/und 7 testen??? wäre super!!! danke!!!

HIER
 
So funktioniert es auch.
Dennoch würde ich auch die übrigen absoluten Positionierungen weglassen.
Kannst du besser mit float- und margin-Angaben lösen.
 
Ok... ich werde versuchen, das noch umzusetzen. Ich dachte, ich kann das absolut positionieren, weil es sich ja absolut innerhalb des main-divs befindet...
 
mal ein tipp wegen der optik ich würde die Buttons und co. alles ein wenig kleiner machen kommt Seriöser =)

und es sieht ein bisschen besser aus xDD

lg lovetechno
 
Dann läufst Du aber auch Gefahr, dass das irgendwer nicht mehr lesen kann, denn die Menschen haben nicht alle gleich gute Augen.
Es wäre empfehlenswerter, die Menüpunkte (wenn Du darauf abzielst) als Text zu machen, nicht als Images, damit man die Schrift auch den eigenen Bedürfnissen skalieren kann, das geht derzeit nicht.
 
Efchen schrieb:
Dann läufst Du aber auch Gefahr, dass das irgendwer nicht mehr lesen kann, denn die Menschen haben nicht alle gleich gute Augen.
Es wäre empfehlenswerter, die Menüpunkte (wenn Du darauf abzielst) als Text zu machen, nicht als Images, damit man die Schrift auch den eigenen Bedürfnissen skalieren kann, das geht derzeit nicht.
Zum Vergrößern anklicken....

Es gibt noch einen anderen Grund: stell Dir mal vor, da kommt eines Tages ein Menüpunkt dazu:

  • hast Du Schrift mit Hintergrundbild, fügst Du im HTML-Dokument einen Link hinzu => fertig
  • hast Du die Schrift als Bild, fängst Du erst umständlich im Photoshop an...
  • weißt Du nicht mehr, welche Schriftart Du verwendet hast, bastelst Du alle Buttons neu...
Damit dürfte klar sein, wie die einzige sinnvolle Lösung aussieht...

Grüße
Bernhard
 
Vielen herzlichen Dank. Jedoch kommen keine Unterpunkte mehr hinzu und ich habe lediglich im Kundenauftrag gearbeitet. Außerdem sieht es mit Rollover besser aus, als mit Mouseover.

In Zukunft mache ich eigentlich kaum mehr statische Seiten, sondern dynamische. Da werde ich mit all diesen Problemen weniger zu tun haben.

lg
autonom
 
Der Kunde freut sich, wenn er später mal nen neuen Menüpunkt haben will und Du ihm 5 Stunden Arbeit berechnest :-D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben