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%;
}
Related
i have a navbar that resizes when you have a smaller device, it works very well and very responsive, however when i link to the services.html#templates the margin top for the container does not work at all and i have blank space at the bottom of it, here is the html and css:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to FinalProject</title>
<!-- Link to the master style -->
<link href="styles/master.css" type="text/css" rel="stylesheet">
<link href="styles/table.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="js/menu.js"></script>
</head>
<body>
<nav>
<div id="leftlogo">
<div id="toggler">
☰
</div>
<a href="index.html">
<span id="logo">
</span>
</a>
</div>
<ul id="menu">
<li>About Us</li>
<li>Contact Us</li>
<li>Services</li>
<li>Members</li>
</ul>
</nav>
<div id="container">
<main>
<div class="title">
Services
</div>
<table>
<tr>
<th></th>
<th class="type">Personal</th>
<th class="type">Business</th>
</tr>
<tr>
<th class="left">Bandwidth</th>
<td>15GB</td>
<td>1TB</td>
</tr>
<tr>
<th class="left">Domain Name</th>
<td>Yes, charged</td>
<td>Yes, free (if not premium)</td>
</tr>
<tr>
<th class="left">Hosting</th>
<td>Yes, charged</td>
<td>Yes, charged</td>
</tr>
<tr>
<th class="left">Customizable</th>
<td>Yes, charged</td>
<td>Yes, free</td>
</tr>
<tr>
<th class="left">Delivery</th>
<td>Faster</td>
<td>Fast</td>
</tr>
<tr>
<th class="left">suitable for</th>
<td>Artists, bloggers, vloggers, etc...</td>
<td>Companies, startups, organizations, etc...</td>
</tr>
<tr>
<th class="left">Pricing</th>
<td>$75/month +</td>
<td>$400/month +</td>
</tr>
<tr>
<th></th>
<td class="bigger" id="personal">Buy Personal</td>
<td class="bigger" id="business">Buy Business</td>
</tr>
</table>
<div class="title">
Templates
</div>
<div class="section" id="templates">
<img src="images/customize.png" class="leftimage">
<div class="smtitle righttext">Templates</div>
<div class="righttext">
<div class="template"><img src="images/globe.png">Template #1</div>
<div class="template"><img src="images/user.png">Template #2</div>
<div class="template"><img src="images/brain.png">Template #3</div>
<div class="template"><img src="images/customize.png">Template #4</div>
<div class="template"><img src="images/framework.png">Template #5</div>
<div class="template"><img src="images/speed.png">Template #6</div>
<div class="righttext">More...</div>
</div>
</div>
</main>
</div>
<footer>
<div id="leftfooter">
<script type="text/javascript">
var year = new Date();
year = year.getFullYear();
document.getElementById('leftfooter').innerHTML = year+' © Copyrighted Peter Bou Saada';
</script>
</div>
<div id="rightfooter">
Inquiries? Send me an Email
</div>
</footer>
</body>
</html>
here is master.css:
/* precautions to prevent any default margins or paddings set by the users browser*/
body,html{
margin:0;
padding:0;
width:100%;
height:100%;
}
body{
overflow:hidden;
}
*{
box-sizing: border-box;
overflow:none;
font-family:Helvetica,Arial,Sans-serif;
}
*::selection {
background: #FF6500;
}
*::-moz-selection {
background: #FF6500;
}
nav{
position:fixed;
width:100%;
top:0;
height:70px;
background-color:#222222;
border-bottom:1px solid #FF6500;
-webkit-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
}
nav ul{
width:50%;
float:right;
text-align:left;
padding:0;
margin:0;
}
nav ul li{
display:inline;
list-style-type:none;
padding-right:1em;
text-align:center;
}
nav ul li>a{
color:#FF6500;
text-decoration: none;
font-size:1.3em;
font-family:Helvetica,Arial,Sans-serif;
line-height:65px;
text-shadow:0px 0px 5px rgba(220,220,220,0.5);
transition:all 0.3s ease-out;
border-bottom:0px;
}
nav ul:hover li a{
opacity: 0.5;
}
nav ul li>a:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
#toggler{
float:left;
display:none;
}
#leftlogo{
width:50%;
height:70px;
float:left;
margin:0;
padding:0;
}
#logo{
float:right;
height:70px;
width:100px;
margin-right:50px;
background-image:url('../images/finallogo.png');
background-size: 100%;
background-repeat: no-repeat;
}
#container{
margin:0;
padding:0;
height:calc(100% - 100px);
width:100%;
background-color:#333333;
padding:30px;
margin-top:70px;
margin-bottom:30px;
overflow-y:auto;
}
main{
width:80%;
margin:auto;
color:#d7d7d7;
font-size:1.2em;
letter-spacing: 0.5px;
font-family:Helvetica,Arial,Sans-serif;
}
footer{
margin:0;
padding:0;
position:fixed;
bottom:0;
width:100%;
height:30px;
background-color:#292929;
border-top:1px solid #FF6500;
line-height:30px;
color:#f7f7f7;
}
#leftfooter{
float:left;
width:50%;
padding-left:10%;
}
#rightfooter{
float:right;
width:50%;
text-align:right;
padding-right:10%;
}
#rightfooter>a{
color:#FF6500;
text-decoration: none;
}
.title{
text-align:center;
width:100%;
font-size:1.7em;
font-weight:bold;
margin-bottom:30px;
text-shadow:3px 3px 5px #222222;
}
.smtitle{
width:100%;
font-size:1.7em;
font-weight:bold;
text-shadow:3px 3px 5px #222222;
}
.section{
width:100%;
margin:0;
padding:0;
display:inline-block;
margin-bottom:30px;
transition:all ease-in 0.2s;
}
.section:hover{
border-bottom:5px solid #FF6500;
border-top:5px solid #FF6500;
padding-top:10%;
padding-bottom:10%;
}
.righttext{
padding:0 15px;
float:left;
text-align:left;
width:70%;
text-shadow:3px 3px 5px #222222;
}
.rightimage{
float:right;
width:30%;
}
.leftimage{
float:left;
width:30%;
}
.lefttext{
text-shadow:3px 3px 5px #222222;
padding:0 15px;
float:left;
text-align:left;
width:70%;
}
.section a{
color:#788893;
text-decoration:none;
}
.section a:hover{
color:#f7f7f7;
}
.normal{
width:35%;
margin:auto;
}
dt{
font-weight:bold;
font-size:1.1em;
text-shadow:2px 2px 4px #222222;
}
/* contact form */
#contact{
width:60%;
margin:auto;
}
#contact label{
width:100%;
display:inline-block;
}
#contact input, #contact textarea{
width:100%;
padding:15px 0;
font-size:1.5em;
background-color:#333333;
border:none;
color:#f7f7f7;
border-bottom:5px solid #7a7a7a;
transition:all ease-in 0.3s;
outline:none;
resize:none;
}
#contact input:focus, #contact textarea:focus{
border-bottom:5px solid #f7f7f7;
}
.form-group{
width:100%;
margin-bottom:15px;
}
.button{
width:20%;
margin-right:40%;
margin-left: 40%;
padding:10px;
border-radius:8px;
background-color:#333333;
border:1px solid #f7f7f7;
color:#f7f7f7;
font-weight:bold;
outline:none;
cursor:pointer;
transition: all ease-in 0.2s;
}
.button:hover{
border:none;
border-bottom:5px solid #f7f7f7;
border-radius:0;
width:40%;
margin-left:30%;
margin-right:30%;
background-color:#ff6500;
}
.button:active{
border-bottom:1px solid #f7f7f7;
margin-top : +4px;
}
#count{
text-shadow:5px 5px 8px #222222;
margin-bottom:10px;
}
.button[disabled]{
display:none;
}
.template{
width:25%;
padding:10px;
height:200px;
display:inline-block;
background:#292929;
margin:10px;
text-align:center;
}
.template img{
width:100%;
height:90%;
margin:0;
}
/* custom scrollbar for webkit browsers only */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px rgba(255,101,0,1);
}
/* Mobile and tablets */
#media only screen and (max-width:1024px){
nav{
height:50px;
}
nav ul{
margin-top:50px;
height:calc(100% - 50px);
width:100%;
position:fixed;
display:none;
background-color:rgba(0,0,0,0.7);
}
nav ul:hover li a{
opacity:0.7;
}
nav ul li:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
nav ul li:hover a{
color:#f7f7f7;
border-bottom:none;
opacity:1;
}
nav ul li{
width:100%;
height:50px;
line-height:50px;
display:inline-block;
text-align:center;
background:rgba(22,22,22,0.7);
border-bottom:1px solid #FF6500;
}
nav ul li a{
line-height:50px;
}
#leftlogo{
width:100%;
height:50px;
}
#logo{
float:left;
height:50px;
width:200px;
background-image:url('../images/smlogo.png');
}
#toggler{
display:inline;
margin:0 2%;
font-size:1.5em;
line-height:50px;
font-weight:bold;
color:#FF6500;
cursor:pointer;
transition:all ease-in 0.2s;
}
#toggler:hover{
text-shadow:0 0 1px #f7f7f7;
}
#container{
margin-top:50px;
height:calc(100% - 80px);
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:40%;
margin-left:30%;
margin-right:30%;
}
#contact{
width:90%;
margin-left:auto;
margin-right:auto;
}
.template{
width:45%;
}
}
#media only screen and (max-width:768px){
main{
padding:5px;
font-size:0.9em;
}
nav ul{
overflow-y:auto;
}
nav{
-webkit-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
}
#logo{
width:100px;
height:25px;
margin-top:12.5px;
margin-bottom:12.5px;
}
.leftimage{
display:none;
}
.rightimage{
display:none;
}
.lefttext{
width:100%;
}
.righttext{
width:100%;
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:100%;
margin:0;
}
#contact{
width:100%;
margin-left:auto;
margin-right:auto;
}
.button:hover{
width:100%;
margin:0;
}
.template{
width:100%;
height:auto;
}
}
no need to worry about table.css it only changes the table.
this is how it looks like: http://prntscr.com/ec50gs
this is how it is supposed to look like: http://prntscr.com/ec50wx
notice the link if it does not have #template in it, it works as it should
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/
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.
i am using this CSS for my footer:
/* FOOTER */
#footer {
width:100%;
height:580px;
border-top:4px solid #666666;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
#enquiryForm { clear:both; padding:8px 40px 0 0; }
.enquiryField { clear:both; padding:5px 0; }
.enquiryField label { clear:none; float:left; }
.enquiryField input { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
.enquiryError { clear:both; color:#fff; font-family:Calibri; }
#enquirySent { color:#fff; font-family:Calibri; }
but it is not moving down the page automatically depending on how much content is above it. here is a fiddle with the full css/HTML:
http://jsfiddle.net/ctmGT/
i seem to have to change the div height that i have depending on the amount of content i have
you need to change
<div style="clear: both; height:500px;"></div>
to
<div class="push"></div>
i have the following CSS for a navigation menu
ul#css3menu_top,ul#css3menu_top ul {
margin:0;
list-style:none;
padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
background-color:#EEEEEE;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu_top .submenu {
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
-moz-transition:all 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
float:left;
background-color:#EEEEEE;
border-width:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#FFF;
padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
visibility:visible;
opacity:1;
}
ul#css3menu_top li {
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu_top li:hover {
z-index:1;
}
ul#css3menu_top ul .submenu {
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0 0%;
margin:0 0%;
*display:inline;
}
ul#css3menu_top .column {
float:left;
}
* html ul#css3menu_top li a{
display:inline-block;
}
ul#css3menu_top>li {
margin:0;
width:17%;
}
ul#css3menu_top li.toplast{
width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
outline-style:none;
}
ul#css3menu_top a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 14px Calibri;
color:#EEEEEE;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:6px 15px 6px 3px;
background-color:#666666;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#c0c0c0;
}
ul#css3menu_top ul li {
float:none;
margin:10px 0 0;
}
ul#css3menu_top ul a {
text-align:left;
padding:4px;
background-color:#EEEEEE;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:14px Calibri;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
background-color:#EEEEEE;
color:#666666;
background-position:0 100px;
text-decoration:none;
}
ul#css3menu_top img {
border:none;
vertical-align:middle;
margin-right:6px;
}
ul#css3menu_top span {
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu_top ul span {
padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
background-color:#EEEEEE;
background-image:none;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
padding-left: 7px;
border-width:0;
border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
padding-right: 7px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
#media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
#media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
#media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}
/*opera hack*/
#media only screen and (min-width:900px){
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{
display:table;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{
width:auto;
float:none;
display:table-cell;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{
width:auto;
display:table-cell;
}
}
i cannot work out how to make the text colour change when i hover over it on the sub menu
here is a fiddle of it working
http://jsfiddle.net/n3FAq/
any one got any ideas?
Try this
ul#css3menu_top ul li a:hover {
color: #c00;
}
DEMO
You don't have a hover rule for links in the submenu.
ul#css3menu_top .submenu a:hover {
color: red;
}
JSFiddle