ansaurus

Question

HTML Menu help

Answer 1

+2 A:

Put a border-left in CSS? Or does it need to be a literal bar character?

Chuck 2009-02-11 01:37:53

Answer 2

A:

You don't need to use tables, CSS is your friend for this kind of thing!

Bare with me I am not a web designer and my html/css skills are a little rusty, but is something like this what you want?

<html>

<head>

<style type="text/css">
#menu {
text-align: center;
}
#menu a {
text-decoration: none;
padding: 5px 40px;
}
#menu a:hover {
background-color: blue;
color: white;
}
</style>

</head>

<body>

<div id="menu">
<a href="#">Cat 1</a> |
<a href="#">Cat 2</a> |
<a href="#">Cat 3</a> |
<a href="#">Cat 4</a>
</div>

</body>


</html>

John T 2009-02-11 01:46:50

Answer 3

+1 A:

You can use adjacent sibling selectors in CSS, by applying styles to elements based on the elements which immediately precede them you can create the menu dividers.

.menu a {
    text-decoration: none;
    padding: 10px;
}
.menu a + a {
    border-left:solid 1px black;
}

By using this approach you can easily apply this styling to any of your menus by assigning class="menu".

<div class="menu">
    <a href="#">Questions</a>  
    <a href="#">Tags</a> 
    <a href="#">Users</a> 
    <a href="#">Badges</a>
    <a href="#">Unanswered</a>
</div>

Phaedrus 2009-02-11 02:17:08

Answer 4

A:

Let me clarify something.

Chuck

Put a border-left in CSS? Or does it need to be a literal bar character?

It needs to be a literal bar character "|" or a shorter border. The border created by CSS is too long.

John T

I need the blue bgcolor to take up the whole box. When I hover the "Cat2", the left and right "bar" delimiter should disappear. This is what I want to do.

Billy 2009-02-11 02:39:06

Answer 5

A:

Navigation menus should be semantically marked up as lists. Using an unordered list is a very common practice for a menu such as this. See this example on Listamatic for a foundation to biuld from. To get the background color to be larger than the text you will simply need to add padding around the <a> tag.

cowgod 2009-02-11 02:40:26

Answer 6

+1 A:

This meets all the requirements sans one; That the vertical bar must be shorter than the height of the link.

It may be easiest to achieve this with a background image on the < a > rather than using borders or pipes (|).

I did try something with spans inside the links, which would be shorter than the full height of the A, but I couldnt get it rendering cleanly.

You could also add pipes into the HTML itself, inside a span, and hide them on hover.

I know this wont work properly in all browsers, but hacks and workarounds are extra. :P

EDIT:: I added @Fistandantilus' adjacent selectors to this. makes for cleaner HTML.

       <html>
    <head>
        <title>Menu Test</title>


    <style type="text/css" media="screen">
        ul.menu { 
            display:block;
            margin:0; 
            padding:0;
            height:30px;
        }
        ul.menu li {
            display:block;
            width:100px;
            height:30px;
            float:left;

        }        

        ul.menu li a{
            width:100%;
            height:30px;
            line-height:30px;
            display:block;
            text-align:center;
            border-left:1px solid transparent;
        }
        ul.menu li + li a { 
            border-left:1px solid #000;
        }

        ul.menu li a:hover {
            background-color:#0f0;
            border-left:1px solid transparent;
        }
        ul.menu li:hover + li>a  {
            border-left:1px solid transparent;

        }



    </style>
    </head>


    <body>
        <ul class="menu">
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>

        </ul>
    </body>
</html>

garrow 2009-02-11 03:02:55

ansaurus

tags:

views:

answers:

HTML Menu help

related questions