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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Slightly Indented Nav Bar

    Hi,

    Please see attached the screenshot of a little mockup page I'm doing, the nav bar is indented slightly to the right and I can't figure out why? I am using a grid system and you can see both my style.css code and grid.css code below.

    the nav is labelled id="nav" so css should be simple enough to read

    Code:
    body {
    	background: #1B56E0;
    	font-family: Arial;
    	color: #F5F5FA;
    }
    
    h1 {
    	font-family: 'Orienta', Arial;
    	font-size: 1.75em;
    }
    
    #nav {
    	padding: 0 0 20px 0;
    	margin: 0 0 20px 0;
    	list-style: none;
    	float: left;
    	text-decoration: none;
    }
    
    #nav li {
    	float: left;
    	margin-right: 40px;
    	list-style-type: none;
    }
    
    #nav li a {
    	text-decoration: none;
    	color: #F5F5FA;
    }
    Code:
    /*
     Width: 1000px
     # Columns : 12 
     Column width: 65px
     Gutter : 20px 
    
     */
    .grid_1 { width: 65px; }
    .grid_2 { width: 150px; }
    .grid_3 { width: 235px; }
    .grid_4 { width: 320px; }
    .grid_5 { width: 405px; }
    .grid_6 { width: 490px; }
    .grid_7 { width: 575px; }
    .grid_8 { width: 660px; }
    .grid_9 { width: 745px; }
    .grid_10 { width: 830px; }
    .grid_11 { width: 915px; }
    .grid_12 { width: 1000px; }
    
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
    	margin: 0 20px 10px 0;
    	float: left;
    	display: block;
    }
    
    .alpha{margin-left:0px;}
    .omega{margin-right:0px;}
    
    .container{
    	width: 1000px; 
    	margin: auto;
    }
    
    
    
    .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
    Any ideas?
    Attached Thumbnails Attached Thumbnails Slightly Indented Nav Bar-indented-nav.jpg  
    Don't Click Here!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    We need your HTML, too. CSS does nothing all by itself.

  • #3
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello,

    I've never encountered such a complex system before, especially using grids. Why not use a table to organize your content? Unless you are integrating buttons and tool-bars, try to use padding and inter-cellular content alignment.

    In addition, the CSS design may overwrite your HTML style coding, causing that indent.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by Taro View Post
    Why not use a table to organize your content?
    Are you serious about this? Or have I been thrown back to 1997 last night while sleeping?

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Taro View Post
    Hello,
    Why not use a table to organize your content?
    Oh My God........


  •  

    Posting Permissions

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