View Full Version : DIV and EXTERNAL CSS

11-07-2008, 05:03 PM
Hi all!

I am trying create rollover buttons by using DIV tags within html page and use an external CSS sheet to control these rollover buttons.

Here is what I got so far in HTML page:

<body onload="MM_preloadImages('assets/buttons/botton_rest_roll.gif','assets/buttons/botton_about_roll.gif','assets/buttons/botton_menu_roll.gif','assets/buttons/botton_contact_roll.gif','assets/buttons/botton_gallery_roll.gif','assets/buttons/botton_survey_roll.gif')">

<div id="intro">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="953" height="400" title="intro">
<param name="movie" value="assets/flash/intro.swf" />
<param name="quality" value="high" />
<embed src="assets/flash/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="953" height="400"></embed>

<div id="spacer"><img src="assets/images/spacer.gif" width="953" height="1" /></div>

<div id="list">
<li id="nav-home"><a href="index.html">Home</a></li>
<li id="nav-design"><a href="design.html">Site Design</a></li>
<li id="nav-host"><a href="hosting.html">Hosting</a></li>
<li id="nav-port"><a href="index2.html">Portfolio</a></li>
<li id="nav-contact"><a href="contact.html">Contact</a></li>

<div id="spacer"><img src="assets/images/spacer.gif" width="953" height="1" /></div>

<div id="logo"><img src="assets/logos/dragon14.gif" width="953" height="130" /></div>


Here is the external CSS:

#list {
font-size: 12px;
color: #000000;
width: 953px;
float: center;
padding-left: 300px;
#list li {
list-style: none;
margin-bottom: 1px;
#list a {
display: block;
width: 953px;
text-decoration: none;
color: #A13713;
height: 20px;
background-position: left top;
font-size: 1px;
#list a:hover {
background-position: left bottom;
#list #nav-rest a {
background-image: url(botton_rest.gif);
#list #nav-about a {
background-image: url(botton_about.gif);
#list #nav-menu a {
background-image: url(botton_menu.gif);
#list #nav-contact a {
background-image: url(botton_contact.gif);
#list #nav-gallery a {
background-image: url(botton_gallery.gif);
#list #nav-survey a {
background-image: url(botton_survey.gif);

I also have attached the buttons and an image to show what it should look like. If you have another easier way to do these horizontal buttons, please let me know.

Thanks in advanced!!

11-07-2008, 05:18 PM
No "float center" - left or right. Dump that padding as well.