How do i make a dynamic header resize itself?

Question

I want to make header that resizes itself based on the size of the users screen. So far i have an image on the left and a menu on the right. i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image.

Here is the HTML code:

    <body>

<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm"><div id="header_logo"></div></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
        </ul>
    </div>

Here is the CSS code:

#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;

}

#header {
float: left;
width: 100%;
height: 250px;
border: none;
}

#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}

.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}

.navbar li {
float: left;
list-style-type: none;
}

.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}

.navbar li a:hover{
color: #000000; 
background-color:#0040FF;
}

Thank you i would be grateful for any help.

Answer 1

Then I would suggest to either keep the horizontal things in percentage or use css media queries .

percentage example is here:

HTML:

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm" id="header_logo"><img src="images/logo.png" /></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </div>
</div>

CSS:

#wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#header {
    height: 250px;
}

#header_logo {
    float: left;
    width: 20%;
    margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}

.navbar {
    float: right;
    margin-top: 125px;
    margin-right: 5%;
    text-align:right;
    width: 60%;
}

.navbar li {
    display:inline-block;
    list-style-type: none;
}

.navbar li a {
    display:block;
    padding: 6px 20px;
    text-decoration: none;
    border-right: 1px solid #0040FF;
    color: #0040FF;
    font:bold 15px 'Open Sans', sans-serif;
}

.navbar li a:hover{
    color: #000; 
    background-color:#0040FF;
}

Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/

Good luck!

How do i make a dynamic header resize itself?

Question

1 answers

solution1
1 ACCPTED 2014-01-07 20:00:34

How do i make a dynamic header resize itself?

Question

1 answers

solution1 1 ACCPTED 2014-01-07 20:00:34

solution1
1 ACCPTED 2014-01-07 20:00:34