100% width not working in css drop down menu

Submitted by udayancht on Thu, 2014-07-31 09:57 

#navcontainer{
background:#222;
width:100%;
}
#navcontainer ul{
text-align:center;
margin:0;
padding:0;
list-style:none;
width:100%;
}
#navcontainer ul li{
display:inline;
position:relative;
}
#navcontainer ul li a{
display:inline-block;
color:#fff;
font-size:20px;
padding:20px 30px;
}
#navcontainer ul li a:hover{
background:#999;
}
#navcontainer ul ul{
position:absolute;
left:0;
top:46px;
z-index:10;
width:100%;
display:none;
background:red;
}
#navcontainer ul ul li{
float:none;
}
#navcontainer ul ul li a{
text-align:left;
}

Full width image w/ divs over 960px wide responsive content

Submitted by hightime on Fri, 2013-11-22 19:27

Hi everyone,

I have just finished the design of one new project, and are now about to start programing it into html/css but can't figure out, how to do it. For a better understanding, here a quick sketch:

The content should be 960px wide and responsive, which in theory shouldn't be a problem to program. However, I am looking to get one image which is 100% wide, and this image should be covered by two DIVs with each an opacity of 50%. Each of these two DIVs will contain some text and a button.

Sticky footer conflit

Submitted by legendofgames on Sat, 2013-07-13 05:41

http://css-tricks.com/snippets/css/sticky-footer/ Here is the tutorial I'm following. But my content is absolute positioned, which is causing a conflict, and the footer is not going down at the very bottom of the page. So how can I solve this?

Margin: auto property

Submitted by Nilzone on Tue, 2013-06-11 10:58 

<header id="main">
    <a href="#" id="exit"></a>
    <a href="http://www.reddit.com/" id="reddit"></a>
    <a href="http://www.stackoverflow.com/" id="stackoverflow"></a>
    <a href="http://www.facebook.com/" id="facebook"></a>
    <a href="#" id="title"></a> 
</header>

#main{
	height: 220px;
	width: auto;
	border: 2px #000000 solid;
}
 
#exit{
	float: left;
	background: url(<a href="http://i.imgur.com/65RgzfN.jpg" rel="nofollow">http://i.imgur.com/65RgzfN.jpg</a>) no-repeat;
	padding: 30px;
	opacity: .5;
}
 
#title{
	float: left;
	background: url(<a href="http://i.imgur.com/m9fvwoJ.jpg" rel="nofollow">http://i.imgur.com/m9fvwoJ.jpg</a>) no-repeat;
	padding: 90px 145px;
	margin: 20px auto;
	border: 2px #000000 solid;
 
 
}
 
#reddit{
	float: right;
	background: url(<a href="http://i.imgur.com/WYsK3pa.jpg" rel="nofollow">http://i.imgur.com/WYsK3pa.jpg</a>) no-repeat;
	padding: 30px;
	opacity: .5;
}
 
#stackoverflow{
	float: right;
	background: url(<a href="http://i.imgur.com/C86iV4B.jpg" rel="nofollow">http://i.imgur.com/C86iV4B.jpg</a>) no-repeat;
	padding: 30px;
	opacity: .5;
}
 
#facebook{
	float: right;
	padding-left: 10px;
	background: url(<a href="http://i.imgur.com/PDb01S0.jpg" rel="nofollow">http://i.imgur.com/PDb01S0.jpg</a>) no-repeat;
	padding: 30px 35px 30px;
	opacity: .5;
}

I've set borders on both ID just to make it easier to visualize. I have no idea as to why my title image is not centered. From the code above it looks like this:
Skjermbilde 2013-06-11 kl. 12.55.48.png

My Code for a Content Slider

Submitted by Tampa Jim on Sat, 2012-05-19 18:07

Hey guys,
I work for this big company and have been tasked to create a content slider. I have all this wonderful code and my problem I can't figure out where the code goes!

If somebody could help with some troublshooting or steps, it would be greatly apperciated.

Smile HTML:

<div id="slideshow" class="slider"> 												
   <div> 
      <img class="fl" title="My NetWork" src='http://.../images/contentslider/ContentImage_90x90_01.jpg' />

Syndicate content