My links won't work

HTML & CSS
1

Hello everyone. Here is my problem :
The links on the left side of the page don’t link anywhere, even when I use <a href =“value”></a>. I am sure there is some simple problem, but I can’t figure it out. Also, before the links worked fine, but they were under <ul>, and once I removed that, they no longer work.

Any suggestions?

Sorry, the site is truecardio.com

I actually fixed the issue, since I forgot it had a z-index of -1. But, I have another issue. How can I set it so when you shrink down the page, the left nav goes underneath the written content? Thank you. I tried using z-index, but that didn’t seem to work.

2

Either removing float: left from #leftnav


#leftnav {
float: left;
padding-top: 20px;
width: 70px;
height: 200px;
[COLOR="#FF0000"]position: relative;[/COLOR]
z-index: -1;
margin-left: 0;
}

or overflow: hidden from #maincontent


#maincontent {
margin: 0 auto 0 auto;
width: 100%;
height: 100%;
padding-top: 10px;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}

will fix it. I’d do the first option.

3

Would this allow for the content to overlap? Or would this fix the link error?
And thank you.

4

I tried both changes, and they didn’t seem to affect the page adversely while making the links work. However, overflow:hidden is handy for other reasons, so I’d go with removing position:relative on the nav. If consequences flow from that, they can be dealt with separately. :slight_smile:

5

Thanks!

6

It’s better to make a new post than to edit an old one, as people may not see the update. :slight_smile:

The layout method here is not ideal.

It’s better to have a wrapper for all the content, and center that, then wrap columns within that and float them. Using positioning on the page leads to problems, as you see.

7
Off Topic:

I think your markup is over-complicated and hence your issues. It also outputs 10 errors on the w3c validator.

I would markup your page starting with something like this. It’s much simpler html and css, is less code and passes the w3c html validator.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            body {
                background-color: rgb(0,0,0);
                color: white;
                font-size: 1em;
            }
            #wrapper {
                width: 900px;
                margin: 20px auto 20px auto;
                border: 1px solid red;
            }
            #sidebarLeft {
                width: 20%;
                float: left;
            }
            #sidebarLeft a {
                display: block;
            }
            #sidebarRight {
                width: 20%;
                float: right;
            }
            #centerColumn {
                overflow: hidden;
                padding: 10px 10px 10px 10px;
                border: 1px solid blue;
            }
            #pageTitle {
                font-size: 1.8em;
                color: aqua;
            }
            #dlHome dt {
                font-size: 1.5em;
                color: aqua;
                margin: 0px 0px 10px 0px
            }
            #dlHome dd {
                margin: 0px 0px 20px 0px
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div>Header stuff</div>
            <div id="sidebarLeft">
                <a href="#">menu item 1</a>
                <a href="#">menu item 2</a>
                <a href="#">menu item 3</a>
                <a href="#">menu item 4</a>
            </div>
            <div id="sidebarRight">
                <h1>This is the right sidebar</h1>
            </div>
            <div id="centerColumn">
                <h2 id="pageTitle">Welcome to True Cardio</h2>
                <p>
                    True cardio is a website dedicated to helping you find a type of cardio exercise that suites 
                    your life, suites your fitness goals, and is enjoyable. Cardio exercise is one of the most 
                    beneficial activities that you could possibly do to your body : it lowers blood pressure,
                    heart rate, fat, and depression levels, and it increases muscular endurance, possible size, 
                    courage, and well-being. However, cardio isn't for everyone, which is why this site exists! 
                    There are several ways to incorporate cardio in your life, and this website is sure to find 
                    it for you!
                </p>
                <dl id="dlHome">
                    <dt>Workout Routines</dt>
                    <dd>
                        The "Workout Routines" section currently has "At Home Abdominals", which is a workout 
                        routine you can do at home, that includes descriptions of the workout and images to 
                        follow along.
                    </dd>
                    <dt>Cardio</dt>
                    <dd>
                        The "Cardio" tab at the top part of the page leads you to a list of different types of 
                        cardio exercises. These cardio workouts have descriptions of how they will help your 
                        overall fitness, descriptions of how that certain type of cardio exercise will lead you 
                        wanting more, and how you can incorporate it into your life. The descriptions of each 
                        cardio workout and exercise varies, but it will definitely help you finding one you enjoy.
                    </dd>
                </dl>
            </div>
            <div id="footer">Footer stuff</div>
        </div>
    </body>
</html>