 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
RyanZ17
Joined: 09 Nov 2008
Posts: 5
|
 Posted: Fri Nov 14, 2008 9:38 pm Creating a Side Bar with List [UL & LI] |
 |
|
|
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: 1417
Location: Biloxi, MS
|
| Posted: Fri Nov 14, 2008 10:17 pm |
|
|
|
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".
Last edited by PayneLess Designs on Sat Nov 15, 2008 12:55 pm; edited 1 time in total |
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
|
jack456
Joined: 13 Oct 2008
Posts: 5
|
| Posted: Sat Nov 15, 2008 2:48 am |
|
|
|
thanks for the sharing this tut.
i think he find his answers from you. |
|
RyanZ17
Joined: 09 Nov 2008
Posts: 5
|
| Posted: Sat Nov 15, 2008 7:25 am |
|
|
|
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: 1284
|
|
RyanZ17
Joined: 09 Nov 2008
Posts: 5
|
| Posted: Sat Nov 15, 2008 9:20 pm |
|
|
|
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: 1284
|
| Posted: Sat Nov 15, 2008 10:01 pm |
|
|
|
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">
<!-- header content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<!-- optional horizontal menu goes here -->
<div id="menu"><h3>Optional content</h3></div><!-- this line may be deleted -->
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<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">
<!--sidebar content -->
<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><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html> |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
