how to make background 100% on a top menu
Tags: html,css,html5,css3
Problem :
iam trying to do a top menu with the width of the background color to 100%. and keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: http://jsfiddle.net/NnCVv/246/
html:
<div id="wrap">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</div>
CSS
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Solution :
Try this
<!DOCTYPE html>
<html>
<head>
<style>
*
{
padding: 0px;
margin: 0px;
}
#banner
{
width:100%;
background-color:green;
}
#wrap1
{
background-color:black;
width: 960px;
}
#wrap
{
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="banner">
<div id="wrap1">
<ul id="wrap">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS Howto..
If you use a simple line break or \n , you have to set white-space: pre; to preserve line breaks and white space. Or you may transform each ...
I don't think this can be handled with just css, but if you are looking to add some JS/jQuery to accomplish the task then I guess this thread should help...
You need to get rid of the "navbar-inverse" class. Here is a fiddle: http://www.bootply.com/124086 <div id="navbar" class="navbar navbar-fixed-top"> <nav> <ul class="nav nav-stacked" id="menu-bar"> <li><img src="#"></li> <li><a href="#">Home</a></li> <li><a...
I think the problem is the height. Try removing the 50% height and instead add padding of 50% .container > section > .content > .img{ display: block; width:100%; padding: 0...
:before is an pseudo element and cannot be accessed in the DOM. Instead have a span or div with those style and use it's click event. Note: Just make sure...
I assume that you want to only highlight the last search and not store the ones from before. With this assumption, you can store the old value if it is...
sorry guys I found the answer with a different/similar question UL list style not applying I don't know how to close this post. or leave it....
Your placeholder selectors need to be more specific like below. .buttonToolbar input { color: Blue; } .buttonToolbar input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-style: italic; color: GrayText; } .buttonToolbar...
Live demo http://tinkerbin.com/RrRtqfVf Do this one HTML <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> Css ul{ list-style:none; } li{ position:relative;...
Not to prove a point, but to answer your question - this is possible in CSS without JS: Example In short: we set a black background color for text color...
float:right Generally speaking, unless your css has explicitly made a style class for it, such as Bootstrap, you may add right in your class or pull-right <span class="mySpan">something</span> .mySpan{ float:right}...
list-style-position is the CSS attribute you want, in particular setting it to "outside" - http://www.w3.org/TR/CSS2/generate.html#list-style The w3 descriptions are confusing for the outside but the key is that inside places...
You can concatenate multiple class selectors in CSS to translate your XPath and, and then use pseudo-class :not() to translate XPath not(), something like this : div.cpthead.cptbulkhead.loaded:not(.overloaded) ...
You need html,body{ height:100%; margin:0; padding:0; } * { /*Or at least html, body and #messages*/ box-sizing: border-box; } #messages{ width: 50%; max-height: 100%; padding:20px; border: 1px solid black; border-radius:...
Try Firefox Extension Dust-Me or Chrome Developer Tools that called Audits. Inspect -> Audits tab -> Run -> Remove unused CSS rules. or Try this site. also you can refer...
You could use this inview plugin: https://remysharp.com/2009/01/26/element-in-view-event-plugin Then you could start the animation as soon as the section where the animation is supposed to appear, is visible.
Looking to your second image, I've made a Fiddle Example to better illustrate how to achieve your end goal: See the Fiddle Example! HTML STRUCTURE <div id="ranks_content" class="clearfix"> ... <div>...
You cant do that, however you can pass in 2 variables, one for the class and another for the color to the mixin.