I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.
Related
I am making the website and attaching the current situation as in screenshot
as you can see that the background images is not spreading throughout the body. Anyone can figure it out
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1>Schooling india</h1>
<nav>
<ul>
<li class="current">Home Page</li>
<li>
<div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Info Corner
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Gallery
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Contact
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<!-- <input type="text" placeholder="Search">
Search</div> -->
<script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<!-- <script > var date=new Date();
document.write(date);</script> -->
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span>Programs</span></li>
<li><span>Student Info</span></li>
<li><span>Teachers</span></li>
<li><span>Admissions</span></li>
<li><span>Administration</span></li>
<li><span>Basic Information</span></li>
<li><span>Vacancies</span></li>
<li class="last"><span>Academic Calendar</span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>School lettter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear">UnsubscribeSubmit</div>
</div>
</fieldset>
</form>
<h2>Academic <span>Calender</span></h2>
<ul class="news">
<li><strong>June 30, 2017</strong>
<h4>1<sup>st</sup> parents-teacher meeting</h4>
parents are requested to be present by 11:00 am sharp </li>
<li><strong>June 14, 2017</strong>
<h4>Start of new term</h4>
Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
<li><strong>May 29, 2017</strong>
<h4>Result declaration</h4>
Report card distribution will start at 9:00pm</li>
<li>
<h4>See more...</h4></li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Educating <span>India <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>Recent <span>News</span></h2>
<ul class="list">
<li><span><img src="images/icon1.png"></span>
<h4>About Us</h4>
<p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
</li>
<li><span><img src="images/icon2.png"></span>
<h4>Our Branches</h4>
<p>We have branches in following areas<br><ul style="color: #008cc4">
<li><strong>Branch 1</strong></li>
<li><strong>Branch 2</strong></li>
<li><strong>Branch 3</strong></li>
<li><strong>Branch 4</strong></li></ul></p>
</li>
<li class="last"><span><img src="images/icon3.png"></span>
<h4>Student’s Life</h4>
<p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
</li>
</ul>
<h2>Move Forward <span>With Your Education</span></h2>
<p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
<div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
<p class="p0"></p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2017 SiteName - All Rights Reserved</p>
<p class="rf">Design by Rohit Jaiswal</p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Following is the style sheet
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
background-image:url(../images/tail-middle.jpg) repeat-y ;
/*background-image: no-repeat;*/
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:visible;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(../images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:4px;
background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:100px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:95px;
}
header nav ul li.current a.m1 {
background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
width:80px;
}
header nav ul li.current a.m2 {
background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
width:85px;
}
header nav ul li.current a.m3 {
background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
width:60px;
}
header nav ul li.current a.m4 {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:100px;
}
header nav ul li.current a.m5 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
width:100px;
}
header nav ul li.current a.m6 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
width:75px;
}
header nav ul li.current a.m7 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
width:85px;
}
header nav ul li.current a.m8 {
background-image:url(../images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:30px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(../images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
background-color:#47b6e5;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(../images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
Use
background-size:cover;
to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in
footer {
background:url(../images/footer-bg.png) no-repeat center top;
/*You need to remove the above line*/
margin-top:-120px;
min-width:940px;
}
Edit2
After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you?
Change
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
//The above directive will override the body bg, so just remove it
min-width:940px;
}
to
.wrap {
min-width:940px; // Only this seems a sensible declaration.
}
i am using ul an li as menu list.I am able to change color of menu item in hover and visited link but on active state color is not changing, would you tell me what could be the solution for that problem?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chandan</title>
<link rel="shortcut icon" href="../Resources/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services"><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
</body>
</html>
#css FIle*
#charset "utf-8";
/* CSS Document */
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a
{
color:#fcb1b1;
text-decoration:none;
}
li a:hover
{
color:#fff;
text-decoration:underline;
}
li a:active
{
color:#fff;
text-decoration:underline;
}
This might help
#menu_line .active a {
background-color:#FFD700;
}
here is my solution in css :
I have edited your code at styles and menu items
simply you must set class="active" to each li element you want to show active
I have added the class="active" to the service menu item.
HTML
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services" class="active" ><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
CSS
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a,
li a:hover,
li a:active {
color:#fff;
text-decoration:underline;
}
li.active a,
li.active a:hover,
li.active a:active {
background: #323637;
}
I searched this and toyed with the Z-Axis stuff, but to no avail.
Basically, my nav bar has submenus that appear underneath the div below it. That div has an opacity thing going on, which must have something to do with it. I need these to display above the div!!
JS Fiddle: http://jsfiddle.net/Peege151/7gGJp/1/
I'd ask to expand your browser so the nav bar is all on one line.
Here is my HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" type="text/css" rel="stylesheet" />
<title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
<div id="header">
<div id="searchcontainer">
<div id="searchlinks">
<p>Full Suite of Services | Contact Us</p>
</div>
<div id="searchform">
<form action ="##">
Search Site: <input type="search" style="border-radius: 10px;">
<input type="image" src="images/search.png" style="height:20px; width:20px; position:relative;top:5px;">
</form>
<br>
</div>
</div>
<div id="navbar">
<ul id="nav">
<li> Home </li>
<li>Services
<ul>
<li> Full Suite of Services </li>
</ul>
</li>
<li> Case Studies
<ul>
<li> Thing1 </li>
<li>Thing2 </li>
<li> Thing3 </li>
</ul>
</li>
<li>Partners
<ul>
<li> Guy1</li>
<li> TOP HALF OF NAME!!! OMG </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="division"></div>
<div id="intro" class="overlay">
</div>
<div id="biocontactwrap">
<div id="biotext"></div>
<div id="contact_pat"> </div>
</div>
<div id="quote">
</div>
<?php
// put your code here
?>
</body>
</html>
Here is my CSS:
/*
Document : style
Created on : Nov 12, 2013, 11:51:06 AM
Author : ShiftedRec
Description:
Purpose of the stylesheet follows.
*/
body {
background-image: url(images/wall1.gif);
width:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
root {
display: block;
}
#header {
height:150px;
width:100%;
clear:both;
overflow:hidden;
}
#searchcontainer{
width:305px;
height:60px;
float:right;
position:relative;bottom:20px;
}
#searchlinks {
clear:right;
float:right;
width:300px;
position:relative;top: 10px; left:80px;
font-size:50%;
}
#searchlinks a{
font-size:50%;
}
#searchform {
float:right;
clear:left;
width:300px;
clear:left;
}
.clear{
clear:both;
}
#navbar {
float:right;
margin-right:10%;
width:50%;
text-align: right;
clear:right;
}
#navbar ul{
padding: 0 10px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#navbar ul li {
position:relative;
display: inline-block
}
#navbar ul ul{
display:none;
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
overflow:visible;
z-index: 4;
}
#navbar ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li ul li {
display:block;
}
#navbar li {
display: inline-block;
margin: 10px;
white-space: nowrap;
}
#division {
height:15px;
background-color:#9E0000;
overflow:visible;
}
#intro{
height:200px;
width:100%;
z-index: 1;
}
#biocontactwrap {
width:100%;
height: 600px;
margin-bottom: 10px
}
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: relative;top:300px;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .1); /*can be anything, of course*/
box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
margin-left:15%;
width:40%;
height:100%;
padding:0px;
border: solid blue;
float:left;
}
#contact_pat{
width:25%;
height:100%;
border: solid yellow;
float: right;
margin-right:15%
}
#quote {
width:100%;
background-color:blue;
height: 300px;
}
Thanks so much guys! Please be nice. I'm a noobie!
EDIT
One problem causes another!
The reason I had done overflow in the header was because even though I had width:100% there was a scrollbar at the bottom of the page (horiz) that would allow me to scroll over to empty space.
When I had overflow:hidden; in the header, that solved that problem but then hid my nav bar submenus.
I tried to do overflow-x:hidden; overflow-y:visible, but having the Y-visible combined with the X-hidden I guess is bugged and it just reads as "auto!"
Anyway to have both NO X scroll and NO hidden Y submenu's?
Thanks guys..
It happens because of the overflow: hidden; in the #header. Remove it and the navigation will be displayed.
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
This is kinda embarrasing for me, since ive been working with CSS for such a long time for a living, that i would be considered an expert.
Yet! Experts also learn new things daily.
Well, my problem is, that this sample code with a full stretched Bg image is working fantastic in both Chrome and FF, it should work in IE too (atleast IE8) But i just cant get it to work, the image shows but the text wraps underneat the image like if the content box was not set to relative positioning.
I hope you can help me out.
<html>
<head>
<style> body, html {
margin:0px; padding:0px;
background-color:#fff;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#spacer { height:20px; }
#content { width:900px; margin:0 auto; padding:10px; position:relative; }
#header { height:117px; }
#logo { float:left; width:101px; height:117px; }
#menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px; }
#menu ul { list-style:none; margin:0px; padding:0px; }
#menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
#menu ul li a { color:#333; text-decoration:none; }
#lftmen { float:left; width:140px; margin-top:70px; }
#lftmen ul { margin:0px; padding:0px; list-style:none; }
#lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
#lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
#lftmen ul li a:hover { color:#333; }
#midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<img src="img/bg.jpg" class="bg" />
<div id="content">
<div id="header">
<div id="logo"><img src="img/logo.png" /></div>
<div id="menu">
<ul>
<li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<div id="lftmen">
<ul>
<li>Forside</li>
<li>Se video</li>
<li>Udbyd tilbud</li>
<li>Information</li>
<li>Kontakt</li>
<li>Hent: android</li>
</ul>
</div>
Well first of all why would you use <img/> to define the page background pattern.
It is more suitable to define this kind of background directly in css.
e.g.:
body {
background: url(img/bg.jpg) 0 0 no-repeat;
...
}