Turning HTML text into NavBar with CSS

**scottydont2841** · 04-30-2007, 05:27 AM

Hey guys,

Just a quick one, I have plain text links at the moment, but want to turn them into a navbar type thing, where they are in a box with a coloured background, im guessing it's gotta be done with CSS, but i dont want to go digging through my cupboards for my web design books.

Cheers,

Scott.

**DJ-Zep** · 04-30-2007, 12:55 PM

Would you be able to find a website that has an example or make one in paint just so I could adjust the sizes?

**scottydont2841** · 04-30-2007, 01:19 PM

Well its going to be for my website, www.scottearl.co.uk, if you click enter the main site, it's for the links at the top of the page, cheers DJ Zep.

**DJ-Zep** · 04-30-2007, 06:40 PM

It can be done with a table.

One such as this:

Code:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
	<td style="background-color: BACKGROUND COLOR HERE; text-align: center;">Nav Links go here
	</td>
  </tr>
</table>

**Fox** · 04-30-2007, 06:46 PM

Yeah, Id say the table would be much easier to implement than adding an entire CSS section to your file.

Just make sure to get rid of the borders if you don't want them- I think they're automatically displayed unless you specifically set border=0.

**scottydont2841** · 05-01-2007, 12:19 AM

Ok guys, cheers.

**DJ-Zep** · 05-01-2007, 01:14 PM

Quote:

Originally Posted by Fox

Yeah, Id say the table would be much easier to implement than adding an entire CSS section to your file.

Just make sure to get rid of the borders if you don't want them- I think they're automatically displayed unless you specifically set border=0.

I always forget that one.

**scottydont2841** · 05-03-2007, 12:44 AM

I actually think it looks a bit better with the boarders.

**DJ-Zep** · 05-03-2007, 04:56 PM

It's your decision, scotty. W/e you think looks better you should use. If you want some help customizing your border, let me know and I'll help out with it.

**scottydont2841** · 05-04-2007, 01:21 PM

Thanks for the offer Zep, might take you up on it, when ive got time to mess around with HTML.

04-30-2007, 05:27 AM	#1 (permalink)
scottydont2841 TSF Enthusiast Join Date: Aug 2005 Location: Bristol, England, UK. Posts: 1,228 OS: Vista Home Premium My System	Turning HTML text into NavBar with CSS Hey guys, Just a quick one, I have plain text links at the moment, but want to turn them into a navbar type thing, where they are in a box with a coloured background, im guessing it's gotta be done with CSS, but i dont want to go digging through my cupboards for my web design books. Cheers, Scott. __________________ Please use the search function of the website before asking questions, as we may already have answered them. Everest FREE Edition AVG FREE Edition

04-30-2007, 12:55 PM	#2 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Re: Turning HTML text into NavBar with CSS Would you be able to find a website that has an example or make one in paint just so I could adjust the sizes? __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

04-30-2007, 01:19 PM	#3 (permalink)
scottydont2841 TSF Enthusiast Join Date: Aug 2005 Location: Bristol, England, UK. Posts: 1,228 OS: Vista Home Premium My System	Re: Turning HTML text into NavBar with CSS Well its going to be for my website, www.scottearl.co.uk, if you click enter the main site, it's for the links at the top of the page, cheers DJ Zep. __________________ Please use the search function of the website before asking questions, as we may already have answered them. Everest FREE Edition AVG FREE Edition

04-30-2007, 06:40 PM	#4 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Re: Turning HTML text into NavBar with CSS It can be done with a table. One such as this: Code: <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: BACKGROUND COLOR HERE; text-align: center;">Nav Links go here </td> </tr> </table> __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

04-30-2007, 06:46 PM	#5 (permalink)
Fox TSF Enthusiast Join Date: Sep 2002 Location: NJ Posts: 7,752 OS: XP Pro, CentOS My System	Re: Turning HTML text into NavBar with CSS Yeah, Id say the table would be much easier to implement than adding an entire CSS section to your file. Just make sure to get rid of the borders if you don't want them- I think they're automatically displayed unless you specifically set border=0. __________________ Antec Neo Power 500W, ABIT IP35-E, Intel E2180@2.66Ghz, Corsair XMS2 2x1GB DDR2-800, PNY 8800GT, 320GB Seagate * lazy college student alert *- If I've inadvertently ignored a thread, please Let me know about it Have I helped you solve your problem? Donate to Techsupportforums Klart Skepp!

05-01-2007, 12:19 AM	#6 (permalink)
scottydont2841 TSF Enthusiast Join Date: Aug 2005 Location: Bristol, England, UK. Posts: 1,228 OS: Vista Home Premium My System	Re: Turning HTML text into NavBar with CSS Ok guys, cheers. __________________ Please use the search function of the website before asking questions, as we may already have answered them. Everest FREE Edition AVG FREE Edition

05-03-2007, 12:44 AM	#8 (permalink)
scottydont2841 TSF Enthusiast Join Date: Aug 2005 Location: Bristol, England, UK. Posts: 1,228 OS: Vista Home Premium My System	Re: Turning HTML text into NavBar with CSS I actually think it looks a bit better with the boarders. __________________ Please use the search function of the website before asking questions, as we may already have answered them. Everest FREE Edition AVG FREE Edition

05-03-2007, 04:56 PM	#9 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Re: Turning HTML text into NavBar with CSS It's your decision, scotty. W/e you think looks better you should use. If you want some help customizing your border, let me know and I'll help out with it. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

05-04-2007, 01:21 PM	#10 (permalink)
scottydont2841 TSF Enthusiast Join Date: Aug 2005 Location: Bristol, England, UK. Posts: 1,228 OS: Vista Home Premium My System	Re: Turning HTML text into NavBar with CSS Thanks for the offer Zep, might take you up on it, when ive got time to mess around with HTML. __________________ Please use the search function of the website before asking questions, as we may already have answered them. Everest FREE Edition AVG FREE Edition