I'm currently having a problem with html and css(still learning both). I'm trying to make a standard layout with an image in a div fixed to top of page, under it a horizontal navigation bar, a footer, and a news module in between.
This is it how it looks like currently:
You can already see the problem(2 actually). I can't position the list over my navigation bar image, nor can I make the footer image as wide as the navigation image.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href = "/servis/Stilovi/standardstyle.css">
<title>Granulo - RE d.o.o</title>
</head>
<body>
<!-- Element koji cini header -->
<div id = "headers">
<img id="aparat_slika" src="/servis/Resursi/Slike/aparat_slika.png" alt="Slika nije ucitana">
<img id="logo_slika" src="/servis/Resursi/Slike/granulo_logo.png" alt="Slika nije ucitana">
<p id="naziv_firme">GRANULO - RE d.o.o</p>
<p id="djelatnost_firme" class="djelatnost">Promet, inženjering i servis protivpožarnih uređaja<br>Bojnička 47, Sarajevo</p>
</div>
<!-- Element koji cini vertikalni meni -->
<nav id = "navbar">
<ul id="lista_meni">
<li ><a class="djelatnost" href="#">Link 1</a></li>
<li ><a class="djelatnost" href="#">Link 2</a></li>
<li ><a class="djelatnost" href="#">Link 3</a></li>
<li ><a class="djelatnost" href="#">Link 4</a></li>
<li ><a class="djelatnost" href="#">Link 5</a></li>
</ul>
<img id="navbar_bg" src="/servis/Resursi/Slike/horizontal_stripe.png" alt="Slika nije ucitana">
</nav>
<!-- Element u kojem se nalaze novosti -->
<div id = "news"></div>
<!-- Element koji cini footer -->
<div id = "footers">
<img id="footer_image" src="/servis/Resursi/slike/horizontal_stripe.png" alt="Slika nije ucitana">
</div>
</body>
</html>
And my css:
@import url(http://ift.tt/1rYOraV);
body{
margin-left: 10%;
margin-right: 10%;
background-color: white;
}
ul{
list-style-type: none;
}
/* images */
#aparat_slika{
float:right;
}
#logo_slika{
float:left;
}
#navbar_bg{
width: 100%;
margin: 0;
padding: 0;
}
#footer_image{
width: 100%;
}
/* div style */
#headers{
background-color: #e6e1e1;
width: 100%;
float: right;
border: 1px solid black;
}
#naziv_firme{
font-family: 'Roboto', bold;
font-size: 30pt;
float: top;
margin-top: 10px;
}
#navbar{
width: 100%;
border: solid 1px black;
float: right;
padding: 0;
text-align: center;
}
#navbar ul{
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li{
margin: 0;
padding: 50px;
display: inline;
}
#navbar a:visited{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
#navbar ul a:active{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
#navbar ul a:hover{
margin: 0;
padding: .3em .4em .3em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #227755;
}
#footers{
position: fixed;
bottom: 0;
width: 100%;
border: solid 1px black;
}
#news{
border:solid 1px black;
}
/* Klasa za male natpise za firme */
.djelatnost{
font-family: 'Roboto', italic;
font-size: 10pt;
float:top;
margin-top: -40px;
color: black;
}
.linkSize{
height: 120px;
}
Aucun commentaire:
Enregistrer un commentaire