...

View Full Version : List/Div issues



Rehnberg
07-02-2011, 10:55 PM
I'm working on a website for my dad (first web design client and all that mess...) and I'm having trouble getting a list to appear as I want it to. It appears in the "more-links" div, but gets shifted a good 30px to the right, instead of being contained inside the div (and the divs around it).

The HTML 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>Dr. Beth's Gluten-Free</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<!--Banner goes here-->
<!--Start navbar-->
<div class="navbar">
<ul id="nav">
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-tips"><a href="#">Tips of the Day</a></li>
<li id="nav-living"><a href="#">Gluten-free Living</a></li>
<li id="nav-foods"><a href="#">Gluten-free Foods</a>
<li id="nav-recipes"><a href="#">Gluten-free Recies</a></li>
<li id="nav-regional"><a href="#">Regional Suggestions</a></li>
<li id="nav-videos"><a href="#">Videos</a></li>
<li id="nav-resources"><a href="#">Other Resources</a></li>
</li></ul>
</div>
<!--End navbar-->
<!--Main content area-->
<div class="homecontent">
<div class="main-sidebar"> <!--Start main-sidebar-->
<span class="pullquote"> <!--Start pullquote-->
Did you know that noodles are gluten-free? Try some today!<br>
<span class="subpullquote">
More tips <a href="#">here</a>
</span><br>
<img src="images/Facebook_button.jpg" class="fb-button">
<img src="images/twitter_button.jpg" class="twitter-button">
</span> <!--/pullquote-->
<div id="more-links">
<ul id="side">
<li id="side-need"><a href="#">Do you need to live gluten-free?</a></li>
<li id="side-benefits"><a href="#">Benefits of going gluten-free</a></li>
<li id="side-something"><a href="#">Something else could go here</a></li>
</ul>
</div><!--End of more-links-->
<br style="clear:both" />
</div> <!--End of main-sidebar-->
<div class="homecontent-right"> <!--Text area and Beth's biography-->
<p>This site will help you on your journey to live a gluten-free lifetsyle as quickly and completely as you would like. </p>
<p>We will help you focus on what you can eat with tips on how to prepare and enjoy yourself.</p>
<p> This sort of thing continues on and continues on blah blah blah </p>
<p>Naturally, I won't be writing this copy (or at least, I hope not). That seems like Beth's job. Oh, speaking of Beth, there's going to be a biography of her in this main content area. It'll be below all of this text, and line up against the bar over there on the left. Oh wait, that bar doesn't exist yet. Let me go make it...</p>
<p>Damn, now that bar exists, but isn't working properly... I get to work on that for awhile now. Woopie!!!I also just generally need more text to make sure that everything is wrapping correctly. This should be good enough, methinks.</p>
</div>
<br style="clear:both" />
</div>
<!--End Main content area-->
<br style="clear:both" />
</div> <!--End container-->
</body>
</html>



And the CSS:


@charset "UTF-8";
/* CSS Document */

body {
background-color:#808259;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
list-style-type:none;
list-style:none;
}

p {
margin:0px;
text-indent:20px;
line-height:20px;
}

.container {
background-color:#b2b580;
width:950px;
height:auto;
margin-left:auto;
margin-right:auto;
float:none;
}

/*Use this class if using a rounded top with images
.roundtop {
background:url(images/ContainerCorner_TopRight.jpg) no repeat top right
}
*/

.navbar {
background:inherit;
width:200px;
height:auto;
padding-left:2px;
padding-top:5px;
}

#nav {
margin:0;
padding:0;
background:#808259;
float:left;
width:200px;
border:1px solid #42432d;
border-width:1px 0;
border-right:1px;
border-left:1px;
border-bottom:none;
list-style:none;
}

#nav li {
display:inline;
padding:0;
margin:0;
}

#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:14px 25px 10px 25px;
float:left;
width:150px;
border-bottom:1px solid #42432d;
border-left:1px solid #42432d;
border-right:1px solid #42432d;
text-align:center;
font-size:16px;
}
#nav li:first-child a {
border-top::1px solid #42432d;
}

#more-links {
margin-left:0px;
padding:0;
float:left;
width:220px;
list-style:none;
}

#side li{
display:inline;
padding:0;
margin:0;
}

#side a:link,
#side a:visited {
color:#000;
background:#b2b580;
padding:14px 0px 9px 0px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #694e1c;
float:left;
width:220px;
text-align:center;
font-size:16px;
}

.pullquote {
padding: 10px;
float: left;
width: 200px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:15px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
}

.fb-button {
width:90px;
height:27px;
float:left;
padding-right:2px;
}

.twitter-button {
width:90px;
height:26px;
float:left;
padding-left:3px;
}


.subpullquote {
padding-top: 0px;
font-size: 10px;
text-align: center;
line-height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight: normal;
}

.main-sidebar {
width:220px;
height:auto;
float:left;
}

.homecontent-right {
width:470px;
height:auto;
position:relative;
left:5px;
float:left;
}

.homecontent {
width:730px;
height:500px;
position:relative;
top:0px;
left:5px;
padding-left:5px;
padding-top:5px;
float:left;
}


(I also uploaded the .CSS file)
If you have any additional comments on the code or layout, those would be greatly appreciated, though my main focus here is dealing with this particular issue.

Thank you!

Sammy12
07-02-2011, 11:23 PM
ul { margin: 0; }

Rehnberg
07-02-2011, 11:28 PM
set a height on the li

Tried that. It still doesn't work. Here's a screenshot of how it shows up on my computer.

Sammy12
07-02-2011, 11:32 PM
ul { padding: 0; }

that should fix it. sorry, for my first post it was misleading.

Rehnberg
07-02-2011, 11:36 PM
ul { padding: 0; }

that should fix it. sorry, for my first post it was misleading.

Worked like a charm. Thanks!

Sammy12
07-02-2011, 11:37 PM
Worked like a charm. Thanks!

if you don't mind me asking, could I help you with this page? you will face a lot of problems down the road if you dont fix it now.

Rehnberg
07-02-2011, 11:47 PM
There's still an issue with the first li being too far down. In the first li should start 14px below the first border, but instead it's much farther down - formatting which is not consistent throughout the list. Any ideas?

Sammy12
07-02-2011, 11:48 PM
There's still an issue with the first li being too far down. In the first li should start 14px below the first border, but instead it's much farther down - formatting which is not consistent throughout the list. Any ideas?

You need to go back to the basics. :) Your css is not set up right. I'll pm you since I'm pretty bored right now



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum