Layout zentrieren und ein paar Kleinigkeiten

sfd · #1 (**permalink**) 01.10.2008, 16:31

Moin moin zusammen,
vorweg, ich CSS-Neuling und hatte mit HTML bisher auch nich viel am Hut, habe mich aber gestern und heute etwas darin versucht. Das Ergebnis is schon ganz gut geworden, aber eben noch das was ich will.
Ich habe das ganze mal hochgeladen damit es anschaulich wird: xare.org

Ich hätte gerne das ganze Layout (inkl. Bild) zentriert, unter dem Layout noch 5px platz und vor allem das Layout und Bild gescheit bündig sind, das ist ja noch etwas verschoben.
In dem Menü links hätte ich gerne den Text ebenfalls zentriert und nur bei MouseOver unterstrichen, eventuell auch farbig hinterlegt. Ich hab schon nen bisschen rumgesucht und rumprobiert es aber nich gescheit hinbekommen. Deswegen is es auch ein bisschen durcheinander.

Meine style.css sieht so aus:

Code:

body {
	background-color: #333333;
	font-family: Verdana;
}

a:link, a:visited, a:active  {
	color: #ffffff;
	font-weight: bold;
}

a:hover {
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}

#banner{
 background-image: url(banner.gif);
 width: 920px;
 height: 244px;
}



a.menu {
	display:block;
	padding:3px;
	border-top:1px solid #000;
	background-color:#737994;
	text-align:center;
	color:#ffffff;
	text-decoration:none;
}


div {
	font-size:12px;font-family:Verdana;
	position:absolute;
	background-color:#ffffff;
}

#left {
	background-color:#000000;
	width:128px;
	float:left;
	margin: 5px;
}

#content {
	border:1px solid #000000;
	background-color:#000000;
	width:610px;
	float:center;
	padding:0px 10px;
}

a.menu:link, a.menu:visited
{
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

a.menu:hover
{
	color: #ffffff;
	font-weight: bold;	
	text-decoration: underline;
}


.inhalt
{
	border:0px solid #aaa;
	background-color:#000000;
	left:200px;top:50px;
	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-bottomright:12px;
	padding:5px;
	height: 90%;
}

.menu
{
	border:1px dashed #ffffff;
	background-color:#000000;
	padding:5px;
	float: left;
	width: 120px;
	margin:0px 5px 5px 0px;
}

und meine index.html so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<title>xare.org</title>
	<link rel="Stylesheet" href="style.css" type="text/css" />

</head>
<body>
	
<img src="banner.gif">
<div style="width:920px;height:90%;margin:0px auto;text-align:left;background-color:#000000;border:1px solid #000000;-moz-border-radius-bottomleft:12px;-moz-border-radius-bottomright:12px;">
	
	<div id="left">
		<div class="menu">
			<a href="http://gwd.xare.org">gwd 1</a>
		</div>
	</div>
	<div id="center">
	
</div>
</body>
</html>

Wäre nett, wenn ihr mir da helfen könntet. Danke schon mal.

Darkness · #2 (**permalink**) 01.10.2008, 17:15

Zum Zentrieren:

Setz am Besten den ganzen Content in einen div mit margin-left: auto.
Für den Internet Explorer musst du text-align: center in den body Bereich schreiben.

Im Menü einfach:
.menu a, .menu a:visited { text-align: center; text-decoration: none; }
.menu a:hover { text-decoration: underline; }

sfd · #3 (**permalink**) 01.10.2008, 17:56

Danke schomal, habe es probier (auch online aktualisiert) aber es geht leider nicht. Er hat jetz das Layout verkürzt, der Text is jetz zwar nur noch bei MouseOver unterstrichen, aber immernoch nich zentriert.

Habe jetz im style.css folgendes hinzugefügt:

Code:

zentrieren {
	margin-left: auto;
}

und index.html sieht nun so aus:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<title>xare.org</title>
	<link rel="Stylesheet" href="style.css" type="text/css" />

</head>
<body style="text-align: center">
<div class="zentrieren">
	<img src="banner.gif">
	<div style="width:920px;height:90%;margin:0px auto;text-align:left;background-color:#000000;border:1px solid #000000;-moz-border-radius-bottomleft:12px;-moz-border-radius-bottomright:12px;">
	

		<div id="left">
			<div class="menu">
				<a href="http://gwd.xare.org">gwd 1</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>

fricca · #4 (**permalink**) 01.10.2008, 18:05

Damit dieses Element zentriert werden kann, muss auch der rechte Margin auf auto gesetzt werden und das Element eine feste Breite erhalten. Du hast bereits ein solches Element in deinem Code, es hat nur keinen Namen, sondern inline-Styles.
Solange du aber alle Div-Elemente absolut positionierst, kannst du so überhaupt nicht zentrieren. Lösche die Angaben, die du für alle Divs machst.

sfd · #5 (**permalink**) 01.10.2008, 18:18

Zitat:

Zitat von fricca

Damit dieses Element zentriert werden kann, muss auch der rechte Margin auf auto gesetzt werden und das Element eine feste Breite erhalten. Du hast bereits ein solches Element in deinem Code, es hat nur keinen Namen, sondern inline-Styles.
Solange du aber alle Div-Elemente absolut positionierst, kannst du so überhaupt nicht zentrieren. Lösche die Angaben, die du für alle Divs machst.

Sorry, aber ich versteh nich so ganz was du meinst? rechte margin auf auto setzen is kein Thema, aber den Rest weiß ich nich so richtig. Könntest du vielleicht kurz mein CSS anpassen? Das wär nett.

fricca · #6 (**permalink**) 01.10.2008, 18:19

Nein, ich passe dir deinen Code nicht an. Hier gibt es Hilfe zur Selbsthilfe. Fertiger Code kostet Geld.

Ich schrieb von absoluter Positionierung. Also durchsuche dein Stylesheet danach. Das ist nicht schwer.

aboleo · #7 (**permalink**) 01.10.2008, 18:38

Hat das eigentlich irgend einen Grund warum innerhalb des head-tags sich ein weiterer html-tag befindet?!

sfd · #8 (**permalink**) 01.10.2008, 18:42

Zitat:

Zitat von aboleo

Hat das eigentlich irgend einen Grund warum innerhalb des head-tags sich ein weiterer html-tag befindet?!

Nöö, wie gesagt, alles etwas durcheinander. Hab ihn schon rausgenommen.

Zitat:

Zitat von fricca

Nein, ich passe dir deinen Code nicht an. Hier gibt es Hilfe zur Selbsthilfe. Fertiger Code kostet Geld.

Ich schrieb von absoluter Positionierung. Also durchsuche dein Stylesheet danach. Das ist nicht schwer.

Da hast du natürlich recht.

Also ok, postion: absolute hab ich rausgenommen. Allerdings bleibt jetz nur noch das zentrierte Bild und ein Menü übrig, es sie denn ich definiere margin left und right für alle divs, dann ist er wieder da, aber immernoch links.
Ich stehe grade echt aufm Schlauch.

fricca · #9 (**permalink**) 01.10.2008, 18:46

Du sollst überhaupt nichts für "alle Divs" angeben. Ich habe dir gesagt, was dem einen Element fehlt, mit dem du deine gesamte Seite zentrieren willst. Also lies bitte nochmal, was dort steht.

Nein, dein Layout ist dann noch lange nicht fertig. Du musst dir noch etliche Grundlagen erarbeiten. Aber das geht nur Schritt für Schritt, nicht auf einmal. Also mach jetzt die ersten Schritte.
Dazu gehört übrigens auch validieren. Auf einen Fehler hat aboleo dich bereits hingewiesen.

Aktualisiere deinen Online-Code.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout & Absolutes Zentrieren	Innocentus	(X)HTML	2	08.11.2010 20:26
Layout zentrieren	vespa classics	CSS	2	13.01.2010 00:23
Layout mit festen Breiten zentrieren	Iago	CSS	2	05.08.2009 18:52
Layout asymetrisch zentrieren	swsg	CSS	7	05.08.2009 00:15
Noch ein paar kleine Fehler im Layout...	silvia	CSS	5	29.12.2006 20:13