I am trying to extend my header to cover the full page. http://dev.webgrowth.biz/ and I want it look like this one http://www.webgrowth.biz/ I have been trying everything for hours now. any help would be highly appreciated.
Live Demo
You can achieve the effect using a container element, then just set the containing elements margin to 0 auto and it will be centered.
Markup
<div id="header">
<div id="headerContent">
Header text
</div>
</div>
CSS
#header{
width:100%;
background: url(yourimage);
}
#headerContent{
margin: 0 auto; width: 960px;
}
Just set the header width to be 100vw to make it full screen width
and set the header height to be 100vh to make it full screen height
#header {
margin: 0;
padding: 0;
width: 100%;
background: xxxx;
}
#header #content {
margin: 0px auto;
width: 800px; /* or whatever */
}
<div id="header">
<div id="content">
stuff here
</div>
</div>
Set the max-width:1250px; that is currently on your body on your #container. This way your header will be 100% of his parent (body) :)
The best way to make the header full screen is set height to be 100vh
#header{
height: 100vh;
}
min-height: 100%;
position: relative;
set the body max-width:110%;
and the make the width on the header 110% it will leave a small margin on left that you can fiX with margin-left: -8px;
margin-top: -10px;
Remove the max-width from the body, and put it to the #container.
So, instead of:
body {
max-width:1250px;
}
You should have:
#container {
max-width:1250px;
}
just do
#RandomDiv{
width: 100%;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<ul class="menu">
<li>My Dashboard
<ul>
<li>Learn</li>
<li>Teach</li>
<li>My Library</li>
</ul>
</li>
<li>Likes
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Views
<ul>
<li>Documents</li>
<li>Messages</li>
<li>Videos</li>
</ul>
</li>
<li>account
<ul>
<li>Sign In</li>
<li>Register</li>
<li>Deactivate</li>
</ul>
</li>
<li>Uploads
<ul>
<li>Pictures</li>
<li>Audio</li>
<li>Videos</li>
</ul>
</li>
<li>Videos
<ul>
<li>Add</li>
<li>Delete</li>
</ul>
</li>
<li>Documents
<ul>
<li>Upload</li>
<li>Download</li>
</ul>
</li>
</ul>
</body>
</html>
css:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body{
max-width:110%;
margin-left:0;
}
.menu {
height: 40px;
width:110%;
margin-left:-4px;
margin-top:-10px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
demo here
try also resizing the browser tab to see it in action
Related
I have a problem where images are appearing over my navigation menu. I have a fixed nav menu that stays at the top of the window, and 8 images that are set to 0.7 opacity lower on the page. The image change to 1.0 opacity when you hover, If you scroll down the images above the nav menu, unless i hover over them, then they appear under the nav like they should.
I will show you my code for the nav, and one of the 8 images, maybe someone can help. this is my first time posting, I hope everything is posted correctly.
Nav:
<div id="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>Folio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Images:
<div id="bg2">
<div class="content-title">
<h2>Folio</h2>
<p> This is what I do </p>
<div class="content-area">
<div class="folio-item">
<img src="images/folio/folio1.png" alt="some_text">
</div>
</div> <!-- content-area close-->
</div> <!-- content-title close-->
Relvent Style:
#nav-container {
width:100%;
height:50px;
box-shadow: 0px 1px 50px #464646;
position:fixed;
top:0px;
background-image: url(images/bggrey.png);
}
#nav {
font-size: 14px;
text-align: center;
line-height: 50px;
}
#nav li{
text-decoration: none;
text-align: center;
display: inline;
padding: 10px;
margin-left: 40px;
margin-right: 40px;
}
#nav a{
text-decoration: none;
color: rgb(250,250,250);
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#nav a:visited{
text-decoration: none;
color: rgb(250,250,250);
}
#nav a:hover{
text-decoration: none;
color: rgb(250,250,250);
opacity: 0.7;
}
#nav a:active{
text-decoration: none;
color: rgb(250,250,250);
}
#bg1 {
background-image: url(images/bubble.png);
background-repeat:no-repeat;
background-position: center;
height: 800px;
margin: -1;
}
.content-title {
width: 960px;
margin: auto;
font-size: 20px;
color: white;
text-align: center;
padding-top: 70px;
}
.content-title p{
font-size: 14px;
}
.content-area {
border: 1px dashed black;
height: 500px;
width: 960px;
margin: auto;
margin-top: 50px;
font-size: 0px;
}
.folio-item {
float: left;
opacity: 0.7;
}
.folio-item:hover {
opacity: 1.0;
transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
-webkit-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
}
If I understand in the right way you want your #nav-container always overlapping the images; then you need the property z-index to manage the level of the elements, try adding this on the CSS:
#nav-container {
z-index:1;
}
Hi my problem is that I actually can't center my div!
it's always stuck on the left. I already tried the margin-left: auto; and margin-right: auto;, but it doen't seems to work.
Here's the HTML:
<ul class="menu">
<li>Acceuil</li>
<li>LoL
<ul>
<li><a><span class="headlist">League of Legends</a></li>
<li>Funny games</li>
<li>Favorite builds</li>
<li>...</li>
</ul>
</li>
<li>SSF2
<ul>
<li><a><span class="headlist">Super Smash Flash 2</a>
<li>Intro</li>
<li>Events</li>
<li>Challenges</li>
</ul>
</li>
<li>RotMG</li>
<li>GMod</li>
<li>Contact</li>
</ul>
<div>
<p>
HUEHUEHUEHUEHUEHUEHUE
</p>
</div>
And here's the css:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* div */
div
{
text-align: center;
border-radius: 0 0 5px 5px;
width: 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(140,0,0,0.7);
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
color: #f3f3f3;
font-family: Helvetica, Arial, sans-serif;
display: block;
position: absolute;
top: 38px;
left: 25%;
z-index: -50;
margin-left: auto;
margin-right: auto;
}
/* Reset de la liste (aucun style, etc.) */
.menu,
.menu ul,
.menu li,
.menu a,
.menu p
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu
{
height: 40px;
width: 610px; /* Longueur du menu */
background: #760101; /* couleur du gradient */
background: -moz-linear-gradient(#D20202, #760101);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #760101),color-stop(1, #D20202));
background: -webkit-linear-gradient(#D20202, #760101);
background: -o-linear-gradient(#D20202, #760101);
background: -ms-linear-gradient(#D20202, #760101);
background: linear-gradient(#D20202, #760101);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 13px;
display: block;
margin-left: auto;
margin-right: auto;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 7px 0 40px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #4B0101;
border-right: 1px solid #5C0101;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #FF9900; }
/* Sub-menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #D20202;
background: -moz-linear-gradient(#760101, #D20202);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D20202),color-stop(1, #760101));
background: -webkit-linear-gradient(#760101, #D20202);
background: -o-linear-gradient(#760101, #D20202);
background: -ms-linear-gradient(#760101, #D20202);
background: linear-gradient(#760101, #D20202);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 145px;
padding: 4px 0 4px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #4B0101;
}
.menu ul li:last-child a {
border: none;
}
.LoL
{
background: url(LoLicon.png) no-repeat 6px center;
}
.home
{
background: url(home.png) no-repeat 6px center;
}
.ssf2
{
background: url(SSF2.png) no-repeat 6px center;
}
.contact
{
background: url(contact.png) no-repeat 6px center;
}
.headlist
{
color:#ff9900;
}
.menu ul li:first-child a {
border-bottom: 3px solid #4B0101;
}
It's been 2 hours I'm searching so please help! :O
Margin: 0 auto; will not work with absolute positioning. Try removing position:absolute from the div and then it should work.
Here is the fiddle
If it must be absolutely positioned (thus meaning margin: auto won't work), then you can change the CSS to left: 50% and add margin-left: -295px;.
This will move the <div> 50% from the left, and then negatively bring it back by half of it's width, this leaving it in the middle.
http://jsbin.com/iJESEwe/1/edit?html,css,output
I am trying to design a fixed drop down menu that slides and then sits under a fixed header for my website when it's being viewed by smaller view ports. I must not be understanding something correctly because despite setting position properly and using a z-index lower than its parent on the nav, it still does not work correctly. On drop down it slides under the menu button I have created, but over the header and then stays above the header. Here is my code:
HTML:
<header>
<div id="menu-button" class="up">menu</div>
<nav role="primary" class="hide">
<ul>
<li>foobar</li>
<li>foobar</li>
<li>foobar</li>
<li>foobar</li>
<li>foobar</li>
<li>foobar</li>
</ul>
</nav>
</header>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
header {
display: block;
float: left;
width: 100%;
height: 50px;
background-color: hsla(0, 0%, 20%, 1);
box-shadow: 0px 2px 8px #222;
position: fixed;
top: 0;
z-index: 99;
}
#menu-button {
display: block;
float: left;
background-color: hsla(0, 0%, 50%, 1);
color: #fff;
border: 2px solid #222;
border-radius: 6px;
padding: .25em .5em;
margin-left: 10px;
margin-top: 10px;
cursor: pointer;
}
.up {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), hsla(0, 0%, 0%, .2));
}
.down {
background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%, 100%, .2));
}
nav ul {
list-style:none;
width: 100%;
position: fixed;
z-index: -1;
transition: all .6s ease;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
}
.hide ul {
top: -500px;
}
.reveal ul {
top: 50px;
}
nav ul li a, nav ul li a:visited {
display: block;
float: left;
width: 50%;
background-color: hsla(0, 0%, 35%, 1);
text-decoration: none;
text-align: center;
color: #fff;
padding: 1em;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transition: .4s all;
-webkit-transition: .4s all;
-moz-transition: .4s all;
-o-transition: .4s all;
}
nav ul li:nth-child(even) a {
border-right: none;
}
nav ul li:hover a {
background-color: hsla(0, 0%, 50%, 1);
}
jQuery:
$('#menu-button').click(function () {
$(this).toggleClass('down');
$('nav').toggleClass('reveal');
});
Here's the jsfiddle I made for it:
http://jsfiddle.net/kyleshevlin/yaJyK/6/
One way to do this and keep your fixed header requirement is to add a wrapper around the menu button:
<div class='menu-wrap'>
<div id="menu-button" class="up">menu</div>
</div>
<nav role="primary" class="hide">
…
</nav>
Make the menu wrapper the full width/height of the menubar:
.menu-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue; /* just to make it obvious… */
}
Demo fiddle
You cannot have the menu (that you want with a lower z-index) inside the fixed element (which has a bigger z-index).
You have to separate those two, make both of them fixed and put your content below in an absolute positionned container with a top = header height (or a margin-top)
Then both the header and the menu will stay in place, and you can set each z-index independently (like this)
header {
display: block;
width: 100%;
height: 50px;
background-color: hsla(0, 0%, 20%, 1);
box-shadow: 0px 2px 8px #222;
position: fixed;
top: 0;
z-index:1;
}
nav{
position:fixed;
transition: all .6s ease;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
width:100%;
}
<header>
<div id="menu-button" class="up">menu</div>
</header>
<nav role="primary" class="hide">
<ul>
<li>foobar</li>
...
Remove the z-index on the parent(header) and add a position:relative.
I had an inner <div> and an outer <div>.
My inner div's z-index was not working because the outer div did not have a z-index defined.
.inner {z-index:999}
.outer {z-index:111} /*<-- explicitly defined*/
I'm Having Trouble with my Web Page: There is no bottom padding and it makes my website look weird. I have tried changing the body, and html to margin-bottom: 100px but it does not seem to work. This always seems to happen when I add outsourced navigation bars.
CSS
#charset "utf-8";
/* CSS Document */
html, body { margin: 0; padding:0px;}
body { margin: 5px; background: #f2f2f2; }
ul.menu { margin: 50px auto 0 auto; }
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu {
height: 40px;
width: 905px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
border:#8fde62 medium solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float:left;
display: block;
height: 40px;
}
/* Links */
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
#wrapper{
width:900px;
height:auto;
margin: 50px auto 0 auto;
}
#xboxcard{
width:300px;
height:500px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
}
#rightcontent{
width:575px;
height:342px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
float:right;
padding: 10px 10px 10px 10px;
position:absolute;
top:150px;
left:495px;
text-align:center;
color:#FFF;
}
#step1{
width:245px;
height:250px;
position:absolute;
top:550px;
left:180px;
text-align:center;
color:#FFF;
padding: 10px 10px 10px 10px;
background-color:#4c4e5a;
border:#8fde62 medium solid;
}
HTML
<body>
<ul class="menu">
<li>Home</li>
<li>Contact</li>
<li>Claim</li>
<li>Proof</li>
</ul> <!-- end .menu -->
<div id="wrapper">
<img src="#" alt="#" height="342" width="245" style=" background-color:#4c4e5a;
border:#8fde62 medium solid;
border-radius:5px;
padding:10px 10px 10px 10px;
" />
<div id="rightcontent">
<h1>This is Some right content!</h1>
</div>
<div id="step1">
</div>
</div>
</body>
</html>
try to add this your css...
#wrapper {
margin-bottom:50px;
}
or however many pixels you want the bottom margin to have
Did you try adding padding to the body element?
body{
padding-bottom: 100px;
}
Hey I setup a jsfiddle for your code to take a look, I tweaked some things, check it out and see what you find useful: http://jsfiddle.net/cVLqu/
Biggest recommendation here is:
position: relative;
on the wrapper and the boxes inside it, that way they expand the wrapper instead of floating around freely.
Also check out this post on css-tricks.com, I found it really helpful:
http://css-tricks.com/dont-overthink-it-grids/
I'm working on getting my site up and running, and I've run into a problem with my drop-down navigation menu in Firefox.
I have been using the site in Chrome and it works fine, it is a simple setup of nested lists for the selections. The options appear, but they are floating to the left instead of directly below their appropriate section.
CSS:
/*sub-menu navigation*/
nav.primary ul ul
{
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
z-index: 999;
background: #111111;
height: 0px;
overflow: hidden;
min-width: 100%;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
nav.primary ul li:hover ul
{
opacity: 10;
filter: alpha(opacity=100);
height: auto;
overflow: auto;
}
nav.primary ul ul li
{
float: none;
display: list-item;
border-bottom: 1px solid #747474;
}
nav.primary ul ul li a
{
display: block;
margin-left: 10px;
line-height: 40px;
font-size: 0.8em;
/*text-transform: none;*/
font-family: 'LibbyRegular', Helvetica, Arial, sans-serif;
}
Menu HTML
<ul>
<li>independent work
<ul>
<li>>> big and ugly</li>
<li>>> iceworld</li>
<li>>> gordon's got game</li>
</ul>
</li>
<li>team projects
<ul>
<li>>> blastrobots</li>
<li>>> ruined</li>
</ul>
</li>
<li>scripting
<ul>
<li>>> hero man (C#)</li>
<li>>> CloneOut (lua)</li>
<li>>> shotgun (unrealscript)</li>
</ul>
</li>
<li>resume</li>
</ul>
The site is http://lvsherman.com if you would like to test it.
Try adding to your inner UL elements.
left: 0;
top: WHATEVER;