1
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?
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
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