Question

I am very new to HTML and styling and I am facing a problem fitting contents in a given space.

Here is what the template provides:

    <div id="header">
        <h1>Webquest</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
            <li><a href="#">Task</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Evaluation</a></li>
            <li><a href="#">Conclusion</a></li>
            <li><a href="#">Credits</a></li>
        </ul>
    </div>

Styling:

#header
{
background-image:url(header.png);
background-repeat:no-repeat;
width:921px;
height:72px;
}

In the space the webpage is only displaying Webquest, Home, Introduction, Task, Process, and Resources.

All the remaining elements(Evaluation, Conclusion and Credits) are not displayed in the space.

What should I do to correct this?

Answer 1

The template being used has a fixed width menu with a background image holding space for 5 menu items, but you want a menu with 8 items.

What can you do:

1. Use another template.
2. Have a shorter menu. Remove 3 of the 8 items, so you have 5 items, which fits the template layout without any changes.
3. Decrease the width of each menu item. This may not look so good.
4. Increase the width of the menu (and optionally of the whole theme).

For both options 3 and 4, you will need to create a new background image for the menu (substitute the header.png file of the #header background-image).

To decrease the width of each menu item, change the width of its li elements in styles.css:

#header ul li , #header ul li a, #header ul li a:visited{
    display:block;
    float:left;
    margin: 0px;
    text-align:center;
    line-height:72px;
    width:133px;   /* CHANGE THE WIDTH HERE TO A SMALLER VALUE */
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
}

To increase the width of the whole menu, increase the width of the #header element:

#header
{
background-image:url(header.png);
background-repeat:no-repeat;
width:921px;    /* CHANGE THE WIDTH HERE TO A BIGGER VALUE */
height:72px;
}