Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: List/Div issues

  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post

    List/Div issues

    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:
    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:
    Code:
    @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!
    Attached Files Attached Files

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    ul { margin: 0; }
    Last edited by Sammy12; 07-03-2011 at 12:30 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Sammy12 View Post
    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.
    Attached Thumbnails Attached Thumbnails List/Div issues-screen-shot-2011-07-02-5.27.41-pm.jpg  

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    ul { padding: 0; }

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

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Sammy12 View Post
    ul { padding: 0; }

    that should fix it. sorry, for my first post it was misleading.
    Worked like a charm. Thanks!

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Rehnberg View Post
    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.
    Last edited by Sammy12; 07-03-2011 at 12:41 AM. Reason: my grammar stinks

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Rehnberg View Post
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •