Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-15-2012, 10:32 PM   PM User | #1
aaronoafc
New Coder

 
Join Date: Feb 2012
Posts: 69
Thanks: 6
Thanked 0 Times in 0 Posts
aaronoafc is an unknown quantity at this point
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
Click image for larger version

Name:	indented nav.jpg
Views:	33
Size:	48.4 KB
ID:	11707  
__________________
Don't Click Here!
aaronoafc is offline   Reply With Quote
Old 11-15-2012, 11:05 PM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,600
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
We need your HTML, too. CSS does nothing all by itself.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 11-15-2012, 11:56 PM   PM User | #3
Taro
Regular Coder

 
Taro's Avatar
 
Join Date: Oct 2011
Location: Geraldton, Ontario
Posts: 155
Thanks: 1
Thanked 1 Time in 1 Post
Taro is an unknown quantity at this point
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.
Taro is offline   Reply With Quote
Old 11-16-2012, 09:56 AM   PM User | #4
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,600
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
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?
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 11-16-2012, 10:01 AM   PM User | #5
Jodzzz
New Coder

 
Join Date: Nov 2012
Posts: 16
Thanks: 2
Thanked 0 Times in 0 Posts
Jodzzz is an unknown quantity at this point
Quote:
Originally Posted by Taro View Post
Hello,
Why not use a table to organize your content?
Oh My God........
Jodzzz is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:04 AM.


Advertisement
Log in to turn off these ads.