Antworten auf deine Fragen:
Neues Thema erstellen

div zentrieren funktioniert nicht

Alada

Nicht mehr ganz neu hier

hallo, ich versuche eine div-basierte web-page aufzubauen.
in der mitte des monitors soll die 1024-pixel große seite zu sehen sein.
ich habe hier schon viel darüber gelesen, aber es funktioniert bei mir nicht.
hier der aufbau der index - seite:

Code:
<div id="DivWrapper" style="text-align:center">

<div id="DivTop"><img id="Rahmen_Top_Grau" src="images/Rahmen-Top-Grau.jpg" width="1024" height="13" alt="" /></div>

<div id="DivLinks"><img id="Links" src="images/Links.jpg" width="142" height="755" alt="" /></div>

<div id="DivBannerTop"><img id="Top" src="images/Top.jpg" width="726" height="83" alt="" /></div>

<div id="DivRechts"><img id="Rechts" src="images/Rechts.jpg" width="156" height="755" alt="" /></div>

<div id="DivBanner"><img id="Banner" src="images/Banner.jpg" width="726" height="144" alt="" /></div>

<div id="DivMain">

und hier der anteil des div.css

Code:
body
 {
	text-align: center;
}

#DivWrapper {
	position:relative;
	width:auto;
	height:auto;
	z-index:9;
	top: #F00;
	text-align: center;
	background-position: center;
	vertical-align: middle;
	margin-right: auto;
	margin-left: auto;
	
}


#apDiv2 {
	position:absolute;
	width:707px;
	height:35px;
	z-index:1;
	
	top: 3px;
	
	text-align: center;
}
#DivTop {
	position: absolute;
	left: 10px;
	top: 15px;
	width: 1024px;
	height: 13px;
	z-index: 1;
	line-height: 13px;
}
#DivLinks {
	position: absolute;
	left: 10px;
	top: 28px;
	width: 142px;
	height: 755px;
	z-index: 2;
	vertical-align: middle;
}
#DivBannerTop {
	position: absolute;
	left: 152px;
	top: 28px;
	width: 726px;
	height: 83px;
	z-index: 3;
}
#DivRechts {
	position: absolute;
	left: 878px;
	top: 28px;
	width: 156px;
	height: 755px;
	z-index: 4;
	vertical-align: middle;
}
#DivBanner {
	position: absolute;
	left: 152px;
	top: 111px;
	width: 726px;
	height: 144px;
	z-index: 5;
}
#DivMain {
	position: absolute;
	left: 152px;
	top: 255px;
	width: 716px;
	height: 474px;
	z-index: 6;
	background: url(images/Main.jpg);
	padding-left: 10px;
}
#DivInhalt {
	position: absolute;
	left: 188px;
	top: 0px;
	width: 502px;
	height: 464px;
	z-index: 8;
	padding-left: 10px;
	text-align: justify;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	overflow: auto;
	
}
#DivFuss {
	position: absolute;
	left: 152px;
	top: 729px;
	width: 726px;
	height: 71px;
	z-index: 7;
}

wo liegt denn hier der fehler??
 

Herr_D

offline

AW: div zentrieren funktioniert nicht

Code:
body
 {
	text-align: center;
}

#DivWrapper {
	/* position:relative; fliegt raus! */
	width:44em; /* hier müssen Werte stehen */
	height:auto; /* unnötige Angabe */
        [B]margin: 0 auto;[/B] /* regelt den Abstand
	z-index:9;
	top: #F00;
	text-align: center;
	background-position: center;

}


Wobei dann die absoluten Positionierungen der Tochterdiv nicht mehr funzen...

Die sind wahrscheinlich auch nicht nötig...



Seite wäre gut...


Ich muss jetzt allerdings in den Unterricht
 

Loupcouloir

noch MENSCH

AW: div zentrieren funktioniert nicht

noch als Ergänzung:
die End-Tags </div> für Wrapper und Main nicht vergessen im HTML
LG Loupcouloir
 

Alada

Nicht mehr ganz neu hier

AW: div zentrieren funktioniert nicht

Leider funktioniert das immer noch nicht.
Der Wrapper zentriert sich nicht im Monitor.... Hatte es sogar mal mit Tabelle probiert - auch das ging nicht.
 

Alada

Nicht mehr ganz neu hier

AW: div zentrieren funktioniert nicht

hier ist ein screen.
kritik über das layout wäre natürlich auch toll. wobei ich den grauen rahmen gelöscht habe.
 

Bobbes

Er weiß es nicht!

AW: div zentrieren funktioniert nicht

Code:
#DivWrapper {
    position:relative;
    [B]width:1024px;[/B]
    z-index:9;
    top: #F00;
    text-align: center;
    background-position: center;
    vertical-align: middle;
    [B]margin: 0 auto;[/B]
}
probiers mal so...

HTML:
<div id="DivWrapper" style="text-align:center">

<div id="DivTop"><img id="Rahmen_Top_Grau" src="http://www.psd-tutorials.de/modules/Forum/images/Rahmen-Top-Grau.jpg" width="1024" height="13" alt="" /></div>

<div id="DivLinks"><img id="Links" src="http://www.psd-tutorials.de/modules/Forum/images/Links.jpg" width="142" height="755" alt="" /></div>

<div id="DivBannerTop"><img id="Top" src="http://www.psd-tutorials.de/modules/Forum/images/Top.jpg" width="726" height="83" alt="" /></div>

<div id="DivRechts"><img id="Rechts" src="http://www.psd-tutorials.de/modules/Forum/images/Rechts.jpg" width="156" height="755" alt="" /></div>

<div id="DivBanner"><img id="Banner" src="http://www.psd-tutorials.de/modules/Forum/images/Banner.jpg" width="726" height="144" alt="" /></div>

<div id="DivMain">


</div>
</div>
und so....
 

Alada

Nicht mehr ganz neu hier

AW: div zentrieren funktioniert nicht

hej wie geil, habe einfach divs.css geändert - und jetzt funzt das - danke
 

Loupcouloir

noch MENSCH

AW: div zentrieren funktioniert nicht

Du wolltest Input zum Layout:
- für meinen Geschmack nicht sehr prickelnd, etwas zu flach.
Mein Tipp: grafisch etwas aufpeppen, evt. eine weitere Farbe
- In Header-Grafik Bezug zum Thema "IT" herstellen, weil hier gehts um:
- HW
- SW
- Dienstleistungen
wie wäre es mit Nullen und Einsen statt des Gitters rechts ?

LG Loupcouloir
 

Alada

Nicht mehr ganz neu hier

AW: div zentrieren funktioniert nicht

mh... die hautpfarben der firma sind grau und rot.
das bild ist eine eps-datei die ich bei shutterstock gekauft habe, da sind leider keine ebenen dabei - also kann ich da ja leider keine 0en und 1en einbauen, oder?
 

Loupcouloir

noch MENSCH

AW: div zentrieren funktioniert nicht

schon besser.
Aber was hälst Du davon, eine solche Schmuckgrafik komplett selbst in PS oder AI zu entwerfen ? Dann könntest Du einen Block mit Nullen und Einsen gestalten und den super in der Transformation Verzerren.
Wie man echt tolle Linien-Grafiken hinbekommt hab ich mal in einem Video-Tutorial (Webdesign), ich glaube von Stefan, gesehen. Sollte irgendwo auf dieser Site zu finden sein.
LG Loupcouloir
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

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.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.345
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben