CODEWITHSUNDEEP
csshtml
Austin Bunker
Austin Bunker

Reputation: 53

Setting one Section of HTML as a Different Background Color

I have a top dropdown navigation on my website, that I want the background color to be different on. The color of my website background is a grey, while I would like only the tab part to be (ex.) white.

The CSS for my background color is as follows:

body{
    background-color:#D0D0D0; margin-right:10%; margin-left:10%; margin-top:0%;
}

I would like my dropdown navigation to have a white background while keeping the rest of the page the same. My dropdown is in a header.php file, then referenced in.

My navigation HTML is as follows:

<center><nav>
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/arcade">Arcade</a>
        <ul>
            <li><a href="/arcade/action">Action</a></li>
            <li><a href="/arcade/arcade">Arcade</a></li>
            <li><a href="/arcade/puzzle">Puzzle</a></li>
            <li><a href="/arcade/vehicle">Vehicle</a></li>
            <li><a href="/arcade/violence">Violence</a></li>
            <li><a href="/arcade/defense">Defense</a></li>
            <li><a href="/arcade/rpg">RPG</a></li>
        </ul>
    </li>
    <li><a href="">Watch</a>
        <ul>
            <li><a href="/watch/tv">TV Shows</a></li>
            <li><a href="/watch/movies">Movies</a></li>
        </ul>
    </li>
    <li><a href="">Extras</a>
        <ul>
            <li><a href="/reviews">Reviews</a></li>
            <li><a href="/news">Updates</a></li>
        </ul>
    </li>
    <li><a href="/support">Support</a></li>
</ul>

My CSS, of course, styles this header.php.

This is my website.

Thanks in advance!

Upvotes: 1

Views: 31314

Answers (3)

Jacob Raccuia
Jacob Raccuia

Reputation: 1686

I'm pretty sure you just need to set the nav background as white..

in your css:

nav { background-color:#fff; }

Extending the full width: can also be done with HTML resdesign

HTML

<body>
    <nav>
         <!-- nav code -->
    </nav>
    <div id="container">
         <!-- all of the rest of your code -->
    </div>
</body>

CSS

body { }
nav { background-color:#fff; }

#container { 
    background-color:#D0D0D0;
    margin:0px 10%; 
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240998

Change the CSS to this:

nav {
    background-color: #fff;
    margin: 0px -12.5%;
}

Gives the following result:

enter image description here

If you're not happy with this solution, you are going to need to modify the HTML.

Upvotes: 1

Getu.ch
Getu.ch

Reputation: 94

Put an id on the nav tag and style the menu over css.

Html:

<nav id='nav'> 
    // menu
</nav>

Css:

#nav {
    background-color: 'white';
}

Upvotes: 0

Related Questions