At the moment i am trying to mimic this website to get some practice in Link
However i am having major problems with the layout of the site. It seems that i am using the position: relative; a lot which is causing my website to screw up with the navigation bar etc. I am not sure if there is a easier way to do is? As you can tell by the website. There logo and nav bar have been floated to the right and left , however its in the middle of the screen. This is anther problem which i can't fix. When i floated mine to the right and left it went all the way to the border. This is why i used the position attribute to put it in the middle.
Anther big problem is that the site should have no scrolling to the right but u can go to the right and go down on mine. The front page should all be on the screen with no scrolling. Again i believe this is down to the Div structure
At the moment i have set up the background image. The two nav bars. The one at the top and the one at the bottom. I have put in the two logs, and put the navigation bar in. However as mentioned above got problems with the divs.
HTML:
<body>
<div class="container"></div>
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/Member/">member</a></li>
</ul>
<div class="container1">
<p>a</p>
<div class="botLay">
</div>
</div>
<div class="logo">
<img src="Image/Logo.png">
</div>
<div class="logo1">
<img src="Image/Logo.png">
</div>
</body>
The Nav div being the top black bar. The container 1 being the bottom bar. The logo 1 and 2 being the two logos.
CSS:
html {
background: url(../Image/BackgroundImage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html, body {
height: 100%;
}
.logo{
position: relative;
top: -157px;
left: 450px;
width: 100px;
}
.logo1{
position: relative;
top: 521px;
left: 450px;
}
.container1{
position: relative;
top: 446px;
right: 40px;
background-color: rgba(0, 0, 0, 0.65);
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
width: 2000px;
padding:15px;
}
.nav{
position: relative;
top: 36px;
right: 40px;
background-color: rgba(0, 0, 0, 0.65);
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
list-style:none;
text-align:center;
width: 2000px;
}
.nav li {
display: inline-block;
position: relative;
left: 280px;
}
.nav li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
padding-left: 8px;
height: 28px;
}
.nav a{
display:inline-block;
padding:35px;
text-decoration: none;
color: white;
font: normal normal normal 12px/1.3em 'Open Sans',sans-serif;
text-transform: uppercase;
}
ul a:hover {
color: #ffcb80;
}
Any help on fixing this code and advice would be greatly apprenticed.
Aucun commentaire:
Enregistrer un commentaire