• Locked
3 replies [Last post]
Fri, 2010-08-13 14:05
akayrak
akayrak's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+3
Joined: 2010-08-13
Posts: 2
Points: 3

Hi, I got these html and css codes. However I can not figure out why my button-active is not being displayed. I do not see its background; there exist just blank space.

<body>
 
<div id="header">
	<div id="row1">
	</div>
	<div id="mainmenu">
		<div class="button-active-left"></div>
		<div class="button-active-center"></div>
		<div class="button-active-right"></div>
		<!--<div class="mainmenu-remain"/>-->
	</div>
	<div id="row3">
	</div>
</div>
 
<div id="spaceone">
</div>
 
<div id="mainwrapper">
	<div id="col1">
	</div>
	<div id="col2">
	</div>
	<div id="col3">
	</div>
</div>
 
<div id="spacetwo">
</div>
 
<div id="footer">
</div>
 
</body>

body{
padding:0;
margin:0;
background:#fff;
}
h2{
margin:0;
font:bold 18px Arial, Helvetica, sans-serif;
color:#000; 
}
p{
font:normal 12px Arial, Helvetica, sans-serif;
color:#000; 
}
 
#header{
width:980px;
margin-left:auto ;
margin-right:auto ;
}
	#row1 {
	height:10px;
	background:#D56015;
	}
	#mainmenu {
	height:28px;
	/*background:#55789E;*/
	}
		#button-active-left {
			width:3px;
			/*padding-bottom: 28px;*/
			background: url(./main_menu_buttons.png) 0px 0px no-repeat;
			background:#ffffff;
		}
		#button-active-center {
			width:3px;
			padding-bottom: 28px;
			background: url(./main_menu_buttons.png) 0px -30px repeat-x;
		}
		#button-active-right {
			width:3px;
			padding-bottom: 28px;
			background: url(./main_menu_buttons.png) 0px -60px no-repeat;
		}/*
		#mainmenu-remain {
			width:100%;
		}*/
	#row3 {
	height:10px;
	background:#606060;
	}
 
#spaceone{
margin-left:auto ;
margin-right:auto ;
width:980px;
height:25px;/*for ie*/
min-height:25px;/*for ff*/
background:#bebebe;
}
#mainwrapper{
clear:both;
width:980px;
margin-left:auto ;
margin-right:auto ;
}
#col1{
float:left;
min-height:25px;/*for ff*/
width:180px;
background:#eee;
}
#col2{
float:left;
min-height:25px;/*for ff*/
width:620px;
background:#E5EECC;
} 
#col3{
float:right;
min-height:25px;/*for ff*/
width:180px;
background:#eee;
}
#spacetwo{
clear:both;
width:980px;
height:20px;/*for ie*/
min-height:20px;/*for ff*/
background:#fafafa;
margin-left:auto ;
margin-right:auto ;
}
#footer{
clear:both;
width:980px;
min-height:20px;/*for ff*/
background:#ffc;
margin-left:auto ;
margin-right:auto ;
}

Thanks in advance...

Top
Tags:
Fri, 2010-08-13 15:18
#1
Deuce
Deuce's picture
User offline. Last seen 4 weeks 4 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4421
Points: 1840

Use the correct

Use the correct syntax.
class="button-active-left" != #button-active-left

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Mon, 2010-08-16 05:53
#2
akayrak
akayrak's picture
User offline. Last seen 1 year 39 weeks ago. Offline
newbie
Timezone: GMT+3
Joined: 2010-08-13
Posts: 2
Points: 3

You are right. I confused on

You are right. I confused on id and class then changed #button-active-left with .button-active-left (center and left also)

However I see just the center one's background. Not all three of them.

Top
Mon, 2010-08-16 16:11
#3
Deuce
Deuce's picture
User offline. Last seen 4 weeks 4 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4421
Points: 1840

Please post your updated code

Please post your updated code or better yet a link.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
  • Locked