CODEWITHSUNDEEP
htmlcss
user3693564
user3693564

Reputation: 29

Make Header fit Width of Screen

Right now, my header looks good on the screen, but it scrolls over like the header is too wide, if that makes sense? I have my width set to 100%, so is there something I'm missing? This is the code. HTML:

<div id="header">
<center>
<table border="0" width="950px">
    <tbody>
    <tr>
    <td>
        <div class="mainRunner"><img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px" /> <img class="mainheader" height="150" src="http://i.imgur.com/sdqMfWT.png" width="500" /></div>
        </td>
        <td>
        <div class="contactinfo"><img class="phone" height="40" src="http://i.imgur.com/5Wew8PC.png" width="250" /> <a href="mailto:[email protected]"><img class="email" height="30" src="http://i.imgur.com/bXs6aht.png" width="200" /> </a></div></div>
        </td>
    </tr>
</tbody>
</table>

And here is the CSS:

#header {
width: 100%;
margin-left: auto;
height: 172px;
margin-right: auto;
margin-top: -10px;
background-color: #ffffff;}

.mainheader
{
border: 0px;
position: relative;
z-index: 2;
top: -185px;
left: 265px;
}
.phone
{ 
position: relative;
top: -85px;
left: -2230px}
.email
{ 
position: relative;
top: -75px;
left: -2195px}

The website is http://kerryaltmantest.info

Thank you!

Upvotes: 0

Views: 3583

Answers (2)

Raja
Raja

Reputation: 118

use background color image as background-image for table with repeat instead of img and also set the table width to 100%.

table
{
 background-image: url("http://i.imgur.com/1laWPRb.png");
 background-repeat: repeat;
 width:100%;
}

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

You have a div as;

<div class="mainRunner">
    <img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px">
    <img class="mainheader" height="150" src="http://i.imgur.com/sdqMfWT.png" width="500">
</div>

It's width is 3000px because of the first image's width width="3000px. Try to fix it. The first image is:

<img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px">

Check width="3000px" in this image.

Upvotes: 1

Related Questions