CODEWITHSUNDEEP
htmlcss
Leonard Labita
Leonard Labita

Reputation: 11

Creating a responsive website header?

I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.

Here is the code I'm working with:

HTML:

</head>
    <body>
    <div id ="header">    

        <div id="nav">
            <ul>

                <li><a href="#">About</a></li>
                <li><a href="#">Philanthropy</a></li>
                <li><a href="index.html"><img src="http://i.imgur.com/cosDXx1.png"/></a></li>
                <li><a href="#">Why Join?</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

    </div>
</body

>

CSS:

body {
    margin:0px;
    padding:0px;
}

#header{
    width:100%;
    height:110px;
    background-color:black;
}

#nav ul{
    list-style-type:none;
    font-family:"Slabo 13px",serif;
    float:center;
}

#nav ul li{
    padding:10px;
    display:inline;
    margin-left:60px;
    margin-bottom:20px;
}

#nav ul li a{
    text-decoration:none;
    color:#006600;

}

#nav ul li a:hover{
    color:#CC0000;
}

JSfiddle link:

http://jsfiddle.net/5g6sm01q/

On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.

Upvotes: 0

Views: 803

Answers (1)

Lal
Lal

Reputation: 14810

Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..

see this http://jsfiddle.net/5g6sm01q/2/

Chnge the css like this

body {
    margin:0px;
    padding:0px;
}

#header{
    width:100%;
    height:110px;
    background-color:black;
}

#nav ul{
    list-style-type:none;
    font-family:"Slabo 13px",serif;
    float:center;
}

#nav ul li{
    padding:0.5%;
    display:inline;
    margin-left:2%;
    margin-bottom:20px;
}

#nav ul li a{
    text-decoration:none;
    color:#006600;

}

#nav ul li a:hover{
    color:#CC0000;
}

UPDATE

As @Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection

Upvotes: 1

Related Questions