Home/ Questions/Q 9186613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:34:19+00:00

This is my header: <head> <link href=/css/header.css rel=stylesheet type=text/css> </head> <body> <div id=background><img src=/multi/background.jpg

  • 0

This is my header:

<head>
<link href="/css/header.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""></div>

<div id="content">

<div align="center" class="headtable">
    <table width="980" border="0" height="40">
        <tr>
            <td width="503" rowspan="2" height="35" align="left" valign="middle"><a href="/index.php"><img src="/multi/header.png" width="344" height="32" hspace="0" border="0"/></a></td>

            <td width="424" align="right" valign="top">
                <a href="/index.php" class="headlink">Italiano</a>  
                <span class="headlink">|</span>   
                <a href="/ger/index.php" class="headlink">Deutsch</a>  
                <span class="headlink">|</span>   
                <a href="/fra/index.php" class="headlink">Français</a>  
                <span class="headlink">|</span>   
                <a href="/index.php" class="headlink">Home</a>
                <span class="headlink">|</span>   
                <a href="#" onClick="window.print();" class="headlink">Stampa Pagina</a>
      </tr>
    </table>
</div>

<div class="buttontable">
<table width="1080" border="0" cellpadding="0" align="center">
    <tr>
        <td height="20" align="center"> 

        <a class="button" href="/o.php">o</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/a.php">a</a>
        <a class="button" href="/s.php">s</a>
        <a class="button" href="/st.php">st</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/t.php">t</a>
        <a class="button" href="/c.php">c</a>
       </td>
    </tr>
</table>
</div>
</div>
</body>

And the css file:

/* pushes the page to the full capacity of the viewing area */
html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
/* prepares the background image to full capacity of the viewing area */
#background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/* places the content ontop of the background image */
#content {
    position:relative; z-index:1;
}

/* not apply if IE6 or lower */
* html {
  background-color: #6f6;
}
* body {
    height:100%;
    margin:0;
    padding:0;
}
* #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
* #content {
    position:relative; z-index:1;
}
/* END not apply if IE6 or lower */

.headtable {
    background-color:#02346F;
}

.headlink {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#d8dfea;
}

.buttontable {
    background-color:#F00;
}

a.button {
    display:inline-block;
    color:#FFF;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}a.button:hover {
    background-color:#F00;
    color:#02346F;
    padding:2px 16px;
    font-size:18px;
    font-weight:bolder;
}

a.buttonselect {
    background-color:#ffffff;
    display:inline-block;
    color:#02346F;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}

Now when the window size is narrower than the page (header.php) the table is getting of the background (I don’t know if you understand what I mean, but I’m unable to explain that…)

The first solution I got was to set the body width size in the CSS to e.g. 1000px, but then I got all the page alligned left.

How can I solve this problem? The problem is not coming from the background image, cause I tested all also without the bg…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A few constructive remarks on your code if I may.

    • You should not use tables for your layout. Try to use the semantic correct html tags. Your navagation is a list of links, so it should be a <ul>
    • Try to keep your content and your styling separate. This way it is much easier to keep your code up to date. Also you could give your site a completly different look by just loading a different stylesheet. And it makes it much easier to change things, cause you always know where to look for them.

    Because just giving comments would be to easy, I’ll give you an example of what your HTML would look like if I had to write it:

    <body>

  <div id="wrapper">

    <div id="header">

       <a id="logo" href="/index.php" alt="company logo"><img src="/multi/header.png"/></a>

       <ul id="main-nav">
           <li><a href="/index.php">Italiano</a></li>    
           <li><a href="/ger/index.php" class="headlink">Deutsch</a></li>  
           ...    
       </ul>

       <div class="clear"></div>

    </div>
  </div>
  ...

    For comparison, here is your code in a fiddle: http://jsfiddle.net/ERghQ/
    And here is my code in a fiddle: http://jsfiddle.net/JChZT/

    Note that I also added some quick css to mimic the styles you had in your example. Notice that the issue with the width is resolved now, because I work with floats and divs, in stead of tables and fixed widths. Play with the size of the window and you will notice the content will adapt.

    Once again, I do not mean to break your work down, I just try to help and show you how things are done nowadays. It might take some getting used to in the beginning, but you will see the advantages soon enough. Let me know if my code needs any more explaining. Hope I helped pointing you in the right direction!

    edit:
    the empty div with the .clear class is used to solve what is known as the clearfix problem. Most browsers will not give your header any height, and thus make it invisible, because all the direct children are floating. (remove it in the fiddle and you will see what I mean.) There are many ways to solve this, as you will find out if you google clearfix. The method I used is probably not the best, cause it requires you to add an empty div in your content just for layout, which is against my own claim that you should always keep content and styling separate, but it is the quick and easy way. I would suggest you do some googling for a proper .clearfix class and apply that class to your header (and any other container that requires clearing).

    • 0