CODEWITHSUNDEEP
htmlcssweb
EldarGranulo
EldarGranulo

Reputation: 1615

Make element position fixed while width = 100% stays valid

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:

http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg

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://fonts.googleapis.com/css?family=Roboto:700);
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;
}

Upvotes: 0

Views: 76

Answers (1)

Chun
Chun

Reputation: 2270

First I'd recommend wrap your code inside inside of a wrapper instead of giving margin to your actual body, something like this

<div class="container">
    <div id = "headers">...</div>
    <nav id = "navbar">...</div>
    <div id = "news">...</div>
    <div id = "footers">...</div>
</div>

CSS

body{
    background-color: white;
}
.container{
    width:1000px;
    margin: 0 auto;
}

2nd your footer is position:fixed; so it won't obey any container width, in this case it won't obey for the margin-right:10%; of the body, you can fix it with a little trick like this:

#footers {
    position: fixed;
    bottom: 0;
    left: 50%; /* tells your footer to be horizontally centered */
    margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
    width: 1000px;
    border: solid 1px black;
}

and at last to make your navbar/links be over the header image add a position: absolute; to the class .navbar

Here's an online example. I did not include it with your links over the header image as you said, but position: absolute; is the way to do it, you just need to play around with it.
To solve the problem of the .navbar going off the container because of this new position:absolute; wrap .navbar inside of a new div or even better wrap all the content that belongs to your header on a new div class and add to this new class the tag position: relative;

Upvotes: 2

Related Questions