Jump to content

background image not appearing for <li> item when relative positioned!!

barbs75

By barbs75
in CSS Help

 Share

Recommended Posts

barbs75 Member

barbs75

Posted
Posted

Hey guys,

 

I have been spending a seriously long amount of time sorting out all the positioning of my objects on my page from AP to Relative positioning, due to the fact i wanted to use the footerStickAlt tutorial work.

 

I ahve now made pretty much everything relative or have positioned using floats which works really well now, and sticky Footer now works really well.

 

The only problem i am having is with my navigation menu. I have created this using a horizontal list, with the UL item having a background for my hover states for my buttons, then the buttons over the top as a background for each LI setting the background imaging and background color to none and transparent when hovered, to create the rollover effect.

 

This all works fine when the buttons are positioned in AP, but when i try to make each LI button relative to the list, the background image doesnt appear at all?? I thought that it might have shot off somehwere on the page, but i tried typing in normal text in the LI and that appears fine, so its just the background not working?!?!

 

Im really stumped as to what might be problem, can anyone help me??

 

Below is my HTML code and my CSS, and the url to my site is www.go4home.co.uk if you wanna see the page for an idea of how it looks!!

 

cheers

 

Craig

 

Barbs75

 

HTML

<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Style1.css" />
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon"/>
<title>Go4home.co.uk - Find your dream property, or advertise your house for sale on the property market on go4home.co.uk</title>

<meta name="Description" content="Find your dream property online, Search for any property for
sale in a range of areas in the UK with go4home" />
    
<meta name="Keywords" content="Find a property, find property, find property in UK,
search for a property, Property up for sale, find property up for sale, Property market,
    Advertise your home to sell, go4home.co.uk, go4home" />
    

</head>

<body>
<div id="mainContainer">
    <div id="container-Content">
   	  <div id="content-TopContent">
  	<!--<div id="menuHoverStates"></div>-->
        <div id="TopBar">
        <div id="Logo"><img src="Images/Go4Home-logo.jpg" alt="Go4home.co.uk" width="201" height="39" /></div>
        <div id="myProfile"></div>
        <div id="Login"><a href="login_form.php">login</a></div>
        <div id="NotRegisteredText"><a class="blue" href="register.php">Not Registered?</a></div>
        </div>
        <ul id="navigationMenu">
            <li class="HomeButton">hello<a href="index.php"></a></li>
		<li class="SearchButton"><a href="Construction Page.html"></a></li>
            <li class="MoneyMarketButton"><a href="Construction Page.html"></a></li>
            <li class="GoBuyButton"><a href="Construction Page.html"></a></li>
            <li class="GoSellButton"><a href="Construction Page.html"></a></li>
            <li class="HelpButton"><a href="Construction Page.html"></a></li>
        </ul>
      </div>
      
        <div id="content-leftcolumn">
            <div id="BuyingWindow">
            	<h2 class="shadow">Buying?</h2>
            	<h1>Looking for that special home?</h1>
                <p>Enter a town, a postcode <br />in Gloucestershire, or even a property <br />
                	reference no. and start searching today!</p>
                <div id="SearchBar"></div>
                <div id="SearchBarButton"></div>
            </div>
        <div id="ContentWindow">
            <h1 class="blueSmall">How Much Can i Expect<br />
                From Selling My House?</h1>
            </div>
          <div id="ContentWindow" class="pink">
            <h1 class="yellow">Moving House</h1>
          </div>
      </div><!--end of left-column-->
        
            <div id="content-rightcolumn">
            <div id="SellingWindow">
           	  <h2 class="shadow">Selling?</h2>
                <h1 class="selling">Selling up couldn't be any easier</h1>
                <p>Selling couldn't be easier with Go4home,<br /> offering top advice, and opening the door to a new<br />and exciting 									                   property market</p> 
              <div id="FindOutMoreButton"></div>           
            </div>
            <div id="ContentWindow" class="orange">
            	<h1 class="white">Finance & Policy</h1>
            </div>
            <div id="ContentWindow" class="aboutUs">
            	<h1 class="green">About Us</h1>
            	<div id="AboutUsLogo"></div>
            	<p class="blue">learn more about Go4home, the <br />new and most exciting <br />property market on the web!</p>
            </div>
            </div><!--end of right-column-->
            </div><!--end of container-Content-->



<div id="footer">
            <ul id="footerMenu">
                <li><a href="Construction Page.html">Go4home terms & conditions</a></li>
                <li><a href="Construction Page.html">Accessibility</a></li>
                <li><a href="Construction Page.html">About Us</a></li>
                <li><a href="Construction Page.html">Privacy Policy</a></li>
                <li><a href="Construction Page.html">Contact Us</a></li>
  			</ul>
<div id="CopyrightText"></div>
</div>
</div>
</body>
</html>

 

CSS

html, body {
background-color:#FFFFFF;
color:#FFFFFF;
font-size: 12px;
font-weight:bold;
font-family: Century Gothic;
text-align:center;
margin: 0;
padding: 0;
height: 100%;
}

body.shadow {
height: 33px;
filter: Shadow(Color=#FFFFFF, 	
		Direction=135, 
		Strength=2);	
}

#mainContainer {
/*margin: 0 0 -25px 25px;*/
width: 760px; 
background:#FF0000;
text-align:left;
position: relative; 
min-height: 100%; 
height: auto !important; 
height: 100%;

}

#footer {
width: 100%; 
background:url(Images/ContentBar2.jpg) no-repeat;
background-position:center; 
position: absolute; 
bottom: 0 !important; 
bottom: -1px; 
height:30px;
}

#container-Content {
background:#99FF33;
/*background-position:6px 158px;*/
width: 760px;
height:100%;  
position: relative;
padding-bottom: 35px;
}

#content-TopContent {
background-color:#0066FF;
background-repeat:no-repeat;
width:100%;
}

#content-centrecontent {
width:100%;
}
#content-leftcolumn {
background-color:#FF00FF;
float:left;
width:51%;
height:100%;
}

#content-rightcolumn {
background-color:#9900FF;
float:right;
width:49%;
height:100%;
}

.blackText {
color:#000000;
}

a {
font-size: 9px;
font-weight: bold;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}

a.blue {
font:"Century Gothic";
font-style:normal;
font-size:10px;
color:#487381;	
}
a.blue:hover {
text-decoration: underline;
color:#174554;
}

p {
color:#FFFFFF;
font-size: 12px;
font-family: Century Gothic;
text-align:left;
position:relative;
left:20px;
top:-20px;
}

p.blue {
font-weight:bold;
font-size:10px;
color:#174554;
position:relative;
left:10px;
top:-10px;
z-index:42;
}

hr {
color:#FF0000;
}

h1 {
position:relative;
left:20px;
top:-15px;
color:#4beb55;
font-size:17px;
font-weight:bolder;
z-index:32;
}

h1.selling {
color:#174554;
z-index:33;
}

h1.blueSmall {
color:#174554;
font-size:14px;
position:relative;
top:5px;
left:7px;
}

h1.yellow {
color:#fcf010;
position:relative;
top:5px;
left:27px;
}

h1.white {
color:#FFFFFF;
position:relative;
top:5px;
left:20px;
}

h1.green {
color:#66da6f;
position:relative;
top:5px;
left:50px;

}

h2 {
font-size:22px;
font-weight:bold;
padding-top:5px;
padding-left:35px;
padding-bottom:-20px;
}

h2.shadow {
height: 33px;
filter: Shadow(Color=#080808, 	
		Direction=135, 
		Strength=5);
}

h3 {
font-size:19px;
font-weight:bold;
}


.textSmall {
font-size:10px;	
}

.textSmallGreen {
font-size:10px;
color:#00FF00;
}

#TopBar {
background-image:url(Images/topBar.jpg);
position:relative;
left:0px;
top:-4px;/*-260*/
width:754px;
height:93px;
padding:0;
z-index:5;
visibility: visible;
}

#myProfile {
background-image:url(Images/myProfile.png);
position:relative;
left:655px;
top:-27px;
width:72px;
height:65px;
z-index:8;
visibility: visible;
}

#Logo {
position:relative;
left:29px;
top:30px;
width:207px;
height:40px;
z-index:7;
visibility: visible;
}

#Login {
position:relative;
width:29px;
height:15px;
z-index:9;
left: 674px;
top:-54px;
visibility: visible;
}

#NotRegisteredText {
position:relative;
left:651px;
top:-48px;
width:77px;
height:11px;
z-index:6;
visibility: visible;
}

#NotRegisteredText:link {
font:"Century Gothic";
font-style:normal;
font-size:10px;
color:#174554;
}

#NotRegisteredText:a:hover {
text-decoration:underline;
}

#menuHoverStates {
background-image:url(Images/MenuHoverStates.jpg);
position:relative;
height:156px;
width:760px;
left: 2px;
}

#navigationMenu {
background:url(Images/MenuHoverStates.jpg);
position:relative;
top:-20px;
width:740px;
height:40px;
margin: 1em 0; 
padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#fff;
text-decoration: none;
}

#navigationMenu li {
display: inline;
list-style: none;
padding: 0 0 50px 0;
margin: 0;
}

.HomeButton a {
background-image:url(Images/leftMenuBackground.jpg);
text-align:center;
width:105px;
height:49px;
z-index:40;
visibility: visible;
}

.HomeButton a:hover {
background-image:none;
background-color:transparent;
}

.SearchButton a {
background-image:url(Images/centralMenuBackground.jpg);
position:relative;
width:113px;
height:49px;
z-index:11;
left: 108px;
top: 99px;
visibility: visible;
}

.SearchButton a:hover {
background-image:none;
background-color:transparent;
}

.MoneyMarketButton a {
background-image:url(Images/centralMenuBackgroundLARGE.jpg);
position:relative;
width:200px;
height:49px;
z-index:12;
left: 221px;
top: 0px;
visibility: visible;
}

.MoneyMarketButton a:hover {
background-image:none;
background-color:transparent;
}

.GoBuyButton a{
background-image:url(Images/MenuGoBuy.jpg);
position:absolute;
width:110px;
height:51px;
z-index:13;
left: 419px;
top: 99px;
visibility: visible;
}

.GoBuyButton a:hover {
background-image:none;
background-color:transparent;
}

.GoSellButton a{
background-image:url(Images/MenuGoSell.jpg);
position:absolute;
width:110px;
height:51px;
z-index:14;
left: 531px;
top: 99px;
visibility: visible;
}

.GoSellButton a:hover {
background-image:none;
background-color:transparent;
}

.HelpButton a {
background-image:url(Images/rightMenuBackground.jpg);
position:absolute;
width:116px;
height:49px;
z-index:15;
left: 641px;
top: 99px;
visibility: visible;
}

.HelpButton a:hover {
background-image:none;
background-color:transparent;
}

#BuyingWindow {
float:left;
background-image:url(Images/BuyingWindow.jpg);
width:374px;
height:204px;
z-index:16;
visibility:visible;
}

#SellingWindow {
/*position:relative;
left:0px;
top:0px;*/
float:left;
background-image:url(Images/SellingWindow.jpg);
width:372px;
height:204px;
z-index:17;
visibility: visible;
}

#ContentWindow {
/*position:relative;
left:6px;
top:362px;*/
float:left;
background-image:url(Images/MovingHouseWindow.jpg);
background-repeat:no-repeat;
padding-right:7px;
width:183px;
height:147px;
z-index:18;
visibility: visible;
}

#ContentWindow.pink {
float:left;
background-image:url(Images/PinkWindow.jpg);
background-repeat:no-repeat;
z-index:19;
}

#ContentWindow.orange {
float:left;
background-image:url(Images/OrangeWindow.jpg);
background-repeat:no-repeat;
padding-left:0px;
padding-right:6px;
z-index:20;
}

#ContentWindow.aboutUs {
float:left;
background-image:url(Images/AboutUsWindow.jpg);
background-repeat:no-repeat;
padding-left:0px;
padding-right:0px;
z-index:22;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:relative;
top:100px;
left:100px;
width:134px;
height:13px;
z-index:29;
}


#BuyingText {
position:relative;
z-index:30;
width: 89px;
left: 40px;
top: 162px;
visibility: visible;
}

#SellingText {
position:absolute;
z-index:31;
width: 89px;
left: 431px;
top: 162px;
visibility: visible;
}

#SearchBar {
background-image:url(Images/SearchBar.jpg);
border:solid;
border-width:thin;
border:#333333;
width:220px;
height:21px;
margin-left:20px;
margin-top:-20px;
z-index:37;
visibility: visible;
}

#SearchBarButton {
background-Image:url(Images/SearchBarButton.png);
position:relative;
left:245px;
top:-28px;
width:63px;
height:30px;
z-index:36;
visibility: visible;
}

#SearchBarButton:hover {
background-image:url(Images/SearchBarButtonHover.png);
}

#TermsConditionsText {
position:absolute;
left:188px;
top:524px;
width:133px;
height:16px;
z-index:24;
visibility: visible;
}

#Background {
background-color:#FFFFFF;
position:absolute;
left:9.5%;
top:0%;
width:80%;
height:100%;
z-index:1;
visibility: visible;
}

#AboutUsLogo {
background-Image:url(Images/Go4Home-logoAboutUs.jpg);
position:relative;
left:5px;
width:166px;
height:47px;
z-index:41;
visibility: visible;
}

#FindOutMoreButton {
background-image:url(Images/FindOutMoreButton.jpg);
position:relative;
left:20px;
top:-20px;
width:114px;
height:33px;
z-index:38;
visibility: visible;
}

#FindOutMoreButton:hover {
background-Image:url(Images/FindOutMoreButtonHover.jpg);
}

#submitCustomerForm {
position:absolute;
left:99px;
top:280px;
width:583px;
height:50px;
z-index:48;
visibility: hidden;
}

#Title {
position:absolute;
left:100px;
top:170px;
width:200px;
height:35px;
z-index:49;
font-size:24px;
font-weight:bold;
visibility: hidden;
}

#loginText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
z-index:49;
visibility: hidden;
}

#RegisterText {
position:absolute;
left:100px;
top:218px;
height:38px;
width:580px;
visibility: visible;
z-index:49;
}

#RegisterText2 {
position:absolute;
left:100px;
top:261px;
height:27px;
width:580px;
visibility: visible;
z-index:49;
}

.asterix {
color: #00FF00;
font-size:17px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.divider {
color:#FF0000;
}

input.fade {
background-image:url(Images/SearchBar.jpg); 
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

input.submit {
background-image:url(Images/submitButton.jpg);
color:33ac45;
width:80px;
height:31px;
}

select.fade{
background-image:url(Images/SearchBar.jpg); 
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

option.fade {
background-image:url(Images/SearchBar.jpg); 
border-color:#CCCCCC;
color:#174554;
font:"Century Gothic";
}

/*Footer CSS for index page */

#footerMenu {
height: 25px;
padding-left:145px;
padding-top:1px;
width:760px;
}

#footerMenu li {	
display: inline;	
list-style: none;	
padding: 0px 12px 0px 0px;	
margin: 0;
}

#CopyrightText {
background-image:url(Images/CopyrightText.jpg);
position:relative;
left:300px;
top:-10px;
width:134px;
height:13px;
display:block;
}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.