Forum:

HTML Pages with CSS and JavaScript

HTML/CSS: navigation bar

Qunfeng Wang

Ranch Hand

Posts: 434

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I've met problems when implementing navigation with<table> & some CSS.

I can't make a gap between each tab when set border-spacing:0px;

There is a little gap between table and <h r>

The original problem and image is at:http://www.stanford.edu/class/cs142/cgi-bin/project.php?project=1

Below is my implementation:

HTML

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>CS 142 Project 1, Problem 2</title>
        <link rel="stylesheet" type="text/css" href="p2.css" />
    </head>
    
    <body>
        <table>
            <tr>
                <td class="left"><div/></td><td class="navbar"><a><span class="text">Inventory</span></a></td><td class="right"></td>
                <td class="left"><div/></td><td class="navbar"><a><span class="text">Order Information</span></a></td><td class="right"></td>
                <td class="left"><div/></td><td class="navbar"><a><span class="text">Account</span></a></td><td class="right"></td>
                <td class="left"><div/></td><td class="navbar"><a><span class="text">Shippers</span></a></td><td class="right"></td>
                <td class="left"><div/></td><td class="navbar"><a><span class="text">Suppliers</span></a></td><td class="right"></td>
                
            </tr>
        </table> 
        <hr id="line"/>
    </body>
    
</html>

CSS

To be or not to be. It's a question.

Eric Pascarello

author

Posts: 15385

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You should not be using a table for navigation menus.

You really should be using an unordered list: http://css.maxdesign.com.au/listamatic/

Eric

David Newton

Author

Posts: 12617

I like...

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

And it'd probably be better to use a border rather than an HR if you're trying to get a line underneath a DIV.

ahmer afzal

Greenhorn

Posts: 3

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

------------------ Html -------------------

---------------- CSS -----------------------

body {
	behavior:url("Script/csshover3.htc"); /*For Ie 6 Mouse Hover Problem Solved*/
/* csshover3 file uploaded from that URL:http://www.enrap.org/csshover3.htc/view */
}
.MainClassForNavigation {
}

.MainClassForNavigation ul {
padding:0px;
margin:0px;
}
.MainClassForNavigation li {
float:left
background-image:url(RightAlignBackgroundImage);
background-position:top right;
background-repeat:no-repeat;
margin:0 1px 0 0;
}
.MainClassForNavigation a,.MainClassForNavigation a:visited,.MainClassForNavigation a:link {
background-image:url(LeftAlignBackgroundImage);
background-position:top left;
background-repeat:no-repeat;
}

.MainClassForNavigation li.active {
background-image:url(RightAlignActiveBackgroundImage);
background-position:top right;
background-repeat:no-repeat;
}
.MainClassForNavigation a.active {
background-image:url(LeftAlignActiveBackgroundImage);
background-position:top left;
background-repeat:no-repeat;
}

.MainClassForNavigation li:hover {
background-image:url(RightAlignHoverBackgroundImage);
background-position:top right;
background-repeat:no-repeat;
}
.MainClassForNavigation a:hover {
background-image:url(LeftAlignHoverBackgroundImage);
background-position:top left;
background-repeat:no-repeat;
}

Code was Perfect in All the Browsers Without Table

Regards
Ahmer Afzal

David Newton

Author

Posts: 12617

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

... but hopefully they've already fixed their problem from 2.5 months ago.

Politics n. Poly "many" + ticks "blood sucking insects". Tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing