By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

How do I Center My Rollover Buttons Horizontally?

Gregos
P: 6
Remember I'm new at this...
My webpage: http://www.geocities.com/gregos_39/gregos/gregpage.html
My code:

<html>
<head>
<title>Gregos Apple/Mac Help Page</title>
<link href="home_style.css" rel="stylesheet" type="text/css">
<link href="applications_style.css" rel="stylesheet" type="text/css">
<link href="utilities_style.css" rel="stylesheet" type="text/css">
<link href="video_style.css" rel="stylesheet" type="text/css">
<link href="ripping_style.css" rel="stylesheet" type="text/css">
<link href="emailme_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>Mac<img height=78 width=70 src="appleblue.jpg" border=0 >Help</center>
<tr>
<br>
<center><font face=arial><b>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;
document.write(lmonth + " ");
document.write(date + ", " + year);
// End -->
</SCRIPT></b></font>
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "5005-black.swf";obj.TimeZone = "PST";obj.width = 110;obj.height = 30;obj.wmode = "transparent";showClock(obj);</script></center>
<tr>
<p>
<div id="navigation">
<div class="rage_button_146151".
<a href="http://www.geocities.com/gregos_39/gregos/gregpage.html">Home</a></div>
<div class="rage_button_981767".
<a href="http://www.geocities.com/gregos_39/gregos/applications.html">Applications</a></div>
<div class="rage_button_758017".
<a href="http://www.geocities.com/gregos_39/gregos/utilities.html">Utilities</a></div>
<div class="rage_button_171805".
<a href="http://www.geocities.com/gregos_39/gregos/video.html">Video</a></div>
<div class="rage_button_618295".
<a href="http://www.geocities.com/gregos_39/gregos/ripping.html">Ripping</a></div>
<div class="rage_button_688607".
<A HREF="mailto:gregos_39@yahoo.com">E-Mail Me</a></div></div>

<br>
<p>
<br>
<center>You are visitor#<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><a href="http://www.inteliture.com/" target="_blank"><img src="http://www.inteliture.com/cgi-bin/image.pl?URL=29054-35" alt="search engine marketing company" border="0" ></a></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #24092C; text-decoration: none;"> <a href="http://www.inteliture.com/" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #444444; text-decoration: none;" title="search engine optimization">search engine optimization</a> </font></td></tr></table></center>
</body>
</html>
Mar 28 '07 #1
Share this Question
Share on Google+
5 Replies


Gregos
P: 6
Well, I seem to have figured it out on my own... Somewhat...
Mar 29 '07 #2

KevinADC
Expert 2.5K+
P: 4,059
this must make maintenance a real bee-autch:

<link href="home_style.css" rel="stylesheet" type="text/css">
<link href="applications_style.css" rel="stylesheet" type="text/css">
<link href="utilities_style.css" rel="stylesheet" type="text/css">
<link href="video_style.css" rel="stylesheet" type="text/css">
<link href="ripping_style.css" rel="stylesheet" type="text/css">
<link href="emailme_style.css" rel="stylesheet" type="text/css">

why so many different style sheets?
Mar 29 '07 #3

Gregos
P: 6
this must make maintenance a real bee-autch:

<link href="home_style.css" rel="stylesheet" type="text/css">
<link href="applications_style.css" rel="stylesheet" type="text/css">
<link href="utilities_style.css" rel="stylesheet" type="text/css">
<link href="video_style.css" rel="stylesheet" type="text/css">
<link href="ripping_style.css" rel="stylesheet" type="text/css">
<link href="emailme_style.css" rel="stylesheet" type="text/css">

why so many different style sheets?
HeHe... Good question? I'm new at this so I appreciate any help/comments.
I assumed that I would need one for each rollover button?
My question now is: "How do I get the style of my rollover buttons into my new code?" Another words I've made some rollover buttons as you see with all the style sheets and I want to plant them into the new code as it is centered now?

Here is the new code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Gregos Apple/Mac Help Home Page</title>
<style type="text/css">
#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 0px solid #999;
z-index: 1;
}

#navcontainer ul
{
list-style-type: none;
text-align: center;
margin-top: -8px;
padding: 0;
position: relative;
z-index: 2;
}

#navcontainer li
{
display: inline;
text-align: center;
margin: 0 5px;
}

#navcontainer li a
{
padding: 1px 7px;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}

#navcontainer li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}

#navcontainer li a#current
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
</style>
<p>
<link href="home_style.css" rel="stylesheet" type="text/css">
<link href="applications_style.css" rel="stylesheet" type="text/css">
<link href="utilities_style.css" rel="stylesheet" type="text/css">
<link href="video_style.css" rel="stylesheet" type="text/css">
<link href="ripping_style.css" rel="stylesheet" type="text/css">
<link href="emailme_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>Mac<img height=78 width=70 src="appleblue.jpg" border=0 >Help</center>
<br>
<center><font face=arial><b>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var months=new Array(13);
months[1]="January";
months[2]="February";
months[3]="March";
months[4]="April";
months[5]="May";
months[6]="June";
months[7]="July";
months[8]="August";
months[9]="September";
months[10]="October";
months[11]="November";
months[12]="December";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;
document.write(lmonth + " ");
document.write(date + ", " + year);
// End -->
</SCRIPT></b></font>
<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "5005-black.swf";obj.TimeZone = "PST";obj.width = 110;obj.height = 30;obj.wmode = "transparent";showClock(obj);</script></center>
<br>
<br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.geocities.com/gregos_39/gregos/gregpage.html" id="current"><span class="rage_button_146151".>Home</a></li>
<li><a href="http://www.geocities.com/gregos_39/gregos/applications.html">Applications</a></li>
<li><a href="http://www.geocities.com/gregos_39/gregos/utilities.html">Utilities</a></li>
<li><a href="http://www.geocities.com/gregos_39/gregos/video.html">Video</a></li>
<li><a href="http://www.geocities.com/gregos_39/gregos/ripping.html">Ripping</a></li>
<li><a href="mailto:gregos_39@yahoo.com">E-Mail Me</a></li>
</ul>
</div>
<br>
<p>
<br>
<center>You are visitor#<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><a href="http://www.inteliture.com/" target="_blank"><img src="http://www.inteliture.com/cgi-bin/image.pl?URL=29054-35" alt="search engine marketing company" border="0" ></a></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #24092C; text-decoration: none;"> <a href="http://www.inteliture.com/" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #444444; text-decoration: none;" title="search engine optimization">search engine optimization</a> </font></td></tr></table></center>
</body>
</html>
Mar 29 '07 #4

KevinADC
Expert 2.5K+
P: 4,059
I must be missing something, I dont see any roll-over buttons in the code you posted. Can you point them out in your code.
Mar 29 '07 #5

Gregos
P: 6
Your right. I was told to set my buttons up this way in the original post you will see these. I have put in Bold the actual links:


<head>
<link href="home_style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class="rage_button_146151".
<a href="http://www.geocities.com/gregos_39/gregos/gregpage.html">Home</a></div>

</body>
Mar 29 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.