horizontal menu

bgareth · 12-19-2012, 11:36 PM

Hello,

I'm having some problems with getting my CSS to work properly, it seems to me that #nav6 (with "buy your e") has the text higher than in the other divs and the text is not aligned the same way. I also want to centre the nav in the middle of the page but this does not seem to work either when I put a margin-left on #nav1?

Any help very gratefully received,

B.

http://www.garethgroup.com/webdev/form/index.php

tempz · 12-20-2012, 12:10 AM

Try this:

- Delete all other one.
New CSS:

Code:

* {margin:0; padding:0;}

.menu {margin:15px;}
.menu {float:left; display:inline;}
.menu ul {border-top: 2px dotted grey;}						
.menu ul li  {float:left; display:inline; padding:30px;border-left: 2px dotted grey;border-right: 2px dotted grey;}	
.menu ul li {padding-left:40px; padding-right:40px;}

						
ul li a:link, a:visited {

		font-size: 10pt;
		font-weight: bold;
		text-decoration: none;
		padding: 7px, 10px, 7px, 10px;
		color: 00FFFF;

.error { font-weight: bold;color: #C00;}

New HTML
- Delete all other one.

Code:

<body>
<div class="menu">
	<ul>
		<li><a href='/index.php'>About</a></li>
		<li><a href='/index.php'>Buy your a</a></li>
		<li><a href='/index.php'>Buy your b</a></li>
		<li><a href='/index.php'>Buy your c</a></li>
		<li><a href='/index.php'>Buy your d</a></li>
		<li><a href='/index.php'>Buy your e</a></li>
	</ul>
</div>	
</body>

bgareth · 12-20-2012, 12:52 AM

What did I do wrong here, you have clearly used a different format? I'm just trying to understand. Thanks for the reply :-)

tempz · 12-20-2012, 01:31 AM

Quote:

Originally Posted by bgareth

What did I do wrong here, you have clearly used a different format? I'm just trying to understand. Thanks for the reply :-)

you only need one nav, not several.

bgareth · 12-20-2012, 03:15 PM

[QUOTE=tempz;1301149]Try this:

- Delete all other one.
New CSS:

Code:

* {margin:0; padding:0;}

.menu {margin:15px;}
.menu {float:left; display:inline;}
.menu ul {border-top: 2px dotted grey;}						
.menu ul li  {float:left; display:inline; padding:30px;border-left: 2px dotted grey;border-right: 2px dotted grey;}	
.menu ul li {padding-left:40px; padding-right:40px;}

						
ul li a:link, a:visited {

		font-size: 10pt;
		font-weight: bold;
		text-decoration: none;
		padding: 7px, 10px, 7px, 10px;
		color: 00FFFF;

.error { font-weight: bold;color: #C00;}

Thanks again for this, so here's a few questions so you're help goes as far as possible (I've always said i'll help others once i'm competent)

1. You have used classes, what is the benefit of doing this or is it purely choice?

2. How does the CSS allow for each of the links to end up in their own separate "illusion box"?

3. I also notice you've got rid of percentages, were these problematic and i'm guessing:

Code:

.menu {margin:15px;}

Is what makes it appear in the centre of the screen? Is it not better to somehow use a centre attribute so it is guaranteed to be cross browser compatible?

tempz · 12-20-2012, 04:18 PM

[QUOTE=bgareth;1301315]

Quote:

Originally Posted by tempz

Try this:

- Delete all other one.
New CSS:

Code:

* {margin:0; padding:0;}

.menu {margin:15px;}
.menu {float:left; display:inline;}
.menu ul {border-top: 2px dotted grey;}						
.menu ul li  {float:left; display:inline; padding:30px;border-left: 2px dotted grey;border-right: 2px dotted grey;}	
.menu ul li {padding-left:40px; padding-right:40px;}

						
ul li a:link, a:visited {

		font-size: 10pt;
		font-weight: bold;
		text-decoration: none;
		padding: 7px, 10px, 7px, 10px;
		color: 00FFFF;

.error { font-weight: bold;color: #C00;}

Thanks again for this, so here's a few questions so you're help goes as far as possible (I've always said i'll help others once i'm competent)

1. You have used classes, what is the benefit of doing this or is it purely choice?

2. How does the CSS allow for each of the links to end up in their own separate "illusion box"?

3. I also notice you've got rid of percentages, were these problematic and i'm guessing:

Code:

.menu {margin:15px;}

Is what makes it appear in the centre of the screen? Is it not better to somehow use a centre attribute so it is guaranteed to be cross browser compatible?

I use pixels you can use percentages. What ever is easiest.

Code:

<li> //is a container for each menu item

You just need to write the correct css script and it will do what you want.

Tutorials like this may help you: http://www.youtube.com/watch?v=QY7bDBGncXo

bgareth · 12-22-2012, 04:43 PM

Thanks for this so are the classes (rather than divs) purely by choice or is there a concept I am missing here?

how would I centre the menu, would this be through the use of margins and how can I go about getting rid of all the left borders (with the exception of the first box)?

Thanks,

B.

tempz · 12-23-2012, 01:19 AM

Quote:

Originally Posted by bgareth

Thanks for this so are the classes (rather than divs) purely by choice or is there a concept I am missing here?

how would I centre the menu, would this be through the use of margins and how can I go about getting rid of all the left borders (with the exception of the first box)?

Thanks,

B.

Centre of the screen?

If you get the correct width on your container or wrap I normally use 960px;

then just simply add

Code:

margin: 0 auto;
or
margin:0 auto 0 auto; /*  youtube use this */

note: this will only work if you have width on your main container for your website.

If you just randomly add it to your style it will not move.