Positioning an Unordered List horizontally

html layout css html-lists

12,819

Reset the padding of the ul tag. Put this in the beginning of your css: ul { padding:0; }

If you want to completely reset your css go to: Reset CSS

12,819

Author by

Delta_Cmdr

Updated on June 04, 2022

Comments

Delta_Cmdr almost 2 years

I have an Unordered List which functions as a basic navigation bar.

My goal is to display it in line at a width of 60% of the screen and to be centred. The issue I am having is that it displays a little off centre and the size also varies. I use an external style sheet. Any help will be much appreciated.

Here is the page:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Help</title>
        <link rel="stylesheet" type="text/css" href="Styles/mainStyle.css"/>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2>Home</h2>
        <ul>
            <li><a href="link.htm">Home</a></li>
            <li><a href="link2.htm">Link2</a></li>
            <li><a href="link3.htm">Link3</a></li>
        </ul>
        <div id="container">
            <p>
                Some Text. Some Text. Some Text. Some Text. Some Text.
            </p>
            <p>
                More Text. More Text. More Text. More Text. More Text.
            </p>
        </div><!-- End of container -->
    </body>
</html>

Here is the external style sheet:

h2
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* Colours */
    background-color: #99CCCC;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
ul
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
li
{
    /* Positioning */
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    vertical-align: top;
    /* Colours */
    background-color: #99DDBB;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
a
{
    /* Colours */
    color: #000000;
}
a:hover
{
    font-style: italic;
}
#container
{
    /* Positioning */
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
p
{
    /* Positioning */
    padding: 10px;
    text-align: left;
    /* Colours */
    background-color: #99CCCC;
    /* Border */
    border: 1px solid #000000;
    border-radius: 25px;
}
img
{
    /* Positioning */
    width: 50%;
    border: 1px solid #000000;
    border-radius: 25px;
}

bigblind over 12 years

if you're going to reset, it's best to use one of the reset.css sheets already out there, they have been tested, so that they eliminate all the default styling.
Delta_Cmdr over 12 years

Thank you so much I had no idea that a reset.css even existed.