<a href="https://bytes.com/topic/html-css/answers/644446-navigation-bar-using-div">Navigation bar using &lt;DIV&gt;

7,435

Expert 4TB

What you are really doing is, instead of using a table to do your alignment for you, you are going to use CSS. A <div> is only a structural element that may or may not be used to group other elements. Too many people think a div is a replacement for tables. It is not.

The layout you are looking for is quite typical and probably the subject of a tutorial. Here is something I just slapped together.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

html,body{height:100%;width:100%}

</style>
 
</head>
 
<body>

<div style="background-color:#aaa;height:100px">

<h2>My header</h2>

</div>

<div style="float:left;width:20%;height:100%;background-color:#ccc"><h5>My Nav</h5></div>

<div style="float:right;background-color:#ddd;width:80%;height:100%"><h4>My Content</h4></div>

</body>

</html>

Quite frankly, I didn't need a div to do any of that. But you would have much more in each container than I have there.

May 9 '07 #2

pbmods

5,821

Expert 4TB

Check out these resources for more info to get you started:
http://www.glish.com/css/
http://www.maxdesign.com.au/presentation/page_layouts/

May 10 '07 #3

Hi!

Thanks! That was so helpful! I created a page using your html code. Exactly what I was looking for! This brings me to more questions...:

-Can I instead of using styles in this document use an external style sheet? One that would include all the CSS styles?

-I have been supplied with an html document that already contains the header I will use. This html document calls the css file we use, and also contains server side includes. In the file I read:
<div id="test">


 etc....

I thought I use this document to create my template. How do I work with includes and DIV tags together? Does this mean I need to create the nav bar as an include, then attach styles to it; or can i just create the nav links right inside this document.

Thanks again!

What you are really doing is, instead of using a table to do your alignment for you, you are going to use CSS. A <div> is only a structural element that may or may not be used to group other elements. Too many people think a div is a replacement for tables. It is not.

The layout you are looking for is quite typical and probably the subject of a tutorial. Here is something I just slapped together.

Expand|Select|Wrap|Line Numbers

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<style type="text/css">

html,body{height:100%;width:100%}

</style>

</head>

<body>

<div style="background-color:#aaa;height:100px">

<h2>My header</h2>

</div>

<div style="float:left;width:20%;height:100%;background-color:#ccc"><h5>My Nav</h5></div>

<div style="float:right;background-color:#ddd;width:80%;height:100%"><h4>My Content</h4></div>

</body>

</html>

Quite frankly, I didn't need a div to do any of that. But you would have much more in each container than I have there.

May 10 '07 #4

Thank you! I will start studying these sites now. Seem like great sites!

Check out these resources for more info to get you started:
http://www.glish.com/css/
http://www.maxdesign.com.au/presentation/page_layouts/

May 10 '07 #5

7,435

Expert 4TB

Can I instead of using styles in this document use an external style sheet? One that would include all the CSS styles?

Yes, and it's preferred.

You can create your own tags inside the document if they are not part of the includes. iow, you can't create a list that is to be contained in anything imported from the include statements. Any CSS you use will affect the elements imported.

May 10 '07 #6

Thanks again! Is it bad practice if I mix tables and div tags? For instance, where I have the <DIV ID ="navbar">, can i insert a table there with 5 rows; each for a link button? Unless I can easily create navbar with ink buttons using DIV tag?....

Yes, and it's preferred.

You can create your own tags inside the document if they are not part of the includes. iow, you can't create a list that is to be contained in anything imported from the include statements. Any CSS you use will affect the elements imported.

May 10 '07 #7

pbmods

5,821

Expert 4TB

Is it bad practice if I mix tables and div tags? For instance, where I have the <DIV ID ="navbar">, can i insert a table there with 5 rows; each for a link button? Unless I can easily create navbar with ink buttons using DIV tag?....

That all depends on your implementation. You can have TABLEs inside of DIVs (though you have to put your DIVs inside of TDs).

If you're just creating a list of links, though, you might find that UL will better meet your needs.

http://www.w3schools.com/tags/tag_ul.asp

May 10 '07 #8

I have create a list using UL for the links and it works fine.
However, if I use the div (id ="navbar"), what do i do in the CSS style sheet i have. I need to style the list to look like a navbar. That is, I want to remove the bullets, and want the background to change from blue to gray when you hover over the list with the link (like a roll-over button). In a table cell I would just insert a rollover image, but i would like to acheiev same thing by using the DIV tage and the UL.

Thanks....

That all depends on your implementation. You can have TABLEs inside of DIVs (though you have to put your DIVs inside of TDs).

If you're just creating a list of links, though, you might find that UL will better meet your needs.

http://www.w3schools.com/tags/tag_ul.asp

May 10 '07 #9

7,435

Expert 4TB

What you do for the links is use the css property "list-style-type:none".
For the hover, you simply do a:hover{background-color:blue}.

There are a lot of sites that show how to do all this. Here's two:
CSSPlay
CSS Library

May 10 '07 #10

Thank you once again! I did that, in the attached style sheet. However it does not change the document where I have the nav bar. I do what tutorials advise me, but just won't work. If I add the style in the same html document in the div tag, it does work. Any idea why the attached CSS sheet wont affect the document? Am I missig something?

Also, how can I create a style to create a border for the entire middle part of the document, sort of like you have one master table in the center of the htlm document (with nested tables inside), and create a border, and then have different background color than the main table that contains the header, navbar and content?

What you do for the links is use the css property "list-style-type:none".
For the hover, you simply do a:hover{background-color:blue}.

There are a lot of sites that show how to do all this. Here's two:
CSSPlay
CSS Library

May 11 '07 #11

7,435

Expert 4TB

It would be better if you gave us a link or the complete code.

May 11 '07 #12

Hi, Thanks for reply. I believe you answered to other question I have on this blog as well, and I just sent a reply to you there:
http://www.thescripts.com/forum/showthread.php?p=2558622#post2558622

I was on vacation, sorry for late reply. This repeats somewhat the post I have on the other forum.
The code is for the html file that was given to me, and that I need to work on is:

<!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">
<head>

<script type="text/javascript" src="http://www.xxxx/folder/scripts/EventHandler.js"></script>
<script type="text/javascript" src="http://www.xxx/folder/scripts/DropDown.js"></script>
<script type="text/javascript" src="utils.js"></script>

<link rel="stylesheet" href="main.css" type="text/css" media="screen" />



</head>

<body style="width: 760px; margin: 10px auto;">

<div id="utilities">
<ul>





<li class="search">
<form action="http://google.xxxx.com/search" method="GET" name="gs">

<input type="hidden" name="site" value="XXXWeb_Main" />
<input type="hidden" name="client" value="XXXWeb_Main" />

<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="proxyreload" value="1" />

<input type="hidden" name="proxystylesheet" value="main_frontend" />
<input type="hidden" name="sitesearch" value="www.xxxx/main" />

<input type="text" name="q" value="Search This Site" onfocus="javascript:this.value=''" onblur="javascript:this.value='Search This Site' "/><button type="submit" name="submit" value="search">go</button>

</form>
</li>
</ul>
</div>
<div id="header">
<div id="Logo1">

<a href="http://www.xxxx">Our Site</a>
</div>
<div id="Logo2">
<a href="http://"www.xxxx">Our Site</a>
</div>
<div id="Logo3">
<a href="http://"www.xxxx/main">Our Division</a>
</div>
</div>

</body>
</html>

May 20 '07 #13

7,435

Expert 4TB

I closed the other thread so we can keep everything in one place.

May 20 '07 #14

I have finally managed to get the CSS style sheet to work, at elast on my local machine. If I upload to the server, the css styles I added do not show up. Any idea why?

Also, I still have not managed my nav bar act as a rollover image. Here is the CSS code:

Expand|Select|Wrap|Line Numbers

 
#navbar {position: relative;width:20%;height:100%;z-index: 100; float:left;padding-top: 0px; margin-top: -3px; border-top: none;background-color:#ccc;font-family: verdana,arial,sans-serif;font-weight:bold;}
 
#navbar a{display: block; text-decoration: none;width: 180px; height: 40px;background-color:#ccc;}
 
#navbar ul li a:hover {border: none; border-top: 1px solid white;background-color:#AB4500;}
 
#navbar li {background-image: none; padding: 0px;}
 
#navbar ul {list-style-type: none;padding:0;text-indent: 20px;display: block;border : 1px solid;border-width : 0 1px;text-decoration: none;background-color:#ccc;}
 
#navbar ul li {float : left;border : 1px solid;position : relative;list-style-type: none;background-image: none; padding: 0px; background-color:#ccc;}
 
#content {float:right;background-color:#ddd;width:70%;height:100%;}
 
#content a {color: #AB4500; padding-left: 0px; text-decoration:none;}
 
#content a:hover {text-decoration: underline; background-color: transparent; color: #AB4500; padding-left: 0px; }

And here is the HTML:
[html]
<div id= "navbar">

<ul>
<li class="home">

<a href="...">TEST1</a>
</li>
<li>
<a href="...">TEST2</a>
</li>
<li>
<a href="...">TEST3</a>
</li>
<li>
<a href="...">TEST4</a>
</li>
</ul>
</div>

<div id="content"> <h4>My Content</h4>
<a href="...">TESTING CONTENT LINK</a>
</div>
color:#ddd;width:80%;height:100%">-->

</body>
[/html]

I am also trying to create a border around my navigation and content part only, excluding the header part. Any idea how to do so?

May 21 '07 #15

7,435

Expert 4TB

Check to make sure you have the path right and the css file is really there.

May 21 '07 #16

<div > inside <table> doesn't work - why not?

Thanks. How do i check the correct past? It works locally, but not when I upload to server.

Check to make sure you have the path right and the css file is really there.

May 22 '07 #17

by: Philo | last post by:

How do I select all <div> tags except those which contain a <table> tag somewhere within them? Example XML: <********************** sample input ***********************> <txtSectionBody>...

.NET Framework

by: Paul Thompson | last post by:

When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?

Javascript

Space between <p>...</p> and <div>...</div> blocks

by: Daniel Hansen | last post by:

I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a...

how to achieve identical layouts achieved by <table> using <div>

by: listaction | last post by:

Hi Folks, can you help me by explaining how the code below can be translated using <div> and achieve the same effect? Thanks, LA <html> <body> <table bgcolor="#000000" width="100%"...

Using <DIV> to mimic a bare <TABLE>

by: He Shiming | last post by:

Hi, I'm wondering how can I use <DIV> to mimic a <TABLE>. In a bare <TABLE> without a width attribute, the width of the table get dynamically expanded according to the content. However, <DIV>...

<label><div></div></label> allowed?

by: Josef K. | last post by:

Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644"...

ASP.NET

how to place a dividion( using <div> tag) at a particular location

by: menmysql | last post by:

hi to all i want to place a division(using <div> tag) at a perticular location(x,y). is it possible. if possible please tell me how to do it. regards

Javascript

using <div> inside <form>

by: neverquit | last post by:

hi , Iam Nagesh,Begineer in using Ajax,well i have been using ajax in application, i have faced a problem while placing the responseTEXT into the <div> tag positioned inside the <form> tag iam...

Javascript

Using <fieldset><legend> in a <div>

by: goatboy | last post by:

So I am hosting a site from my home server, and I would like the main page to be an area for updates about the site. I am providing these updates in a blog-style format, using this code: ...