SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PLEASE help me get rid of this margin! :(

    I want my left navigation bars to butt right up against the blue div wall. But there's a 30px margin someplace that I cannot find! I'm in dreamweaver, and when I hover over the space it sais there's a 30px margin but I can't find it in the source code. I even did cmd+f to search through but nothing. Can anyone help? Clearly, I am a student. This has been driving me crazy for a half hour.

    As I'm not sure where the problem is, I am just going to attach all of my css (it's not long). Also you can go to the page and view the css.

    Thanks for your help!

    http://graph-art.matc.edu/schmidj/vi...nt1/index.html


    Code:
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #ffffff;
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    	
    }
    .twoColLiqLtHdr #container { 
    	width: 80%; 
    	background: #FFFFFF;
    	background-image:url(http://graph-art.matc.edu/schmidj/vicom124/assignment1/images/flower-rt.gif);
    	background-repeat: no-repeat;
    	background-position: bottom right;
    	margin: 0 auto;
    	text-align: left; 
    	height:auto;
    } 
    .twoColLiqLtHdr #header { 
    	background: #ffffff; 
    	padding: 0 10px; 
    } 
    .twoColLiqLtHdr #header h1 {
    	margin: 0;
    	padding: 10px 0; 
    }
    
    
    ul{
    	list-style-type:none;
    	}
    
    #sidebar1 ul{
    	width:auto; display:block; font-size:0;
    	}
    #sidebar1 ul li{display:block; height:24px;
    	}
    #sidebar1 ul li a{
    	padding-left:5px;
    	font:15px/30px Arial, Helvetica, sans-serif; color:#ffffff; text-decoration:none; background-color:#9CD4EB; display:block;
    	}
    #sidebar1 ul li a:hover{
    	background-color:#25A9E0; color:#ffffff;
    	}
    
    
    .twoColLiqLtHdr #sidebar1 {
    	float: left; 
    	width: 24%; 
    	background: #B3DEF0;
    	background-image:url(http://graph-art.matc.edu/schmidj/vicom124/assignment1/images/flower-l.gif);
    	background-repeat: no-repeat;
    	background-position: bottom left;
    	padding: 15px 0; 
    	height:300px;
    	overflow:visible;
    	margin-bottom:20px;
    }
    .twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
    	margin-left: 10px; 
    	margin-right: 10px;
    }
    
    
    .twoColLiqLtHdr #mainContent { 
    	margin: 0 20px 0 26%; 
    } 
    .twoColLiqLtHdr #footer { 
    	padding: 0 10px; 
    	background:#B3DEF0;
    } 
    .twoColLiqLtHdr #footer p {
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	margin: 0; 
    	padding: 10px 0; 
    }
    
    /* Miscellaneous classes for reuse */
    .fltrt { /* float an element right*/
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* float an element left*/
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    </style>
    oh also - while I'm at it - I had to use absolute links to get my images to show up.. what's the "rule" with relative links to images in css? For some reason I remember it being different than html, but I can't remember how. Thanks!

    Jamie

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You just need to zero out the default margins and paddings on your ul.

    Code:
    #sidebar1 ul{
        width:auto;
        display:block;
        font-size:0;
        margin:0;
        padding:0;
    }
    You should also be using a reset at the very top of your stylesheet to zero out the default margins and paddings on all elements. Different browsers have different defaults and this is the best way to get them all displaying the same. Then you can set the margins and paddings as you determine.

    This is the universal reset -

    * {margin:0; padding:0;}

    Note also that it can cause problems with form elements, just do a search in the forums for "reset" and you will find other proper methods.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The path to images in the css is relative to the location of the css file. If the css file is in a separate folder then you may need to step back a folder or two using the ../ construct in the file path. In your case, the css file is at the same level as the html file and images folder, so starting at the image folder should be fine :
    Code:
    background-image:url(images/flower-rt.gif);

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You can also remove the clearing div and just add 'clear: left;' to the footer.


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
  •