...

View Full Version : Slightly Indented Nav Bar



aaronoafc
11-15-2012, 10:32 PM
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


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;
}











/*
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{c lear: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?

VIPStephan
11-15-2012, 11:05 PM
We need your HTML, too. CSS does nothing all by itself.

Taro
11-15-2012, 11:56 PM
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.

VIPStephan
11-16-2012, 09:56 AM
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?

Jodzzz
11-16-2012, 10:01 AM
Hello,
Why not use a table to organize your content?

Oh My God........



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum