✔ gesamtes Layout zentrieren?

Status
Nicht offen für weitere Antworten.
S

scrotum

Erfahrenes Mitglied
Hallo zusammen

Meine erste Frage:
Wie kann ich mein gesamtes Layout zentrieren, egal welche Auflösung der User hat?

Ich habe mit der Suchfunktion nach meinem Problem gesucht, wurde auch fündig, aber leider klappte das nicht wie ich mir das dachte. Darum muss ich ein neues "Thema" erstellen.

Zuerst einmal, ich habe erst gerade mit CSS angefangen und habe viellicht Anfängerfehler drin. Da wäre ich froh, wenn ihr mir könnt zeigen, wie man das besser macht.


Also hier mal mein CSS:
Code: 
body {
	margin: 0px;
	padding: 0px;
	border: none;
	background: #99CCFF;
	font-family: verdana;
	font-size: 11px;
	border: black 10px;
		}
		
.topleft {
	position: absolute;
	left: 0px;
	top: 2px;
	width: 180px;
	height: 100px;
	border: 1px black solid;
	background: #003399;
			}
			
.topcenter {
	position: absolute;
	left: 187px;
	top: 2px;
	width: 606px;
	height: 100px;
	border: 1px black solid;
	background: #003399;
}

.navigate {
	position: absolute;
	left: 187px;
	top: 109px;
	width: 606px;
	height: 50px;
	border: 2px solid;
	border-color: #003399;
	background: white;
}

.topright {
	position: absolute;
	left: 800px;
	top: 2px;
	width: 180px;
	height: 100px;
	border: 1px black solid;
	background: #003399;
}

.kalender {
	position: absolute;
	left: 0px;
	top: 109px;
	width: 180px;
	height: 200px;
	border: 2px solid;
	border-color: #003399;
	background: white;
}

.useronline {
	position: absolute;
	left: 0px;
	top: 336px;
	width: 180px;
	height: 200px;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-top: 2px dashed;
	border-color: #003399;
	background: white;
}	

.useronlineheader {
	position: absolute;
	left: 0px;
	top: 316px;
	width: 184px;
	height: 20px;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: white;
	background: #003399;	
}	

.lastposts {
	position: absolute;
	left: 800px;
	top: 129px;
	width: 180px;
	height: 280px;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-top: 2px dashed;
	border-color: #003399;
	background: white;
}

.lastpostsheader {
	position: absolute;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: white;
	left: 800px;
	top: 109px;
	width: 184px;
	height: 20px;
	background: #003399;
}

.lastmessages {
	position: absolute;
	left: 800px;
	top: 436px;
	width: 180px;
	height: 300px;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-top: 2px dashed;
	border-color: #003399;
	background: white;
}

.lastmessagesheader {
	position: absolute;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: white;
	left: 800px;
	top: 416px;
	width: 184px;
	height: 20px;
	background: #003399;
}

.centertext {
	position: absolute;
	left: 187px;
	top: 166px;
	width: 606px;
	height: 400px;
	border: 2px solid;
	border-color: #003399;
	background: white;
}
.centerleft {
	position: absolute;
	left: 187px;
	top: 593px;
	width: 299px;
	height: auto;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-top: 2px dashed;
	border-color: #003399;
	background: white;
}

.centerleftheader {
	position: absolute;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: white;
	left: 187px;
	top: 573px;
	width: 303px;
	height: 20px;
	background: #003399;
}

.centerright {
	position: absolute;
	left: 494px;
	top: 593px;
	width: 299px;
	height: auto;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom: 2px solid;
	border-top: 2px dashed;
	border-color: #003399;
	background: white;
}

.centerrightheader {
	position: absolute;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
	color: white;
	left: 494px;
	top: 573px;
	width: 303px;
	height: 20px;
	background: #003399;
	}

und das selbe online: http://www.alsodenn.ch/test/haupt.css

Hier der HTML-Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="de"
<html>
<head>
	<title>ALSODENN COMMUNITY</title>
	<LINK REL=stylesheet TYPE="text/css" HREF="haupt.css">
</head>
<body>
<DIV CLASS="topleft">
Hallo
</DIV>

<DIV CLASS="topcenter">
Welt
</DIV>

<DIV CLASS="navigate">
Navigate
</DIV>

<DIV CLASS="topright">
Hallo
</DIV>

<DIV CLASS="kalender">
Hallo
</DIV>

<DIV CLASS="useronline">
Hallo
</DIV>

<DIV CLASS="useronlineheader">
TITEL
</DIV>

<DIV CLASS="lastposts">
Hallo...<br>test...<br>blblblblblblabalballkadösjf öjf öalsdjfö alsjföeij aölsdj kföaoewjf öalsdjf öawej aölsdjf öa seu öasdjf öaseu äöaieä asdlö aölseu asejf asdfö auef jaösdf jaöeo...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>

<DIV CLASS="lastpostsheader">
TITEL
</DIV>

<DIV CLASS="lastmessages">
Hallo...<br>test...<br>blblblblblblabalbal...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>

<DIV CLASS="lastmessagesheader">
TITEL
</DIV>

<DIV CLASS="centertext">
DA KOMMT DER WICHTIGE TEXT REIN, VORSTELLUNG, IDEALE, ERLÄRUNG, ABOUT US ETC.
</DIV>

<DIV CLASS="centerleft">
Hallo<p></p>
Welt<p></p>
du
</DIV>

<DIV CLASS="centerleftheader">
LAST NEWS
</DIV>

<DIV CLASS="centerright">
Hallo<p></p>
Welt<p></p>
du
</DIV>

<DIV CLASS="centerrightheader">
LAST REGISTRANTS
</DIV>
</body>
</html>

Das sieht dann so aus: http://www.alsodenn.ch/test/alsodenn.html

Meine Zweite Frage:
Diese Kästen haben bei mir ja immer die gleichen Farben und Rahmen. Momentan habe ich für jeden einzelnen Kasten die Farbe und Rahmen zugeteilt. Kann ich auch mittels Vererbung irgendwie diese gleichen Information nur einmal zuteilen? Damit ich, wenn ich z.B. die Farbe ändern möchte, das nur an einem Ort ändern müsste? Wie würde der Code dazu ausschauen und was muss ich dabei beachten?

Ich hoffe, jemand kann mir helfen und danke schon im voraus.
Gruss
 
1. Frage: Horizontal zentriertes Layout

Zusätzlicher CSS-Code für haupt.css:
Code: 
div#centerDiv
{
width: 982px;
position: absolute;
left: 50%;
margin-left: -491px;
}
In dem DIV #centerDiv bettest du nun das vorhandene Layout ein:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>ALSODENN COMMUNITY</title>
        <LINK REL=stylesheet TYPE="text/css" HREF="haupt.css">
</head>
<body>

<div id="centerDiv">

<DIV CLASS="topleft">
Hallo
</DIV>

<DIV CLASS="topcenter">
Welt
</DIV>

<DIV CLASS="navigate">
Navigate
</DIV>

<DIV CLASS="topright">
Hallo
</DIV>

<DIV CLASS="kalender">
Hallo
</DIV>

<DIV CLASS="useronline">
Hallo
</DIV>

<DIV CLASS="useronlineheader">
TITEL
</DIV>

<DIV CLASS="lastposts">
Hallo...<br>test...<br>blblblblblblabalballkadösjf öjf öalsdjfö alsjföeij aölsdj kföaoewjf öalsdjf öawej aölsdjf öa seu öasdjf öaseu äöaieä asdlö aölseu asejf asdfö auef jaösdf jaöeo...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>

<DIV CLASS="lastpostsheader">
TITEL
</DIV>

<DIV CLASS="lastmessages">
Hallo...<br>test...<br>blblblblblblabalbal...<br>aha, das ist so...<br>nadann ist alles ok...
</DIV>

<DIV CLASS="lastmessagesheader">
TITEL
</DIV>

<DIV CLASS="centertext">
DA KOMMT DER WICHTIGE TEXT REIN, VORSTELLUNG, IDEALE, ERLÄRUNG, ABOUT US ETC.
</DIV>

<DIV CLASS="centerleft">
Hallo<p></p>
Welt<p></p>
du
</DIV>

<DIV CLASS="centerleftheader">
LAST NEWS
</DIV>

<DIV CLASS="centerright">
Hallo<p></p>
Welt<p></p>
du
</DIV>

<DIV CLASS="centerrightheader">
LAST REGISTRANTS
</DIV>

</div><!-- END centerDiv -->

</body>
</html>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

2. Frage: CSS-Klassen

Du könntest die Angaben border und background-color in eine neue CSS-Klasse .topbg packen, diese Angaben aus den Klassen .topleft, .topcenter, .topright entfernen und die neu erzeugte CSS-Klasse in dem HTML-Element aufrufen:

Code: 
.topbg {
border: 1px black solid;
background: #003399;
}
.topleft {
position: absolute;
left: 0px;
top: 2px;
width: 180px;
height: 100px;
}
.topcenter {
position: absolute;
left: 187px;
top: 2px;
width: 606px;
height: 100px;
}
.topright {
position: absolute;
left: 800px;
top: 2px;
width: 180px;
height: 100px;
}
HTML: 
<DIV CLASS="topleft topbg">
Hallo
</DIV>

<DIV CLASS="topcenter topbg">
Welt
</DIV>

<DIV CLASS="navigate">
Navigate
</DIV>

<DIV CLASS="topright topbg">
Hallo
</DIV>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
 
WOW! Super, funktioniert alles! Vielen Dank! Das hat mich sehr vorangebracht!

Nur noch eine kleine Frage, was ist die Überlegung hinter dem:
div#centerDiv
{
width: 982px;
position: absolute;
left: 50%;
margin-left: -491px;
}
Zum Vergrößern anklicken....

Kapier das nicht ganz, aber viellicht wenn dus in Worten erklären könntest?

Nochmals vielen, vielen Dank!
Gruss
 
Du sprichst sicherlich den negativen Wert für margin-left an?

Also, er beträgt immer die negative Hälfte von width und rückt das DIV in die Seitenmitte. Denn ohne das negative margin-left beginnt das DIV durch die Positionierung left: 50% mit dem linken Rand in der Seitenmitte, und sitzt somit außermittig.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück