Zur Navigation

CSS und HTML zentrieren

1 Julian

Hallo,

ich würde gerne wissen wollen, wie ich eine Homepage bestehend aus CSS und HTML zentrieren kann, da <center> nicht funktioniert.

Die Seite ist bei weitem noch nicht fertig, das ist gerade mal die menüleiste bestehend aus CSS.

Was muss ich da ändern, das es trotzdem noch einwandfrei funktioniert?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DieVierReiter-MC</title>
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<style type="text/css">
"{
	margin:0px;
	padding:0px;
	}
body{
	background:url(images/background.jpg);
	height:100%;
	width:100%;
	}
#container{
	margin-top:50px;
	margin-left:100px
	}
.menu{
	list-style:none;
	}
.menu li{
	display:block;
	height:50px;
	width:125px;
	float:left;
	background: rbackground: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
	line-height:50px;
	text-align:center;
	border-right:1px solid #000;
	font-family: 'Francois One', sans-serif;
	}
.child{
	border-bottom-left-radius:20px;
	border-top-left-radius:20px;
	}
.child1{
	border-bottom-right-radius:20px;
	border-top-right-radius:20px;
	}
.menu li:hover{
	background:background: #ffffff; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color:#000000
}
.sub{
	visibility:hidden;	
	}
.menu li:hover .sub{
	visibility:visible;
	}
.sub li{
	border-top:1px solid rgba(0,0,0,1.00);
	-webkit-transition:all .1s ease 0s;
	-moz-transition:all .1s ease 0s;
	-ms-transition:all .1s ease 0s;
	-o-transition:all .1s ease 0s;
	transition:all .1s ease 0s;
	}
.fold{
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	}
.sub li:hover{
	background:background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
width:145px;
}
</style>
</head>

<body>
<div id="container">
<ul class="menu">
<li class="child">Home</li>

<li>Server
<ul class="sub">
<li>News</li>
<li>Werde *VIP*</li>
<li class="fold">FAQ</li>
</ul></li>
<li>Regeln</li>

<li>Livemap</li>

<li>Team
<ul class="sub">
<li>Owner</li>
<li>Admins</li>
<li>Mods</li>
<li class="fold">VIPs</li>
</ul></li>

<li class="child1">|DVR|
<ul class="sub">
<li>Homepage</li>
<li>YouTube</li>
<li class="fold">Facebook</li>
</ul></li>

</ul>
</div>
</body>
</html>

Und wenn ich schon mal dabei bin, was mir dabei noch nicht ganz passt, das wenn das Dropdown-Menü aufgeht es nicht direkt auf einer Linie mit dem Oberbutton nach untern verläuft, sondern etwas nach rechts versetzt aufklappt.

Würde mich auf Hilfe freuen

Gruß Julian

15.06.2014 16:22

2 Jörg

Du kannst #container zentrieren, indem du ihm eine feste Breite zuweist sowie den Wert auto für das horizontale margin

#container {
    margin:50px auto 0;
    width:760px;
}

Und hier ist das " wohl verkehrt:

"{
    margin:0px;
    padding:0px;
    }

Ein * würde hier wohl eher Sinn machen.

Probier mal, ob sich das andere Problem damit auch schon löst (nach meinem Test hat es das)

15.06.2014 19:37 | geändert: 15.06.2014 19:38

1 Forenmitglied fand diesen Beitrag gut

3 Julian

Das hat prima geklappt, ich danke dir vielmals!!

So folgendes nun:

Ich will das über dem Menü genug platz ist für einen Banner bzw. Name der HP.
Und ich wollte eine Grafik hinter dem Menü nachträglich dann einfügen, nur wie stelle ich das an, da ich den Rest der Homepage, also das ganze Design in Photoshop noch erstellen will und es dann so einfügen muss, das alles genau passt.

Das Menü sollte z. B. nicht halb im Banner dann sein. Da ich leider nicht weiß, wie ich das ganze via html/css codes generieren kann, muss Photoshop herhalten, das ich das ganze bildlich vor mir habe.

Das es jetzt zentriert ist, macht das ganze ja leichter, nur wie kann ich die genaue Position des Menüs ermitteln? Damit das Design von Photoshop dann direkt drunter passt.

Gruß Julian

15.06.2014 20:34

4 Jörg

Blockelemente (<div>, <p>, <ul> etc.) werden, wenn sie normal positioniert werden, untereinander dargestellt. Die Höhe richtet sich nach deren Inhalt. Wenn du den Banner in ein <div> einfügst, musst du für das <div> keine Höhe definieren. Ebenso wenig musst du für das Menü (<ul>) eine top Position definieren - dieses folgt ganz automatisch unterhalb.

Was anderes wäre es, wenn du position:absolute oder position:fixed verwendest, um die Elemente an bestimmte Positionen "festzunageln" - dann musst du mit margin oder padding Angaben auch dafür sorgen, dass sich die Elemente nicht überlappen. Genau aus solchen Gründen würde ich diese Positionierungen vermeiden.

15.06.2014 21:45 | geändert: 15.06.2014 21:45

5 Forenmitglieder fanden diesen Beitrag gut

5 Forum

Da es sich um ein neues Thema handelt, habe ich den Beitrag in einen eigenen Thread verschoben:

Popup schließen

16.06.2014 20:04 | geändert von Jörg: 16.06.2014 20:09

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]