A better way to repeat these yellow buttons?

datafan · February 8, 2008

I am working on a css template for one of my websites. My question is, is there a better way do repeat these yellow buttons? Take a look here please http://www.goodstylist.com/files/test/new_page_top.php

Yes it works but it seems awefull bulky if you know what I mean. I have been playing with it and seem to have trouble with the background image "yellow button" resizing to the width of the font. Here is the code:

#leftcontent {
position: absolute;
left:0px;
top:0px;
width:150px;
background-color:#000080;
}

#centercontent {
position: relative;
background-color:#000080;
margin-left: 50%;
left:-400px;
margin-right:0px;
width:800px;
top: 5px;
text-align: center;
}

#rightcontent {
position: absolute;
right:0px;
top:0px;
width:150px;
background-color:#000080;
border:0px;
}


#banner_center {
position: relative;
background-image: url(../siteimages/500X100BANNER.jpg);
background-position: center center;
background-repeat: no-repeat;
height:100px;
margin-left: 50%;
left:-400px;
margin-right:0px;
width:800px;
text-align: center;
}

#banner_left {
position: absolute;
left:0px;
bottom:0px;
background-image: url(../siteimages/150X100BIZAD.jpg); 
background-repeat: no-repeat;
height:100px;
width:150px;
}


#banner_right {
position: absolute;
right:0px;
bottom:0px;
background-image: url(../siteimages/150X100BIZAD.jpg); 
background-repeat: no-repeat;
height:100px;
width:150px;
}

body {
background-color: #000080;

}

.yellow_button  {
position: relative;
width:150px;
height:30px;
background-color: #000080;
}

.yellow_button a {
position: absolute;
width:150px;
height:30px;
top: 0px;
left: 0px;
background: url(../siteimages/yellowbutton.gif);
background-repeat: no-repeat;
text-align: center;
font-size:20px;
font-weight: 700;
color: #000080;
vertical-align: middle;
}	


font {
font-family: arial;
}

font.yellow_4 {
color: yellow;
font-size:20px;
font-weight: 700;
text-align: center;
}

font.logo {
font-family: century gothic;
font-size: 52px;
font-weight: 700;
color: #99ccff;
}

font.under_logo {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}

font.light {
color: #99CCFF;
}

font.dark {
color: #000080;
}

And the html: (div /div div /div div /div.... you get the picture...)

<?php //goodstylist.com page_.php template by Jim Marquardt

//Address error handling. Turn off after testing.
ini_set ('display_errors', 1);
error_reporting (E_ALL & ~E_NOTICE);

?>
<!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" />
<title>Hairstyles | Haircuts | Hair Cuts | Search | Stylists | Community | Salons</title>
<LINK REL=STYLESHEET HREF="../test/newstyle.css" TYPE="text/css">
<META NAME="Description" CONTENT="Hair Stylists community with free profiles, nation wide search and client rating system.">
<META NAME="Keywords" CONTENT="hairforum,hairstyles,hair,styles,clients,haircut,haircutting,hairstyling,forum,salons">
<META NAME="Language" CONTENT="en">
<META NAME="Robots" CONTENT="All">
</head>
<body>

<!--Begin banner across top of page 800w X 100h-->
<div id="banner_center">

<div id="banner_left">
	<br /><font size="3" color="red"><b>Business Ads</b></font><br /><font size="2" color="red">Premium Ad Spots<br /><a href="mailto:datafan@datafan.com">Contact Us Now </a></font>
</div>


	<font class="logo">goodstylist.com</font>
	<br />
	<font class="under_logo">The Place To Promote Yourself As A Stylist</font>


<div id="banner_right">
	<br /><font size="3" color="red"><b>Business Ads</b></font><br /><font size="2" color="red">Premium Ad Spots<br /><a href="mailto:datafan@datafan.com">Contact Us Now </a></font>
</div>

</div>
<!--End banner across top of page-->

<!--Start left colum...........YELLOW BUTTONS!-->
<div id="centercontent">

<div id="leftcontent">
	<font class="yellow_4">Client Services</font><br />

	<div class="yellow_button">
		<a href="http://www.goodstylist.com/files/search.php">Find A Stylist</a><br />
	</div>

	<div class="yellow_button">
		<a href="http://www.goodstylist.com/files/search.php">Another Link</a><br />
	</div>

	<div class="yellow_button">
		<a href="http://www.goodstylist.com/files/search.php">Another Link</a><br />
	</div>

	<div class="yellow_button">
		<a href="http://www.goodstylist.com/files/search.php">Another Link</a><br />
	</div>

	<div class="yellow_button">
		<a href="http://www.goodstylist.com/files/search.php">Another Link</a><br />
	</div>


</div>

ok, is there content in the center as well?

<div id="rightcontent">
<p> looking for content on this side as well</p>
</div>
</div>	



</body>
</html>

Sign In

A better way to repeat these yellow buttons?

Recommended Posts

datafan

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information