bgcolor for tabs menu

**philleire** · 04-11-2012 07:05 AM

Hi, I'm working on a 1st year college assignment, with a hiking / camping theme.

Because it's a nature site, I'm not using any borders to speak of. However without borders the site would look very unfinished.

So I have Black background header, single cell table 'float right' (images with links running down the page) to create a right border.

I want to run a 6 tab menu down the left side but with alternating red and black colours (this creates an artificial border and matches my background image).

What I can't do is set the background colours on the html page.

Thanks in advance for your help ... phill

Code below

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>The Dingle Way</title>
<link rel="stylesheet" href="newindex.css">
</head>

<body>


<div id="container">
<div id="header">
<h1>the dingle way</h1>
</div>



<div id="navigation">

<ul>
<li><a href="Home.html">H o m e</a></li>
<li><a href="10 day.html">10 d a y</a></li>
<li><a href="Safety.html">S a f ety</a></li>
<li><a href="Equipment.html">E quipment</a></li>
<li><a href="Other.html">O t her</a></li>
<li><a href="Gallery.html">G a l lery</a></li>
</ul>

</div>

<div id="content">
Main Content
</div>



<div id="rightBar">
<table width=40 height=30>
<tr>
<td><img src="phill222.jpg">
</td>
</tr>

<tr>
<td><img src="phill222.jpg">
</td>
</tr>

<tr>
<td><img src="phill222.jpg">
</td>
</tr>
<tr>
<td><img src="phill222.jpg">
</td>
</tr>

<tr>
<td><img src="phill222.jpg">
</td>
</tr>

<tr>
<td><img src="phill222.jpg">
</td>
</tr>
</table>
</div>

<div id="cleardiv"></div>
</div>

</div>
<div id="footer">
<ul>
<li><a href="#">Footer (disclaimer)</a></li>
<li><a href="#">Copyright ©the dingle way</a></li>
<ul>
</div>
</body>
</html>
.................................................................................................... ..
css
{
margin: 0;
padding: 0;
font-size: 95%;
text: justify;
font-family: georgia, times, "times new roman", serif;
color: #000;
margin:auto;
width: 75%;
background: #ffffff;
}
a:link
{
color:#036;
}
a:visited
{
color: #066;
}
a:hover ,a:active
#container
{
margin:auto;
width: 760px;
background: #ffffff;
}
div#header h1
{
color: #fff;
background-color: #000;
border-bottom: 11px solid #000;
margin: 0;
padding: .3em .3em .3em .5em;
font-size: 3.2em;
font-weight: normal;
}
div#container
{
background-image: url('sandy_beach.jpg');
background-repeat: no-repeat;
}
div#navigation
{
float: left;
width: 20px;
padding-top: 0em;
padding-left: 0em;
}
div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 20;
}
div#navigation ul li
{
margin-top: 0px;
}
div#navigation ul li a
{
display: block;
width: 20px;
height: 100px;
padding: 0px 8px 0px 10px;
text-decoration: none;
color: #000;
background-color: #ff0000;
}
#navigation ul li a:hover
{
color: #fff;
background-color: #ccc;
background-image: url(bg/nav_base2.jpg);
background-repeat: repeat-y;
}
#content
{
float:left;
width:450px;
background-color: #cdcde6;
}
#rightBar {
float:right;
width: 104px;
background: #000000;
}
#cleardiv
{
clear: both;
height: 1em;
}
div#footer
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: right;
}
div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
div#footer li
{
display: inline;
margin-right: 1em;
}

**s5nelson** · 04-11-2012 05:03 PM

I think I understand what you're saying. If I do, then just swap:

HTML Code:

background-color: #ff0000;

to:

HTML Code:

background: #ff0000;

**philleire** · 04-12-2012 06:11 AM

I think I need to have the background colours here (on the html page)


<div id="navigation">

<ul>
<li><a href="Home.html">H o m e</a></li>
<li><a href="10 day.html">10 d a y</a></li>
<li><a href="Safety.html">S a f ety</a></li>
<li><a href="Equipment.html">E quipment</a></li>
<li><a href="Other.html">O t her</a></li>
<li><a href="Gallery.html">G a l lery</a></li>
</ul>

</div>

<div id="content">
Main Content
</div>


and have
bazckground color: none

in the css page ... however ... If I can get that working (I haven't yet) ... what effect will that have on the mouse over effect??

This is for college so I have to throw in as much as possible without over complicating the issue (it's called grovelling for as many marks as possible).

**philleire** · 04-12-2012 06:13 AM

We have to have a design phase ... and I have powerpoint images for my 'story board' ... but there's nowhere to upload them to.

That would show exactly what I'm trying to achieve

Thread: bgcolor for tabs menu

Thread Tools

Display

bgcolor for tabs menu

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions