0

Only one of my links shows in my list for some reason? I can not figure it out. Is it off the page or something?

The list is on the left side of the page and is a ul with id="leftone".

Below is all of my coding, please help.

CSS:

html, body { height: 100%; }

* { height: 100%; }

body {
    position: relative;
    background: #fffffc;
    margin: auto auto;
    height: 100%;
}

#header {
    background: #e5e5e5;
    height: 35px;
    width: 100%;
    border-bottom: 1px #c9c9c9 solid;
}

#headerlinks {
    position: relative;
    display: inline;
    float: right;
    margin-right: 5%;
    bottom: 44px;
}

#headerlinks li {
    display: inline;
    padding-left: 25px;
}

#headerlinks li a {
    color: #777777;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}

#headerlinks li a:hover {
    color: #a3a3a3;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}


#headerlinks li a:active {
    color: #00B2EE;
    display: inline;
    font-size: 18px;
    font-family: sans-serif;
    text-decoration: none;
}


#logo {
    position: relative;
    color: black;
    margin-left: 5%;
    top: 5px;
}

.logoclass {
    color: #212121;
    display: inline;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks {
    width: 90%;
    margin-left: auto;
    margin-right: auto;;
    height: 25px;
    background: #e5e5e5;
    border-bottom: 1px #c9c9c9 solid;
    border-left: 1px #c9c9c9 solid;
    border-right: 1px #c9c9c9 solid;
    top: -66px;
    position: relative;
    clear: right;
}

#quicklinks li {
    position: relative;
    top: 2px;
    display: inline;
    padding-right: 20px;
}

#quicklinks li a {
    color: #777777;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks li a:hover {
    color: #a3a3a3;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#quicklinks li a:active {
    color: #00B2EE;
    display: inline;
    font-size: 13px;
    font-family: sans-serif;
    text-decoration: none;
}

#wrapper {
    position: relative;
    top: -40px;
    margin-right: 4%;
    margin-left: 4%;
    width: 92%;
    height: 100%;
    background: #fafafa;
    border-left: 1px #c9c9c9 solid;
    border-right: 1px #c9c9c9 solid;
    overflow: hidden;
}

.resources {
    font-family: sans-serif;
    font-size: 16px;
    position: relative;
    margin-left: 6px;
    top: 15px;
}

#leftone li {
    padding-bottom: 5px;
    position: relative;
}

HTML:

<div id="header">
    <div id="logo">
        <a class="logoclass" href="index.html">DesignAtEase.com</a>
    </div>
    <ul id="headerlinks">
        <li><a href="index.html">Home</a></li>
        <li><a href="coding.html">Coding</a></li>
        <li><a href="graphics.html">Graphics</a></li>
        <li><a href="database.html">Database</a></li>
        <li><a href="support.html">Support</a></li>
        <li><a href="more.html">More</a></li>
    </ul>
    <ul id="quicklinks">
        <li><a href="quickstart.html">Quick Start</a></li>
        <li><a href="tagsmain.html">Tag Helper</a></li>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="photoshop.html">Photoshop</a></li>
    </ul>
</div>
<div id="wrapper">
    <a class="Resources">Resources</a>
    <ul id="leftone">
        <li><a href="quickstart.html">Quick Start</a></li>
        <li><a href="tagsmain.html">Tag Helper</a></li>
        <li><a href="usefulsites.html">Useful Sites</a></li>
    </ul>
</div>
4

4 回答 4

2

Remove * { height: 100%; } and position: absolute from #leftone li

See http://jsfiddle.net/c6Fdk/1/

于 2013-07-01T02:18:45.817 回答
2

I have set a height for the li, and it displayed correctly.

#leftone li{
padding-bottom:5px;
position:relative;
height:15px;
}
于 2013-07-01T02:22:50.583 回答
1

It's because you have * { height: 100% }

This makes all elements 100% height, including your li's that contain the links

于 2013-07-01T02:19:42.117 回答
1

Remove your * { height: 100%; } line on your css file.

于 2013-07-01T02:20:45.313 回答