Forums > Content + Navi

Forums > Resource Center > Webmasters' Corner

wintermelody

Oct 6 2009, 11:07 PM

Hello! I'm having problems fixing the content + navi area of my site. I tried fixing the picture on the content to be in its original position but it's not working. I also would like to have the design positioned on the left.

HTML;

CODE

<html>
<head>
<title>The Kiwis Reign Here.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body

<table width=890 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <tr>
        <td>
            <img src="images/index_01.png" width=290 height=303 alt=""></td>
        <td rowspan=2>
            <img src="images/index_02.png" width=143 height=434 alt=""></td>
        <td rowspan=2>
            <img src="images/index_03.png" width=143 height=434 alt=""></td>
        <td rowspan=2>
            <img src="images/index_04.png" width=143 height=434 alt=""></td>
        <td rowspan=2>
            <img src="images/index_05.png" width=143 height=434 alt=""></td>
        <td rowspan=3>
            <img src="images/index_06.png" width=28 height=600 alt=""></td>
        <td>
            <img src="images/spacer.gif" width=1 height=303 alt=""></td>
    </tr>
    <tr>
        <td rowspan=2>
            <img src="images/index_07.png" width=290 height=297 alt=""></td>
        <td>
            <img src="images/spacer.gif" width=1 height=131 alt=""></td>
    </tr>
    <tr>
        <td COLSPAN=4>
            <img src="images/index_08.png" width=572 height=166 alt=""></td>
        <td>
            <img src="images/spacer.gif" width=1 height=166 alt=""></td>
    </tr>
</table>


<div id="navigation">

<a href="http://www.freewebs.com/keyclubsl/">Main</a><br>
<a href="aboutkc.htm">About</a> <br>
<a href="board.htm">The Board</a> <br>
<a href="events.htm">Events</a> <br>
<a href="motm.htm">MOTM</a> <br>
<a href="http://picasaweb.google.com/SLKeyClubPhotos">Photo Gallery</a> <br>
<a href="hours.htm">Hours</a> <br>
<a href="newsletters.htm">Newsletters</a> <br>
<a href="cheers.htm">D2 Cheers</a> <br>
<a href="others.htm">Others</a>
</div>

<div id="content">
lkjasdfljksdflkjsadfjkasdfljk
</div>

</body>
</html>

CSS;

CODE

body {
margin: 0 auto;
padding: 0px;
background-color: #000;
font-family: Arial;
font-size: 12px;
}

#container {
width: 704px;
margin: 0 auto;
background-image: url('images/index_08.png');
background-repeat: repeat-y;
}

#navigation {
width: 280px;
padding: 0 auto;
text-align: right;
font-family: Georgia;
float: left;

}

#chat {
width: 190px;
margin: -15px 0px 0px -60px;
padding: 0px;
float: center;
text-align: center;
background-image: url('images/index_08.png');
}

#content {
width: 572px;
margin: 0 auto;
padding: 7px;
float: center;
background-image: url('images/index_08.png');
background-repeat: repeat-y;
}

I also want to add a chatterbox box underneath the navi. please help! thank you very much :D

fixtatik

Oct 7 2009, 02:54 PM

You just have some floating issues. There's no CSS value "center" for the float property. You can use left, right, inherit, or none.

wintermelody

Oct 8 2009, 01:14 AM

really? is it that simple? what about the overall design? what do i code to make it always be on the left, no matter the resolution?

fixtatik

Oct 8 2009, 01:53 AM

Should be as easy for that, too. Take out "margin:0 auto;" from #container { }

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.