SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Threaded View

  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


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
  •