CODEWITHSUNDEEP
htmlcss
Nafiul Islam
Nafiul Islam

Reputation: 82530

Why is my <ul> not centered or floating to the left?

Why is my list not floating to the left, and why is it showing extra white space to the RHS?

This is my HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Someone</title>
    <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="homeStyle.css" media="all">
</head>
<body>
    <ul class="homeButtons">
        <li><a href="http://www.google.com">Me</a></li>
        <li>My Work</li>
        <li>My hobbies</li>
        <li>Contact Me</li>
        <li>Blog</li>
    </ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="homeScript.js"></script>
</body>
</html>

This is the corresponding CSS:

body {
   /*background-image: url("http://good-wallpapers.com/pictures/1737/ubuntu_prettified_background.png");*/
    /*position: fixed;*/
    height: 9em;
    width: 16em;
    position: fixed;
    margin: 0;
    padding: 0;
}

ul.homeButtons {
    position: relative;
    margin: 0 auto;
    width: 16em;

}

ul.homeButtons li {
    position: relative;
    font-family: 'La Belle Aurore', cursive;
    font-size: 2.5em;
    font-weight: inherit;

    list-style: none;
    width: 200px;
    height: 100px;
    margin: 1px;


    float: left;
    clear: none;
    color: white;
    background: #1e90ff;
    text-align: center;
    line-height: 100px;
    /*border-radius: 2px;*/
    opacity: 0.5;

    -webkit-transition: all .4s;
}

ul.homeButtons li:hover {
    font-size: 2.7em;

    box-shadow:
        0 0 0 20px #1e90ff,
        0 0 20px 24px #d3d3d3;
    opacity: 1;
    cursor: pointer;
}

ul.homeButtons li a {
    color: inherit;
    text-decoration: none;
}

Upvotes: 0

Views: 378

Answers (1)

KatieK
KatieK

Reputation: 13853

The extra white space to the right of your ul is coming from the default padding that most browsers put on lists. You can do set ul { padding: 0; } to get rid of it.

Consider removing all of the position: relative; and width specifications - they don't seem necessary in this example

FYI, there are many reset stylesheets out there which do a good job of removing the browser's default styling.

Upvotes: 1

Related Questions