pxLooh
Neues Mitglied
Guten Tag liebe Community,
ich will mit einem 960Grid System eine Homepage anfertigen. Das Konzept steht bereits und es ist auch schon als PSD vorhanden.
Im oberen Bereich bzw. ganz oben soll eine durchgehende Leiste sein mit 2 Elementen "Navigation und Userbereich/Loginbereich".
Die Leiste soll durchgehend sein auf jedem Bildschirm, die 2 Elemente sollten mit float:left/right im 960 Grid System sein.
Wie mache ich das am besten das der Hintergrund zu 100% richtig bei jedem zusehen ist sowie die obere Leiste. Der ganze Content soll dann mittig in einem 960 Grid System sein.
Danke sehr.
HTML Code:
CSS Code:
Homepage:
Multigame Top
ich will mit einem 960Grid System eine Homepage anfertigen. Das Konzept steht bereits und es ist auch schon als PSD vorhanden.
Im oberen Bereich bzw. ganz oben soll eine durchgehende Leiste sein mit 2 Elementen "Navigation und Userbereich/Loginbereich".
Die Leiste soll durchgehend sein auf jedem Bildschirm, die 2 Elemente sollten mit float:left/right im 960 Grid System sein.
Wie mache ich das am besten das der Hintergrund zu 100% richtig bei jedem zusehen ist sowie die obere Leiste. Der ganze Content soll dann mittig in einem 960 Grid System sein.
Danke sehr.
HTML Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> <!--Head Sektion------------------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multigame Top</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<!--BODY SEKTION------------------------------------->
<body>
<div id="headbar">
<nav>
<ul>
<a href="http://www.loohcurse.eu.ki/multigametop#">Home</a>
<a href="http://www.loohcurse.eu.ki/multigametop#">Games</a>
<a href="http://www.loohcurse.eu.ki/multigametop#"> News</a>
<a href="http://www.loohcurse.eu.ki/multigametop#"> FAQ</a>
<a href="http://www.loohcurse.eu.ki/multigametop#"> About</a>
</ul>
</nav>
<form id="headuser2" method="post">
<input name="userid" type="text" placeholder="Account" maxlength="10">
<input name="userpass" type="password" placeholder="Passwort" maxlength="10">
<input name="submit" type="submit" value="Anmelden">
<a href="#"><input name="button" style="color:#FFFFFF" type="button" value="Register"></a>
</form>
</div>
</body>CSS Code:
Code:
body {
background:url(layout/images/background.jpg) repeat;
width:100%;
padding:0px auto;
margin:0px auto;
text-align:center;
font-size:12px;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}
a {
text-decoration:none;
}
p {
color:#FFFFFF
}
/*Head*/
#headbar {
background:url(layout/images/headbar.png) repeat;
width:100%;
height:60px;
}
#headuser2 {
line-height:55px;
float:right;
}
/*Navi*/
nav {
float:left;
line-height:28px;
}
nav ul a {
color:#FFFFFF;
text-shadow: 0px 1px 2px #000;
font-size:14px;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 0.5s;
}
nav ul a:hover {
color:#5698cb;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 0.5s;
}
/*Input*/
input{
background:url(layout/images/input.png) no-repeat;
text-shadow: 1px 1px 3px #000,1px 1px 3px #000,1px 1px 3px #000;
border:none;
color:#FFFFFF;
opacity:0.7;
text-indent:35px;
width:154px;
height:34px;
}
input[name="userid"] {
background:url(layout/images/accinput.png) no-repeat;
text-shadow: 1px 1px 3px #000,1px 1px 3px #000,1px 1px 3px #000;
border:none;
color:#FFFFFF;
opacity:0.7;
width:154px;
height:34px;
}
input[name="userpass"] {
background:url(layout/images/pwinput.png) no-repeat;
text-shadow: 1px 1px 3px #000,1px 1px 3px #000,1px 1px 3px #000;
border:none;
color:#FFFFFF;
opacity:0.7;
width:154px;
height:34px;
}
input[type="submit"] {
background:url(layout/images/btnn.png) no-repeat;
width:78px;
height:34px;
text-indent:0px;
cursor:pointer;
color:#FFFFFF;
}
input[type="submit"]:hover {
background:url(layout/images/btnh.png) no-repeat;
width:78px;
height:34px;
cursor:pointer;
color:#FFFFFF;
}
input[type="submit"]:active {
background:url(layout/images/btna.png) no-repeat;
width:78px;
height:34px;
cursor:pointer;
color:#FFFFFF;
}
input[type="button"] {
background:url(layout/images/btnn.png) no-repeat;
width:78px;
height:34px;
text-indent:0px;
cursor:pointer;
color:#FFFFFF;
}
input[type="button"]:hover {
background:url(layout/images/btnh.png) no-repeat;
width:78px;
height:34px;
cursor:pointer;
color:#FFFFFF;
}
input[type="button"]:active {
background:url(layout/images/btna.png) no-repeat;
width:78px;
height:34px;
cursor:pointer;
color:#FFFFFF;
}Multigame Top
