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..
The JS won't render in the quotes as that is just a string. Instead do something like: <script type="text/javascript"> document.write("<header id=\""); showClass(); document.write("\">"); </script> Personally, I'd prefer to add the...
This is very simple. All you need to do is either put this in the <head>: <style type="text/css"> .logo { background: #FFF url(<?php echo $variable_holding_img_url; ?>); } </style> Or you...
You shouldn't be putting the input field within the label. Since the contents of the label appear after the checkbox, just make your HTML this way: <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> <LABEL...
That's a great idea! You will probably have to learn all that languages and depending on the things you want php will be included... My advice: if you are new...
all you need to add is this body.scroll-1 .header { transition: background-color 0s; } ...
I figured it out. The main problem is that the ASP.NET control renders the DropDown options as an element while Bootstrap expects an element for its DropDown list. I rendered...
It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about...
Borders are placed around an element's dimensions, in your case, the body tag covers the entire window. If you wanted them to be closer you can add borders to another...
If you paste everything from "data: ..." through the = into the Firefox address bar it will draw it for you. Or put something like this into your HTML: <img...
I've managed to solve this myself: If you want to scale an image based on one side in word using HTML then this code will do it: $newheight = 50;...
Thank @Christoph and @Carine, i override the chose disable class by giving inline css as .chosen-disabled { opacity: 1 !important; } now its working fine, thanks once again for your...
add an img in your html with id="background". In your css write this: #background { width: 100%; position: absolute; top: 0; left: 0; } Demo: http://jsfiddle.net/XW9Pz/1/...
HIDING PARENT ELEMENT based on its direct descendant //Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g.,...
Here is what they use on LinkedIn: #nav-utility li:before{content:'\00B7';padding-right:5px;} That is, they are using CSS to add an extra character before each list item. '\00B7' is a middle dot in...
You can get as close as possible with this, given you can't change the markup: table tr:last td { border-bottom: solid 1px blue; } If you're generating multiple tables you...
Remove the colon after a in your CSS, it is not a valid selector. You can target a or a:link a:visited a:hover a:active but not a: .transback { background: rgba(7,...
Correct the height typo in your CSS, and make body a flexbox: html, body { height: 100%; display: flex; flex-direction: column; //children should go down the page } Then add...
You can't using CSS < Version 3 only. When you set the width/height on an element it is relative to it's container. Update, as it's been quite some time since...
I don't see it is italic either, because you don't add that style in the css. And the spacing is caused because you have display: inline-block on the span. Maybe...
Here is one solution that may work for you: Demo Fiddle I changed up your code a bit. Using the center tag is frowned upon, also it looks like the...
Depends on what type of shadow do you want to achieve Dynamically generate the border and add the shadow p { line-height:4em; position: relative; } p::after { content: ' ';...
When you add style to your HTML code, or attach an external stylesheet using <link> in the <head> segment of your markup, the browser loads that resource for you. CSS...
I have fixed the issue: sub-menu width same as main-menu width Try this.. http://codepen.io/bala5394/pen/aJszj...
See the :first-child and :last-child pseudo-classes: th:first-child { text-align: left; } th:last-child { text-align: right; } ...
A fixed-bottom Navbar seems right. There's even a Bootstrap Example that demonstrates this.
Try this: div.zoomed { zoom: 0.75; -moz-transform: scale(0.75); } Should work in: Firefox 3.5, IE 5.5+, Opera, Safari 4, Chrome Edit: You should also add -webkit-transform: scale(0.75); for Chrome and...
You can't add a pseudo-class on an element using javascript in the same way that you can't add a pseudo-class in an inline style='' attribute. What you can do is...
Just do this DEMO - 1 (border top or bottom) .menu { width:30px; height:20px; position:relative; display:inline-block; border-top:4px solid black; } .menu:after, .menu:before { content: ''; width: 100%; height:4px; background-color:#000; position:absolute;...
I know this answer is extremely late, but it appears the key to your issue would be to use: white-space: nowrap; inside of your span, and get rid of any...
It seems i had a few conceptual problems with the code i had I needed to take the containing divs top into consideration had various variable errors, i.e top =...