How do to create a double border around my Nav Bar.

[Quasar]

Hello,

I am working on my first ever website as posted in my other topic.

I have been coming along rather quickly with all the tutorials and by going around and looking at source code from other sites.

Here is where I am at. I am trying to create a template that all pages in my website will follow. I have a Head space at the top of the page to put my graphics and I have a Nav bar on the left side of the page just like I wanted. But I am having a hard time getting a boarder around it.

What I want is to get a double line boarder around the nav bar. I want the border lines to be Gold1 "#FDD017" and I also want to fill in my nave bar with the color Medium Forest Green "#347235". I would also like to have it "if possible" where the green color goes all the way to the outside line in the double line border..if that makes sense. I have looked all over the internet for a way to do this and have not found anything. Any help would be greatly appreciated.

 

[krymson]

http://www.w3schools.com/css/css_border.asp

That should answer your question...

 

[CaldwellYSR]

border: 2px double /*color*/

 

[Quasar]

Hello,

Yes, I found that tutorial but for some reason it is not working for me. It is probably something stupid...

I have tried putting it in both in my css and direct html. Both ways it doesn't do anything. Here is my code, minus the border tag...maybe I am putting it in teh wrong place? First the html then the css...just the parts that have to do with my nav bar:

<tr>
<td valign="top" class="navibg">
<div class="naviueberschrift">Check it out!</div>
<ul class="menue">
<li><a title="Home" href="#">Home</a></li>
<li><a title="Thomas Green" href="#l">Thomas Green</a></li>
<li><a title="William_B._Green.html" href="#">William B. Green</a></li>
<li><a title="Lewis_Green.html" href="#">Lewis Green</a></li>
<li><a title="Early.html" href="#">Early Greens of Bulloch </a></li>
<li><a title="DNA.html" href="#">DNA</a></li>
<li><a title="Contact" href="#">Contact</a></li>
</ul>

.naviueberschrift {

color: #4C6535;
background-color: #FFFFFF;
font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
font-size: 16pt;
font-weight: bold;
font-style: italic;
margin: 5px;
padding: 20px 0px 8px 10px;
text-align: left;
line-height: 25px;
}

.menue {
list-style-type:none;
padding: 0px;
margin: 0px 0px 0px 5px;
text-align: left;
}

.menue li a, .menue li a:active, .menue li a:visited {
color: #7D4926;
background-color: #FFFFFF;
width: 190px;
padding: 3px;
margin: 2px;
text-decoration: none;
font-size: 10pt;
font-family: Georgia,"Trebuchet MS",verdana,arial,helvetica,sans-serif;
display: block;
font-weight: bold;
text-indent: 10px;
}

.menue li a:hover {
font-weight: bold;
text-decoration: none;
color: #FF8000;
background-color: #454440;
}

Where should I plug this code in?

 

[CaldwellYSR]

Oh no Quasar :/ Why are you using a table?! I was hoping you hadn't gotten into that habit in the other thread. As for your problem... You could use border and a box-shadow with no spread...

 

[keens]

Quasar, you could also opt to use a border and an outline.

Please view http://www.w3schools.com/cssref/playit.asp?filename=playcss_outline-color

 

[Quasar]

Oh no Quasar :/ Why are you using a table?! I was hoping you hadn't gotten into that habit in the other thread. As for your problem... You could use border and a box-shadow with no spread...

Ut Oooo, Um well that is just the way I have seen it done most on the web. Those tutorials you recommended didn't cover nav bars unless there was more videos that I didn't see somewhere. So I went around to other websites...looked at the source code and this was how people did it. How should I be creating a nav bar?

I don't believe I have seen a tutorial which doesn't tell you not to use tables for the nav bar. I want to do things the right way.

 

[CaldwellYSR]

I know the videos I sent you to doesn't tell you to use tables Tables should be used to show data (think sports rosters or a list of contacts) not for any kind of layout. As a matter of fact you could just take the table out of the code you have and be good. ul > li > a is all you need to make a navigation bar. With html5 you wrap it in a nav tag but that's it. I've been making websites for almost a year and a half and the only table I've ever used was to make a roster for my football team so if you find yourself using a table for anything you need to stop and ask yourself if you really need a table there.

 

[Phreaddee]

oh look at this.

http://www.webdesignforum.com/10971-tutorial-css-menu-basic.html

and wow, its even on this website,

and super duper wow, its even a sticky.

and triply wow, its even in this section of the forum...

 

[Quasar]

oh look at this.

http://www.webdesignforum.com/10971-tutorial-css-menu-basic.html

and wow, its even on this website,

and super duper wow, its even a sticky.

and triply wow, its even in this section of the forum...

Thanks for the link.

Sorry, didn't mean to lick the Red off of your lollipop.

 

[Quasar]

I know the videos I sent you to doesn't tell you to use tables Tables should be used to show data (think sports rosters or a list of contacts) not for any kind of layout. As a matter of fact you could just take the table out of the code you have and be good. ul > li > a is all you need to make a navigation bar. With html5 you wrap it in a nav tag but that's it. I've been making websites for almost a year and a half and the only table I've ever used was to make a roster for my football team so if you find yourself using a table for anything you need to stop and ask yourself if you really need a table there.

In that case, I am going to have to go back and change a lot. Basically I guess I am going to have start from scratch. I used tables quit a bit in my template. I used them to created a border running on the left side, bottom and right of my page that has not content, just filled with color to. This was for looks only. I also used a table to make the top/header area where I am going to put my graphics. That tutorial that Phreaddee pointed out took care of how I can create the header area with out a table.

I thought I was doing so well too. Oh well, back to the drawing board.

 

[CaldwellYSR]

In that case, I am going to have to go back and change a lot. Basically I guess I am going to have start from scratch. I used tables quit a bit in my template. I used them to created a border running on the left side, bottom and right of my page that has not content, just filled with color to. This was for looks only. I also used a table to make the top/header area where I am going to put my graphics. That tutorial that Phreaddee pointed out took care of how I can create the header area with out a table.

I thought I was doing so well too. Oh well, back to the drawing board.

Dont get discouraged... It's not your fault that those stupid tutorials still exist that teach people a stupid way to code. Basically if you're doing anything in your html that is "only for looks" like you said then you're probably doing it wrong. Html should be for content and CSS should be for looks.

 

[jumpingspider]

Dont get discouraged... It's not your fault that those stupid tutorials still exist that teach people a stupid way to code. Basically if you're doing anything in your html that is "only for looks" like you said then you're probably doing it wrong. Html should be for content and CSS should be for looks.

Right, don't be discouraged! You'll learn from your mistakes!!