SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unable to align a Div on the left margin. Any help much appreciated.

    Hey all. Im brand new CSS user. I do have an issue with a basic layout Id love to solve. If Anyone can help please see code below.

    My question relates to "why am I unable to make the <div> sit flush left against the left margin of the page". Im really just experimenting and learning, so any feedback whenever someone has time would be greatly appreciated.

    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>Inline Styles</title>
    
    <style type="text/css">
    
    p {
      margin-bottom: 0;
       }
    p + p {
      text-indent: 1.5em;
      margin-top: 0 }
      
    p.stb { text-indent: 10px; margin-top: 0.83em; }
    p.mtb { text-indent: 0; margin-top: 2.17em }
    p.ltb { text-indent: 0; margin-top: 3.08em }
    
    ul
    {
    	list-style-type:none;
    	clear: none;
    	float: none;
    	height: 50px;
    	width: 400px;
    	margin-top: 30px;
    	margin-right: 20px;
    	margin-bottom: 0px;
    	margin-left: px;
    } 
    
    ul li{
    display: inline;
    
    }
    
    ul li a{
    	text-decoration: underline overline;
    	color: #FFF;
    	background-color: #333;
    	padding: 15px;
    	margin: 5px;
    	
    	}
    	
    	ul li a:hover {
    	background-color: #F5BE37;
    	color: #FFF;
    	}
    	
    #main{
    	width: 700px;
    	margin-right: 0px;
    	padding: 10px;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#F6C;
    	font-weight:bold;
    	line-height:1.3em;
    	font-size:14px;
    	display: block;
    	float: left;
    }
    
    </style>
    
    </head>
    
    <body>
    <h1 style="font-family: Georgia, 'Times New Roman', Times, serif; color: #006699;">Inline Styles and various CSS</h1>
    
    <p class="stb">Heres my notes, as I learn new things about CSS. I have recently registered with Sitepoint and hope Ill gain some worthwhile knowledge by sharing my first ventures into this world. I have been working as a print designer for 20 years. More recently, I have worked on Flash banners and Email newsletters, or EDMs. 
    
    Im going to add an inline or local style  to the heading using Dreamweaver. Here lies the content of my page. I am going to insert more copy as my ability grows. <p>
    
    
    </p>
    
    
    <ul class="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Folio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
      
    <div id="main"> 
    Here's a DIV. HTML 5 calls this a section, which is a better name. A DIV is a division in the page and is an appropriate object to apply a class. </div>
    Last edited by ralph.m; Sep 12, 2012 at 21:00. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi RaveyDavey. Welcome to the forums.

    The problem here is that you have the div inside a <ul>, which isn't allowed. The <ul> has dafault padding to the left, which is pushing the div over.

    So the first thing to do is take that div out of the <ul>. Also, you can't have one <ul> directly inside another either. It must at least sit inside the <li> of the parent <ul> ... although you don't need that here anyway.

    As another tip, when making a page layout, it's a good idea to have a container for all your content in a section, rather than to have <p>, <ul>s etc just sitting in the <body>. This will become more apparent if you want to set a width on your content and not have it stretch across the whole screen.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi RaveyDavey. Welcome to the forums.

    The problem here is that you have the div inside a <ul>, which isn't allowed. The <ul> has dafault padding to the left, which is pushing the div over.

    So the first thing to do is take that div out of the <ul>. Also, you can't have one <ul> directly inside another either. It must at least sit inside the <li> of the parent <ul> ... although you don't need that here anyway.

    As another tip, when making a page layout, it's a good idea to have a container for all your content in a section, rather than to have <p>, <ul>s etc just sitting in the <body>. This will become more apparent if you want to set a width on your content and not have it stretch across the whole screen.
    thankyou, Ill give that a go. Much appreciated.

    David

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No probs. Do post back if you have any troubles. I realize my answer wasn't as specific as it could have been.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No that worked - you were very specific. obviously, a nav bar would come earlier in a page anyway, so, despite the finishing </ul> tag, the div was still part of the first ul right?. And there was no need for the first ul anyway.

    Adding the containe rmakes sense - like giving your page a boundary to work within.

    thanks again, Im getting this slowly.

    David




    Quote Originally Posted by ralph.m View Post
    No probs. Do post back if you have any troubles. I realize my answer wasn't as specific as it could have been.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RaveyDavey View Post
    the div was still part of the first ul right?
    Yes.

    And there was no need for the first ul anyway.
    No, that's right.

    Adding the container makes sense - like giving your page a boundary to work within.
    Yes, that's standard on web pages. In most browsers, you can right click Inspect Element to see under the hood of the web page. It's very useful, as you see how pages are constructed. Typically, sections of a site (and sometimes the whole thing) are grouped inside containers for styling purposes.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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