www.webdeveloper.com
Results 1 to 4 of 4

Thread: bgcolor for tabs menu

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    bgcolor for tabs menu

    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>

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

    <!---- navigation --->
    <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>
    <!---- end navigation --->

    <!---- right bar --->
    <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>
    <!---- end right bar --->
    </div>
    <div id="footer">
    <ul>
    <li><a href="#">Footer (disclaimer)</a></li>
    <li><a href="#">Copyright &copy;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;
    }

  2. #2
    Join Date
    Apr 2012
    Posts
    34
    I think I understand what you're saying. If I do, then just swap:

    HTML Code:
    background-color: #ff0000;
    to:
    HTML Code:
    background: #ff0000;

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    I think I need to have the background colours here (on the html page)

    <!---- navigation --->
    <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>
    <!---- end navigation --->

    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).

  4. #4
    Join Date
    Apr 2012
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles