min and max width don't work - html

i'm creating a horizontal submenu but the width doesn't extend check this please
CSS
nav{
width:62px;
height:409px;
float:left;
margin-left:0;
margin-top:25px;
}
nav a:link,nav a:visited{
width:59px;
height:67px;
float:left;
display:block;
background:#ccc;
margin-bottom:19px;
font-family:tahoma;
font-weight:bold;
font-size:9px;
text-transform:uppercase;
color:#fff;
line-height:62px;
text-align:center;
}
nav .menu{
width:59px;
height:67px;
float:left;
position:relative;
margin-bottom:19px;
}
nav .submenu{
position:absolute;
top:0;
left:59px;
background:#f78f1e;
height:40px;
min-width: 20px;
max-width: 600px;
}
nav .submenu a{
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}
HTMLnav{
width:62px;
height:409px;
float:left;
margin-left:0;
margin-top:25px;
}
nav a:link,nav a:visited{
width:59px;
height:67px;
float:left;
display:block;
background:#ccc;
margin-bottom:19px;
font-family:tahoma;
font-weight:bold;
font-size:9px;
text-transform:uppercase;
color:#fff;
line-height:62px;
text-align:center;
}
nav .menu{
width:59px;
height:67px;
float:left;
position:relative;
margin-bottom:19px;
}
nav .submenu{
position:absolute;
top:0;
left:59px;
background:#f78f1e;
height:40px;
min-width: 20px;
max-width: 600px;
}
nav .submenu a{
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}
HTML
<nav>
contact
works
partners
<div class="menu">
about us
<div class="submenu">
audio
video
<div style="clear:both"></div>
</div>
</div>
services
</nav>
Fiddle
http://jsfiddle.net/7D9hV/


Try using backgournd:inherit for your anchor-styling
nav .submenu a{
background:inherit;
display:block;
float:left;
height:40px;
line-height:40px;
width:50px;
}


This is working for me. Try it
nav .submenu a {
background: inherit; /// remove 'none'
display: block;
float: left;
height: 40px;
line-height: 40px;
width: 50px;
}
nav .submenu {
position: absolute;
top: 0;
left: 59px;
background: #f78f1e;
height: 40px;
width: 100px; // assign width
min-width: 20px;
max-width: 600px;
}


Sorry, scratch previous comment. It's the background: none; on nav .submenu a. Remove this and they appear. Your setting the background to none so you can't see them as the text is white:
http://jsfiddle.net/7D9hV/7/

Related

Mobile navigation bar is not appearing

I have got a basic mobile navigation bar, but it is not appearing. It is there, but it is just not showing up on live site. When i look on inspect element then i can see the mobile nav is there, but it is just not showing up on the live site.
I have googled for a solution, I have searched on here and nothing seems to helps.
HTML
<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
<div class="top">
<h1>Galaxy Games</h1>
<h1>Galaxy Games</h1>
<nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
Home
Games
Videos
Newswire
Social Club
Downloads
Warehouse
Support
</div>
</div>
</nav>
CSS
header#headerRoot a{
text-decoration:none !important
}
header#headerRoot .gl-wrapper{
font-size:10px;
position:absolute;
z-index:75;
right:15px;
bottom:0
}
#media screen and (max-width:991px){
header#headerRoot .gl-wrapper
{
bottom:auto;
top:50%;
transform:translateY(-50%)
}
}
header#headerRoot>.top{
width:100%;
position:absolute;
z-index:50;
color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
background-image:url(../img/global/mobile-nav-sprite.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
header#headerRoot a {
text-decoration: none!important;
}
#media (max-width: 767px){
.visible-xs {
display: block!important;
}
}
.mobile-nav-shown #siteMobileNav {
z-index: 10;
position: relative;
min-height: 100vh;
transform: matrix(1,0,0,1,0,0);
}
#siteMobileNav {
position: fixed;
box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
padding: 5px 0;
left: 0;
width: 270px;
background: #fff;
color: #fff;
min-height: 100%;
transform: matrix(1,0,0,1,-270,0);
}
#media screen and (max-width:991px){
header#headerRoot>.top
{
border-bottom:1px solid #000;
height:70px
}
header#headerRoot>.top nav
{
margin:0
}
}
header#headerRoot>.top a.logo.logo-side{
width:36px;
position:absolute;
left:15px;
padding-top:16px;
z-index:100;
transform:matrix(1,0,0,1,0,-175);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
transform:matrix(1,0,0,1,0,-8)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-side
{
display:none;
}
}
header#headerRoot>.top a.logo.logo-main{
z-index:20;
left:0;
right:0;
width:650px;
height:75px;
margin:20px auto;
position:absolute;
transform:matrix(1,0,0,1,0,0);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
transform:matrix(.5,0,0,.5,0,-100)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-main
{
margin:0 auto;
height:100%;
padding:10px;
transform:matrix(1,0,0,1,0,0) !important
}
}
header#headerRoot>.top a.logo.white{
background-position:50% !important
}
header#headerRoot>.bottom{
z-index:20;
position:absolute;
width:100%;
top:100%;
margin-top:-1px;
transform:translateY(-1px)
}
header#headerRoot nav{
z-index:20;
position:relative;
max-width:1920px;
margin:99px auto 0;
padding:0 15px;
transition:margin-top .3s cubic-bezier(.19,1,.22,1);
font-size:1em;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
#media screen and (max-width:991px){
header#headerRoot nav
{
font-size:.9em
}
}
.header-collapsed header#headerRoot nav{
margin-top:0
}
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:inherit;
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
header#headerRoot nav a:lang(en_us){
padding:15px 4px
}
#media screen and (max-width:991px){
header#headerRoot nav a
{
margin-right:10px !important
}
header#headerRoot nav a:first-child
{
margin-left:-30px
}
}
header#headerRoot nav a:before{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:0;
background:#ff0000;
transition:height .15s linear
}
header#headerRoot nav a:hover{
text-decoration:none;
color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
height:3px
}
header#headerRoot nav .search{
position:relative;
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
margin-top:15px
}
header#headerRoot nav .search span{
cursor:pointer;
position:relative;
z-index:7
}
header#headerRoot nav .search .searchbox{
pointer-events:none;
position:fixed;
z-index:6;
top:99px;
left:0;
padding-top:7px;
background:#000;
text-align:center;
opacity:0;
width:100%;
transform:translateZ(0);
transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
top:0
}
header#headerRoot nav .search.shown span{
text-shadow:none
}
header#headerRoot nav .search.shown span:before{
color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
pointer-events:auto;
opacity:1
}
header#headerRoot section.hover-menu{
background:#fff;
border-top:1px solid #000;
border-bottom:4px solid #000;
width:100%;
position:absolute;
z-index:10;
text-align:left;
font-size:.9em
}
Screenshot:
https://imgur.com/0PlRMIb
Any help appreciated and thanks in advance.

It's just for color:inherit in the header#headerRoot nav a, now it's white and you cannot see the links. so, replace it to some color that you can see it like black:
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:inherit; // -> change it to black or ...
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
I created a snippet to show you what should you do:
Notice: There are some unclosed tags that you should care about it in your original code.
header#headerRoot a{
text-decoration:none !important
}
header#headerRoot .gl-wrapper{
font-size:10px;
position:absolute;
z-index:75;
right:15px;
bottom:0
}
#media screen and (max-width:991px){
header#headerRoot .gl-wrapper
{
bottom:auto;
top:50%;
transform:translateY(-50%)
}
}
header#headerRoot>.top{
width:100%;
position:absolute;
z-index:50;
color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
background-image:url(../img/global/mobile-nav-sprite.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
header#headerRoot a {
text-decoration: none!important;
}
#media (max-width: 767px){
.visible-xs {
display: block!important;
}
}
.mobile-nav-shown #siteMobileNav {
z-index: 10;
position: relative;
min-height: 100vh;
transform: matrix(1,0,0,1,0,0);
}
#siteMobileNav {
position: fixed;
box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
padding: 5px 0;
left: 0;
width: 270px;
background: #fff;
color: #fff;
min-height: 100%;
transform: matrix(1,0,0,1,-270,0);
}
#media screen and (max-width:991px){
header#headerRoot>.top
{
border-bottom:1px solid #000;
height:70px
}
header#headerRoot>.top nav
{
margin:0
}
}
header#headerRoot>.top a.logo.logo-side{
width:36px;
position:absolute;
left:15px;
padding-top:16px;
z-index:100;
transform:matrix(1,0,0,1,0,-175);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
transform:matrix(1,0,0,1,0,-8)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-side
{
display:none;
}
}
header#headerRoot>.top a.logo.logo-main{
z-index:20;
left:0;
right:0;
width:650px;
height:75px;
margin:20px auto;
position:absolute;
transform:matrix(1,0,0,1,0,0);
transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
transform:matrix(.5,0,0,.5,0,-100)
}
#media screen and (max-width:991px){
header#headerRoot>.top a.logo.logo-main
{
margin:0 auto;
height:100%;
padding:10px;
transform:matrix(1,0,0,1,0,0) !important
}
}
header#headerRoot>.top a.logo.white{
background-position:50% !important
}
header#headerRoot>.bottom{
z-index:20;
position:absolute;
width:100%;
top:100%;
margin-top:-1px;
transform:translateY(-1px)
}
header#headerRoot nav{
z-index:20;
position:relative;
max-width:1920px;
margin:99px auto 0;
padding:0 15px;
transition:margin-top .3s cubic-bezier(.19,1,.22,1);
font-size:1em;
-webkit-backface-visibility:hidden;
backface-visibility:hidden
}
#media screen and (max-width:991px){
header#headerRoot nav
{
font-size:.9em
}
}
.header-collapsed header#headerRoot nav{
margin-top:0
}
header#headerRoot nav a{
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
color:black;
margin-right:20px;
padding:15px 0;
position:relative;
outline:none;
transition:all .2s
}
header#headerRoot nav a:lang(en_us){
padding:15px 4px
}
#media screen and (max-width:991px){
header#headerRoot nav a
{
margin-right:10px !important
}
header#headerRoot nav a:first-child
{
margin-left:-30px
}
}
header#headerRoot nav a:before{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:0;
background:#ff0000;
transition:height .15s linear
}
header#headerRoot nav a:hover{
text-decoration:none;
color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
height:3px
}
header#headerRoot nav .search{
position:relative;
display:inline-block;
zoom:1;
*display:inline;
vertical-align:top;
float:none !important;
margin-top:15px
}
header#headerRoot nav .search span{
cursor:pointer;
position:relative;
z-index:7
}
header#headerRoot nav .search .searchbox{
pointer-events:none;
position:fixed;
z-index:6;
top:99px;
left:0;
padding-top:7px;
background:#000;
text-align:center;
opacity:0;
width:100%;
transform:translateZ(0);
transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
top:0
}
header#headerRoot nav .search.shown span{
text-shadow:none
}
header#headerRoot nav .search.shown span:before{
color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
pointer-events:auto;
opacity:1
}
header#headerRoot section.hover-menu{
background:#fff;
border-top:1px solid #000;
border-bottom:4px solid #000;
width:100%;
position:absolute;
z-index:10;
text-align:left;
font-size:.9em
}
<span class="header-nav">
<header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
<div class="top">
<h1>Galaxy Games</h1>
<h1>Galaxy Games</h1>
<nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
Home
Games
Videos
Newswire
Social Club
Downloads
Warehouse
Support
</div>
</div>
</nav>

error menu drodown css html <nav> <ul>

I am creating a page where there is a menu that contains a submenu centered at the top of the page, my problem is being to centralize the submenu with the main menu, because it always goes out of alignment, does anyone know what it can be? Thank you in advance for any help!
"ps:in the image contains the visible error"
edit1:run and with the link and with the html that was missing.
link:https://testtestteste111111.000webhostapp.com/
.menu{
width:100%;
height:49px;
background-color:#494545;
font-family:'Arial';
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index:9999;
}
.menu ul{
list-style:none;
position:relative;
margin-left:24%;
}
.menu ul li{
width:150px;
float:left;
}
.menu a{
padding:15px;
display:block;
text-decoration:none;
text-align:center;
background-color:#494545;
color:#fff;
}
.menu ul ul{
position:absolute;
visibility:hidden;
}
.menu ul li:hover > ul{
visibility:visible;
/* border:1px solid #901E93; sub div*/
}
.menu a:hover{
background-color:#7F818D;
color:#fff;
}
.menu ul ul li{
float:none;
border-bottom:solid 1px #ccc;
margin-left:-164%;
}
.menu ul ul li a{
background-color:#646464;
}
label[for ="bt_menu"]{
padding:5px;
background-color:#494545;
color:#fff;
font-family:"Arial";
text-aling:center;
font-size:30px;
cursor:pointer;
width:100%;
max-height:58px;
z-index:9999;
margin-top:-10px;
top:-5px;
display:none;
position:fixed;
}
.imgbar{
max-height:25px;
max-width:25px;
margin-top:10px;
}
#bt_menu{
display:none;
}
#media(max-width:800px){
label[for="bt_menu"]{
display:block;
color:#fff;
z-index:9999;
position:fixed;
margin-top:1px;
}
.menu{
margin-top:-1px;
margin-left:-100%;
transition:all .4s}
#bt_menu:checked ~ .menu{
margin-left:0;}
.menu ul li{
width:100%;
float:none;}
.menu ul ul{
position:static;
overflow:hidden;
max-height:0;
transition:all .4s;
}
.menu ul li:hover ul{
height:auto;
max-height:200px;
}
.menu ul{
list-style:none;
position:relative;
margin-left:0;
z-index:9999;
}
.menu ul ul li{
float:none;
border-bottom:solid 1px #ccc;
margin-left:0;
}
.parallax {
width:100%;
/* The image used */
background-image: url(../img/img1.jpg);
/* Set a specific height */
height: 800px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top:-50px;
}
#ultopo{
margin-top:49px;
}}
html
<input type="checkbox" id="bt_menu">
<label for="bt_menu"><img class="imgbar" src="img/bars.svg"></img></label>
<nav class="menu">
<ul id="ultopo">
<li>Home</li>
<li>Serviços
<!-- nested UL in LI -->
<ul>
<li>ex:A</li>
<li>ex:b</li>
</ul>
</li>
<li>Atuaçao
<!-- nested UL in LI -->
<ul>
<li>ex:A</li>
<li>ex:B</li>
<li>ex:C</li>
</ul>
</li>
<li>contato</li>
</ul>
</nav>

Please update css
Here is link https://jsfiddle.net/jbv09vy4/1/
Add css
.menu ul li {
position: relative;
}
.menu ul ul {
left: 0;
margin: 0;
}
and remove styles margin-left: -164% from
.menu ul ul li {
float: none;
border-bottom: solid 1px #ccc;
margin-left: -164%;
}

Why do my images not stay where they are?

I have a small but annoying issue here. My footer and background image stay with the page when on different resolutions or zoomed in and out (because of the footer being fixed and the background image being positioned in the center) but my other images don't seem to stay with the page, they move on their own given a change in different resolutions or if I zoom in and out. Here's my code/screenshots of what's happening:
Screenshots:
My view of the webpage (1920x1080): http://gyazo.com/11c8a55c697696eb7667fdf23f903bb9
Here is my code pen: http://codepen.io/anon/pen/JobwRB
Try scroll zooming in codepen and I'll think you'll see what I mean. Is media queries worth a read here? Or will have to to put everything into a container?
Thanks for any help received.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="body.css" type="text/css"/>
</head>
<body>
<div>
</div>
<div id="img">
<img src="images/deets.png">
</div>
<div id="footer">
<ul id="footer_menu">
<li class="homeButton"></li>
<li>Profile
<div class="three_column_layout">
<div class="col_3">
<p></p>
</div>
</div>
</li>
<li>Work Exp
<div class="two_column_layout">
</div>
</li>
<li>Qualifications
<div class="two_column_layout">
<div class="col_2">
<a class="headerLinks">Test</a>
</div>
</div>
</li>
<li class="right">Log Out</li>
</ul>
<ul id="notifications">
<li>
<img src="images/twitter.png"
</li>
<li>
<img src="images/facebook.png">
</li>
</ul>
</div>
</body>
Footer CSS:
body{
background:rgba(20,20,20,1);
}
#footer{
position:fixed;
bottom:0px;
margin:0;
padding:0;
left:0;
right:0;
width:100%;
height:40px;
font-family:Arial;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,1.0);
background: rgba(0,0,0,0.5);
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
font-weight:normal;
font-size:14px;
text-decoration:underline;
color:#CC0000;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
}
#footer p{
color:white;
font-size:12px;
float:left;
padding:0px 10px;
margin:10px 0px;
}
#footer img{
border:none;
}
#footer li ul{
list-style:none;
padding:0px;
margin-bottom:12px;
}
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0px;
height:0px;
}
#footer .whiteBorder{
border:1px solid white;
}
#footer .img_left{
float:left;
margin-right:10px;
width:40px;
}
#footer .black_box{
background:rgba(0,0,0,0.4);
padding:5px;
margin-bottom:5px;
border-radius:5px;
}
#footer #notifications{
float:right;
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#footer #notifications li{
margin-right:12px;
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
}
#footer #notifications li:hover{
margin-top:-1px;
}
#a .notificationIcons span{
display:none;
font-size:12px;
color:white;
bottom:45px;
width:150px;
position:absolute;
border:1px solid #333333;
padding:5px;
margin-left:-70px;
background:rgba(0,0,0,0.4)
}
#a .notificationIcons:hover span{
display:block;
}
#footer_menu{
margin:0px;
padding:0px;
width:auto;
}
#footer_menu li{
list-style:none;
text-align:center;
width:75px;
float:left;
font-size:12px;
padding:12px 14px 14px 14px;
border-right:1px solid rgba(0,0,0,0.4);
background:rgba(0,0,0,0.1);
}
#footer_menu li:hover{
background:rgba(0,0,0,0.3);
}
#footer_menu li a{
display:block;
color:#CCCCCC;
text-decoration:none;
}
#footer_menu li a:hover{
color:white;
}
#footer_menu .homeButton{
padding:5px 8px 0px 5px;
border:none;
background:none;
}
#footer_menu .homeButton a{
background:url("C:/Users/Charlie/Desktop/CV Website/images/greyhouse1.png") top left no-repeat;
width:36px;
height:30px;
}
#footer_menu .homeButton:hover{
background:none;
}
#footer_menu .homeButton a:hover{
background:url("C:/Users/Charlie/Desktop/CV Website/images/whitehouse2.png") top left no-repeat;
}
/*Programs menu drop-up box*/
#footer_menu li ul.dropup{
display:none;
}
#footer_menu li:hover ul.dropup{
display:block;
position:absolute;
margin: 0 0 0 -15px;
bottom:40px;
border:1px solid #111111;
border-bottom:none;
background:rgba(0,0,0,0.5);
}
#foot_menu li:hover li{
float:none;
background:none;
border:none;
border-bottom:1px solid #111111;
padding:12px 10px 12px 10px;
}
/*Drop up default links*/
#footer_menu li:hover a{
color:#aaaaaa;
}
#footer_menu li:hover a:hover{
color:white;
}
/*Header links*/
.headerLinks {
display:none !important;
}
#footer_menu li:hover a.headerLinks{
font-size:14px;
text-decoration:underline;
margin-bottom:5px;
color:#CC0000;
margin-top:10px;
margin-left:10px;
display:block !important;
}
#footer_menu li:hover a.headerLinks:hover{
color:white;
cursor:pointer;
}
/*List links*/
#footer_menu li:hover a.listLinks{
font-size:12px;
color:#aaaaaa;
margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover{
color:white;
cursor:pointer;
}
#footer_menu .right{
float:right;
right:0px;
margin-right:2px;
border-right:none;
border-left:1px solid rgba(0,0,0,0.3);
}
/*Layouts*/
#footer .one_column_layout,
#footer .two_column_layout,
#footer .three-column_layout,{
margin:4px;
position:absolute;
padding-bottom:15px;
display:none;
text-align:left;
}
/*Width of each layout*/
#footer .one_column_layout{width:140px;}
#footer .two_column_layout{width:280px;}
#footer .three_column_layout{width:420px;}
/*Display Dropup menus on hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout{
display:block;
position:absolute;
text-align:left;
margin:0 0 0 -15px;
bottom:40px;
background:rgba(0,0,0,0.5);
}
#footer.col_1,
#footer.col_2,
#footer.col_3{
display:block;
float:left;
position:relative;
margin-left:5px;
margin-right:5px;
}
#footer.col_1{width:130px;}
#footer.col_2{width:270px;}
#footer.col_3{width:410px;}
Body CSS:
body {
background-image:url('C:/Users/Charlie/Desktop/CV Website/images/background1.png');
box-shadow:5px 5px 2px;
background-repeat: repeat-y;
background-attachment:fixed;
background-position:center;
max-width:1080px;
}
#javaPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/java.png');
position:fixed;
top:5%;
left:28.8%;
max-width:100%;
}
#javaPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/java2.png');
}
#htmlcssPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss.png');
position:fixed;
top:5%;
right:28.8%;
max-width:100%;
}
#htmlcssPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss2.png');
}
#javascriptPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/javascript.png');
position:fixed;
top:35%;
left:28.8%;
max-width:100%;
}
#javascriptPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/javascript2.png');
}
#phpPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/php.png');
position:fixed;
top:35%;
right:28.8%;
max-width:100%;
}
#phpPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/php2.png');
}
#img {
position:fixed;
top:0.5%;
left:28.8%;
display:block;
max-width:100%;
}

why does relative positioning make a horizontal scroll bar?

I am trying to position some text/pictures using position relative, however when using relative, it creates a scroll bar eventhough the content is not over there. Is there a way to not have it do this other than overflow:hidden?
the css for the object is
body {background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-size: cover;
}
body {color:black;}
a, a:visited {
color:white;
text-decoration:none;
}
div#header {
font-size:280%;
float:right;
text-decoration:underline;
}
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
border:1px solid #42432d;
border-width:1px 0;
position:absolute;
top:100px;
left:0px;
font-size:175%;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
font-size:150%;
}
div.logo
img {
position:absolute;
left:0;
top:0;
}
div#support {
text-align:center;
font-size:250%;
color:#CC3300;
position:relative;
top:90px;
left:34%;
text-decoration:underline;
font-weight:bold;
}
div#photo
img{
margin-top:7%;
margin-left:30%;
}
p#follow {
position:relative;
left:50%;
top:-40px;
font-size:250%;
color:white;
text-decoration:underline;
font-weight:bold;
margin-top:5
}
div#facebook
img{
position:relative;
left:50%;
top:-40px;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:600px;
top:-200px;
}
ul#site {
font-size:175%;
margin-top:-10%;
margin-left: 33%;
padding-left: 0;
color:white;
}
#media (min-width : 1300px)
and (max-width : 1400px) {
div#support {
text-align:center;
font-size:150%;
color:#CC3300;
position:relative;
top:90px;
left:60%;
text-decoration:underline;
font-weight:bold;
width:40%;
}
div#photo {
margin-top:3%;
height:50%;
width:50%;
}
div#sitemap {
font-size:200%;
text-decoration:underline;
font-weight:bold;
color:white;
position:relative;
left:400px;
top:-200px;
}
div#facebook
img{
position:relative;
left:50%;
top:-50px;
}
ul#site {
font-size:175%;
margin-top:-13%;
margin-left: 33%;
color:white;
}

If you are trying to position text, it likely has a 100% width (as block elements do). You may not be able to see it, but there is a good chance that by putting left: 800px; on your element, it is pushing its bounds out, past the edge of the screen.
This does not happen when using absolute positioning as it basically tells everything to ignore the space that the element takes up.
You could try making sure all of the elements you are positioning are set to either display: inline; or display: inline-block;, and/or setting a width on the element that you know will keep it contained to the width of the screen.

CSS Menu Dropdowns Show Up Behind the Content

I am working on http://www.comehike.com (right now just a sandbox) and you can see that if you hover over the "hikes" nav item, the dropdowns appear to be behind the page content.
I saw a number of threads regarding similar issues, but none of those were what I needed.
Here is my css just in case:
html
{
margin-bottom:2px;
min-height:100%;
}
body
{
background-image:url('http://www.comehike.com/img/ui/grass.jpg');
}
#navigation
{
width:100%;
height:30px;
background-color:#white;
font-family:verdana,arial;
text-color:#557803;
}
#navigation ul
{
margin:0px; padding:0px;
}
#navigation ul li
{
display:inline; height:30px; float:left; list-style:none; margin-right:5px;
position:relative;
}
#navigation li a
{color:#557803; text-decoration:none;}
#navigation li a:hover
{color:#black; text-decoration:underline;}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#black;
}
#navigation li:hover ul
{
display:block;
width:160px;
}
#navigation li li
{
list-style:none;
display:list-item;
}
#navigation li li a
{color:#fff; text-decoration:none;}
#navigation li li a:hover
{color:#fff; text-decoration:underline;}
div.headerMainNav
{
color:#333333;
font-family:verdana,arial;
font-size:16px;
height:auto;
line-height:150%;
position:relative;
text-align:right;
float:right;
}
a:link
{
color:#557803;
text-decoration:none;
}
a:hover {
color:#999999;
text-decoration:none;
}
a:visited {
color:#557803;
text-decoration:none;
}
#pageBody
{
background-color:#FFFFFF;
border:2px solid #999999;
left:0;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
top:5px;
width:800px;
}
#administrationHeader
{
background-color:#FFFFFF;
left:0;
margin-left:auto;
margin-right:auto;
margin-top:3px;
padding-right:5px;
text-align:right;
font-size: 9pt;
top:5px;
width:800px;
}
div.logo
{
clear:top;
clear:bottom;
left:0;
padding:0px;
position:relative;
width: 200px;
height:80px;
float:left;
}
div.mainBody
{
color:#333333;
font-family:verdana,arial;
font-size:14px;
height:auto;
line-height:150%;
position:relative;
}
div.footer
{
color:#999999;
font-family:times,serif;
font-size:10px;
padding-top:20px;
line-height:150%;
position:relative;
text-align:center;
bottom:10px;
style=clear:both;
}

I think that you need to take care of z-indexs.