HTML Help

RyanZ17 · Joined: 09 Nov 2008 Posts: 5

Now that I've solved my header footer problem, I have a sidebar issue.

My sidebar is for navigation, it's placed where it needs to be however I'm having difficulty getting the image I've created to show up as the bullet next to the list items. For a second I had it, made an adjustment and lost it. I can't seem to get it back. :?

Here's the code that's relevant to the list in my style.css file:

Code: /* Side Menu Effects */
ul {
list-style-type: none;
padding-left: 5px;
margin-left: 5px;
text-indent: 17px;
}

li { background: url('style/images/bullet.gif') no-repeat left center; }

Here's the section of the HTML that the sidebar is for:

Code: <table border="1" cellspacing="0" width="20%" align="left">
<tr>
<td>
<center>Martial Arts</center>
<ul>
<li>MA Home</li>
<li>Philosophy</li>
<li>Patterns</li>
<li>Tribute</li>
<li>Dan Ranks</li>
<br />
</ul>
<center>My Games</center>
<ul>
<li>Games Home</li>
<li>Call of Duty: WAW</li>
<li>Call of Duty 4</li>
<li>Rainbow Six Vegas 2</li>
<li>Rainbow Six Vegas</li>
<li>Ghost Recon: AW2</li>
<li>Ghost Recon: AW</li>
<li>Ghost Recon: IT</li>
<li>Ghost Recon</li></td>
</ul>
</tr>
</table>

Am I not assigning the stylesheet correctly to the table? I can message the live link if needed.

Thanks,
Ryan

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1409 Location: Biloxi, MS

Live link would be better as you are using relative path for your image and I can't test it that way without subbing my own image.

I would recommend dumping the table tags. They are not really for page layouts. CSS is and should be used along with div tags.

Why Tables Are Stupid

Try adding the padding-left to the "li".

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here's a good example of what you are trying to do
http://www.pmob.co.uk/temp/list7.htm

jack456 · Joined: 13 Oct 2008 Posts: 5

thanks for the sharing this tut.
i think he find his answers from you.

RyanZ17 · Joined: 09 Nov 2008 Posts: 5

Thanks for opening me up to div tags, I never really took a good look at them.

Unfortunately I'll be redesigning my entire stylesheet, which although isn't a lot line wise I have to readjust to a new style of things. Just for kicks though the main page of the website is here, this is what I would like to achieve just now using the div tags you pointed out to me. :)

http://www.theclancyaddict.net

The top navbar is using an image I saw coded similar to phpBB2, is there an easier way to do that with div tags? It's being placed in the background of the table and repeating to create a smooth image.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Lots of menu and layout examples:
http://www.cssplay.co.uk/menu/
http://www.pmob.co.uk/

RyanZ17 · Joined: 09 Nov 2008 Posts: 5

I think there's only one more thing that needs doing, I need to get my content next to my navbar. :?

Here's my index page, I'm not sure how to get them next to each other. The files included are an: index.htm, index.php, page_header.htm, page_footer.htm, sidebar.htm, and style.css. I'll try to work through it but if anybody has a a clue before I do I'd be willing to take it. :)

http://www.theclancyaddict.net/index.php

sticks464 · Joined: 31 Dec 2006 Posts: 1283

By making a few adjustments this layout will work for you
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 Col Layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
background: #000;
color:#fff
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
}
#header {
width: 100%;
height: 160px;
}
#menu {/* optional content */
height:26px;
}
#content {/* use for left sidebar, menu etc. */
float: right;
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}

/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#footer {
clear: both;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">

<div id="header">
<h1>Header Goes Here</h1>
</div>

<div id="menu"><h3>Optional content</h3></div>
<div id="content">
<div class="wrapper">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</div>
<div id="sidebar">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div>

<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>