Header und Menü links, statt in Mitte | CSS

Flashboot · 28. September 2013

Huhu

Ich habe gerade folgendes Problem bei CSS: Der Header und das Menü sind links, anstatt in der Mitte...

Hier mal der CSS Code:

Und der HTML Code:

HTML

<html>	<head>		<title> Startseite </title>		<link rel="stylesheet" type="text/css" href="style.css" />	</head>	<body>		<div id="website">			<div id="header">				<h1>Test</h1>			</div>			<div id="main">				<div id="menue">				</div>			</div>			<div id="footer">			</div>		</div>	</body></html>

Spoiler anzeigen

Ich hoffe, jemand findet den Fehler

Drasko · 28. September 2013

Das macht macht man mit "margin: 0 auto;" und nicht mit position

//E:
Und den Text zentriert man mit text-align:center

Flashboot · 28. September 2013

Zitat von Drasko

Das macht macht man mit "margin: 0 auto;" und nicht mit position

//E:
Und den Text zentriert man mit text-align:center

Habe das doch eig. für alles gemacht, oder?

Code

#website {
	margin: 0 auto;
}

Nur den Text nicht, danke

EDIT: Problem besteht weiterhin
EDIT²: Problem sieht man hier: http://www.luca.minegp.de

Drasko · 28. September 2013

Code

body {
	background-color: #000;
background-image: url("Images/background.jpg");
	text-align: center;
}

#header {
	width: 980px;
	height: 150px;
	background-color: white;
	margin:0 auto;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
}


#header h1 {
	padding-top: 45px;
	font-size: 60px;
	font-weight:bold;
	font-family: courier;
	color: blue;
}


#header h2 {
	font-size: 20px;
	font-weight:bold;
	font-family: courier;
	color: blue;
}


#main {
	width: 980px;
}


#menue {
	width: 180px;
	height: 300px;
	background-color: #D6D6D6;
	margin:0 auto;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
}

Alles anzeigen

Getestet. Sag' ich doch

Flashboot · 28. September 2013

Zitat von Drasko

body {
background-color: #000;
background-image: url("Images/background.jpg");
text-align: center;
}

#header {
width: 980px;
height: 150px;
background-color: white;
margin:0 auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
}

#header h1 {
padding-top: 45px;
font-size: 60px;
font-weight:bold;
font-family: courier;
color: blue;
}

#header h2 {
font-size: 20px;
font-weight:bold;
font-family: courier;
color: blue;
}

#main {
width: 980px;
}

#menue {
width: 180px;
height: 300px;
background-color: #D6D6D6;
margin:0 auto;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
}

Alles anzeigen

Dankeschön

EDIT: Es soll links am Header sein, ist aber weiter rechts, mit float:left ist das menü komplett links, wie kann ich das beheben?

Drasko · 28. September 2013

Mit margin-right

Flashboot · 28. September 2013

Zitat von Drasko

Mit margin-right

Habe jetzt ein bisschen probiert und nun:

Code

margin-left: 342px;

Nur in einem Tutorial war das automatisch daran, woran liegt das?

Gizem · 28. September 2013

Habe dir mal schnell alles neu gecodet.

Spoiler anzeigen

HTML

<!DOCTYPE html><html lang="de">	<head>		<title>Homepage</title>		<meta chatset="UTF-8" />		<link rel="stylesheet" href="style.css" type="text/css" />	</head>	<body>		<div id="main">			<div class="header">				<h1>Homepage</h1>			</div>			<div class="navi">				<a href="">Startseite</a>				<a href="">Minecraft Server</a>				<a href="">SA:MP Server</a>				<a href="">Impressum</a>				<a href="">Forum</a>				<a href="">Login</a>			</div>			<div class="content">				Lorem ipsum dolor sit amet, consetetur sadipscing elitr,				sed diam nonumy eirmod tempor invidunt ut labore et dolore magna al iquyam erat,				sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.				Stet clita kasd gubergren, no sea takimata sanctu s est Lorem ipsum dolor sit amet.				Lorem ipsum dolor sit amet, consetetur sadipscing elitr,				sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,				sed diam voluptua. At ver o eos et accusam et justo duo dolores et ea rebum.				Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.			</div>		</div>		<div id="footer">			&copy; Luca H. | All rights reserved		</div>	</body></html>

Spoiler anzeigen

Code

body { margin: 0; padding: 0; cursor: default; font-size: 12px; font-family: Arial; background: url('Images/background.jpg'); }#main { width: 900px; margin: 25px auto; }#main .header { border-top-left-radius: 5px; border-top-right-radius: 5px; text-align: center; padding: 25px; background: rgba(255, 255, 255, 0.5); height: 125px; }#main .header h1 { font-size: 45pt; font-family: Courier; color: #285C80; }#main .navi { background: rgba(255, 255, 255, 0.2); padding: 8px; }#main .navi a { text-decoration: none; color: #3B96D4; margin-right: 20px; }#main .navi a:hover { text-decoration: underline; }#main .content { background: rgba(255, 255, 255, 0.4); padding: 15px; color: white; text-shadow: 1px 1px grey; }#footer { text-align: center; width: 900px; margin: 0 auto; color: white; }

Spoiler anzeigen

breadfish.de 12. März 2022