CODEWITHSUNDEEP
htmlcss
user1249051
user1249051

Reputation: 3

HTML and Styles alignment issues

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?

Upvotes: 0

Views: 82

Answers (4)

J. Bruni
J. Bruni

Reputation: 20492

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;
}

Upvotes: 0

Jack
Jack

Reputation: 1472

It completely depends on what result you want to achieve 

h1
{
 margin:0;
}
#header ul
{
 margin:0;
 padding:0;
 list-style:none;
}
#header ul li
{
 float:left;
}

this jsfiddle output is according to what you have put in your question : http://jsfiddle.net/8fjZA/1/

so what is the issue?

this jsfiddle output is according to my answer though it is not clear what exactly you want :

http://jsfiddle.net/8fjZA/2/

EDIT

Your header width need to be more than right now...You are not showing the complete code so taking assumptions please reduce your margin padding between li and you are done....

you are using image as a header background which have width of 921px and if you increasing your menu, you have to increase this image as well

Upvotes: 1

Sunil Kumar B M
Sunil Kumar B M

Reputation: 2795

You have more than one option here

  1. remove the height attribute in css
  2. use overflow-y: auto which will render a scrollbar if your content goes out of the specified boundary
  3. Increase the height attribute to accommodate all your contents

This is the answer according to what I understood of your question

By the way I'm not sure if your facing a problem with your navigation bar. A screen shot would be helpful

Upvotes: 0

sanjeev.praja
sanjeev.praja

Reputation: 58

problem you are having is you fixed the height of header and div header has overflow attribute hidden. means everything that is out of header will be hidden.

there may be different solution best is keep the height of header auto, don't keep the height in header would make it auto. or. if you like to just make it visible by retaining the height of header then add attribute "overflow: visible;" to the header

Upvotes: 0

Related Questions