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 8 of 8

Thread: horizontal menu

  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Bournemouth
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    horizontal menu

    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

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    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>
    Last edited by tempz; 12-20-2012 at 12:13 AM.

  • Users who have thanked tempz for this post:

    bgareth (12-20-2012)

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    Bournemouth
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    What did I do wrong here, you have clearly used a different format? I'm just trying to understand. Thanks for the reply :-)

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by bgareth View Post
    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.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    Bournemouth
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    [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?
    Last edited by bgareth; 12-20-2012 at 03:18 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    [QUOTE=bgareth;1301315]
    Quote Originally Posted by tempz View Post
    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

  • #7
    New Coder
    Join Date
    Sep 2011
    Location
    Bournemouth
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Last edited by bgareth; 12-22-2012 at 04:49 PM.

  • #8
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by bgareth View Post
    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.



  •  

    Posting Permissions

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