tabbed menu [Archive] - Dynamic Drive Forums

View Full Version : tabbed menu

pioneer1970

12-17-2008, 12:23 AM

i'm useing Uber Round Color Tabs is there anyway i can put it in the center of my page

Schmoopy

12-17-2008, 12:26 AM

The most basic way would be to use:

#menu{
text-align:center;
}
in your css for the menu, a link to your site would be useful if this doesn't work though.

bluewalrus

12-17-2008, 12:26 AM

I have no idea what that means, more specific, maybe link or code?

pioneer1970

12-17-2008, 12:33 AM

heres the code

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.ubercolortabs{
padding:0;
width: 100%;
overflow: hidden;
background: transparent;

}

.ubercolortabs ul{
font: bold 9px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}

.ubercolortabs a{
float: left;
color: white;
background: #804000 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float:none;
}

.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}

.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 0%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

bluewalrus

12-17-2008, 01:11 AM

I need the html as well I don't know what is where.

pioneer1970

12-17-2008, 01:19 AM

if you need more of the html let me know

</head>

<body background="images/SimpleCross1024.jpg" alink="#d2691e" link="#d2691e" vlink="#d2691e" text="#d2691e" >
<center><table border="0" cellpadding="0" cellspacing="15" summary="" width="0%">
<tbody>
<tr>
<td><center><img alt="goldcros[1] (16K)" src="images/goldcros[1].gif" height="75" width="55"></center><td></td>
<td><center>God's Grace Saves</center></td>
<td><center><img alt="goldcros[1] (16K)" src="images/goldcros[1].gif" height="75" width="55" ></center></td>
</tr></tbody>
</table></center> 

<div class="ubercolortabs">
<ul>
<li><a href="index.htm" style="margin-left: 12px">Home</a></li>
<li><a href="whatwebelieve.htm">Statement Of Faith</a></li>
<li><a href="prayerlist.htm">Prayer list</a></li>
<li><a href="testimonies.htm">Testimonies</a></li>
<li><a href="praise.htm">Praise</a></li>
<li><a href="biblequiz.htm">Quiz</a></li>
<li><a href="http://godsgracesaves.com/forum">Community</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="credits.htm">Credits</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>
</div>

<div class="ubercolordivider"> </div>

bluewalrus

12-17-2008, 01:40 AM

You can try this... No idea how it will really look, an idea. Schmoopy's applied...

.ubercolortabs{
padding:0;
overflow: hidden;
background: transparent;
text-align:center;
width:100%}

pioneer1970

12-17-2008, 01:52 AM

didnt work

bluewalrus

12-17-2008, 02:17 AM

Is this online? Or can you post the whole code use the # sign up in the tool bar above this on your reply

pioneer1970

12-17-2008, 02:30 AM

i have it online http://www.godsgracesaves.com

bluewalrus

12-17-2008, 03:10 AM

ok this will do it...did on my browser

add this to your css

#center {
margin:auto;
width:800px;
}

and this under body in your html

<div id="center">
<div class="ubercolortabs">
<ul>
<li><a href="index.htm" style="margin-left: 12px">Home</a></li>
<li><a href="whatwebelieve.htm">Statement Of Faith</a></li>
<li><a href="prayerlist.htm">Prayer list</a></li>
<li><a href="testimonies.htm">Testimonies</a></li>
<li><a href="praise.htm">Praise</a></li>
<li><a href="biblequiz.htm">Quiz</a></li>
<li><a href="http://godsgracesaves.com/forum">Community</a></li>

<li><a href="links.htm">Links</a></li>
<li><a href="credits.htm">Credits</a></li>
<li><a href="contact.htm">Contact</a></li>

</ul>
</div>
</div>

pioneer1970

12-17-2008, 03:23 AM

i cant get it to work i may be doing something wrong. does it matter were i add

#center {
margin:auto;
width:800px;
}

in my css

bluewalrus

12-17-2008, 04:28 AM

nope...should go anywhere in there gotta pt in the html as well

pioneer1970

12-17-2008, 05:02 AM

i tred it never worked can you add it then send all of the code heres my site again
www.godsgracesaves.com

bluewalrus

12-17-2008, 05:32 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>God's Grace Saves - ABC'S Of Salvation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta name="description" content="God's gift to us is everlasting life through Jesus Christ. All we have to do is have faith and follow these 3 easy steps Accept, Believe and Confess Ephesians 2:8.9 For by grace are ye saved through faith;, not of works.
" >
<meta name="keywords" content="everlasting, life, everlasting life, grace, god's gift, jesus christ, grace, prayer, lord, faith, savior, gift, jesus, lord jesus, grace saves, testimonies, salvation, abc's, lords grace, christian" >
<META content=C879618DA71D468F99351C86D910B494 name=msvalidate.01>
<META content=15a2d666e058dc7f name=y_key>
<style type="text/css">
body{background-attachment: fixed;}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.ubercolortabs{
margin:auto;
padding:0;
overflow: hidden;
background: transparent;
text-align:center;
}
.ubercolortabs ul{
font: bold 9px Arial, Verdana, sans-serif;
margin:auto;
padding: 0;
list-style: none;
}
.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
margin:auto;
padding: 0;
text-transform: uppercase;
}
.ubercolortabs a{
float: left;
color: white;
background: #804000 url(images/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}
.ubercolortabs a span{
float: left;
display: block;
background: transparent url(images/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
text-align:center;
margin:auto;
}
.ubercolortabs a span{
float:none;
text-align:center;
margin:auto;
}
.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}
.ubercolortabs a:hover span{
background-color: transparent;
}
.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 0%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
#center {
margin:auto;
width:800px;
}
</style>
<LINK href="/favicon.ico" rel="shortcut icon">
</head>
<body background="images/SimpleCross1024.jpg" alink="#d2691e" link="#d2691e" vlink="#d2691e" text="#d2691e" >
<center><table border="0" cellpadding="0" cellspacing="15" summary="" width="0%">
<tbody>
<tr>
<td><center><img alt="goldcros[1] (16K)" src="images/goldcros[1].gif" height="75" width="55"></center><td></td>
<td><center>God's Grace Saves</center></td>
<td><center><img alt="goldcros[1] (16K)" src="images/goldcros[1].gif" height="75" width="55" ></center></td>
</tr></tbody>
</table></center> 
<div id="center">
<div class="ubercolortabs">
<ul>
<li><a href="index.htm" style="margin-left: 12px">Home</a></li>
<li><a href="whatwebelieve.htm">Statement Of Faith</a></li>
<li><a href="prayerlist.htm">Prayer list</a></li>
<li><a href="testimonies.htm">Testimonies</a></li>
<li><a href="praise.htm">Praise</a></li>
<li><a href="biblequiz.htm">Quiz</a></li>
<li><a href="http://godsgracesaves.com/forum">Community</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="credits.htm">Credits</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</div>
</div>
<div class="ubercolordivider"> </div>
<center>God's gift to us is everlasting life through our Lord and Savior Jesus Christ 
All we have to do is have faith and follow these 3 easy steps Accept, Believe and Confess

</center> 
<center>Ephesians 2:8 For by grace are ye saved through faith; 
and that not of yourselves: it is the gift of God:
</center>
<center>Ephesians 2:9Not of works, lest any man should boast. 
</center> 
<center>ABC'S Of Salvation</center> 
<center>1. Admit That You Are A Sinner.</center> 
<center>Romans 3:10 As it is written, There is none righteous, no, not one: </center> 
<center>Romans 3:23 For all have sinned, and come short of the glory of God;</center> 
<center>Results Of Sin And Gods Gift to Us. </center> 
<center>Romans 6:23 For the wages of sin is death; but the gift of God is eternal life through Jesus Christ our Lord. </center> 
<center>What Did Jesus Do For Us?</center> 
<center>Romans 5:8 But God commendeth his love toward us, in that, while we were yet sinners, Christ died for us.</center> 
<center><img alt="SimpleCross-bar2 (2K)" src="images/SimpleCross-bar2.gif" height="4" width="469"></center> 
<center>2. Believe In The Lord Jesus.</center> 
<center>John 3:36 He that believeth on the Son hath everlasting life: and he that believeth not the 
Son shall not see life; but the wrath of God abideth on him. </center> 
<center>Romans 10:10 For with the heart man believeth unto righteousness; 
and with the mouth confession is made unto salvation. </center> 
<center><img alt="SimpleCross-bar2 (2K)" src="images/SimpleCross-bar2.gif" height="4" width="469"></center> 
<center>3. Confess The Lord Jesus. </center> 
<center>Romans 10:9 That if thou shalt confess with thy mouth the Lord Jesus, 
and shalt believe in thine heart that God hath raised him from the dead, 
thou shalt be saved. </center> 
<center>Romans 10:13 For whosoever shall call upon the name of the Lord shall be saved.
</center> 
<center><img alt="SimpleCross-bar2 (2K)" src="images/SimpleCross-bar2.gif" height="4" width="469"></center> 
<center>Next Say This Prayer Believing With All Your Heart 
Lord Jesus, 
I know that I am a sinner. Lord the sinful life that I lived separated me from you.
Lord forgive me of my sins. I know I owe a sin debt that I cannot pay. 
Lord I believe that you died on the cross and rose on the third day
to pay my sin dept.Lord I'm sorry for my sins. From this day forward 
I will put all my trust in you, Lord show me how to live a Christian life 
In Jesus name,Amen
</center> 

<center><a href="http://www.audio-bible.com/bible/bible.html"><img alt="www.audio-bible.com" src="images/40x400.gif" height="40" width="400"></a></center> 
<center><a href="http://christianguestbook.org/cgi-bin/members/guestbook.cgi?userid=9980305145823">

<img alt="cgbgold (7K)" src="images/cgbgold.gif" height="50" width="125"></a></center> 

<center>
<A href="http://www.easycounter.com/"><IMG
alt="HTML Hit Counter" src="http://www.easycounter.com/counter.php?pioneer1970"
border=0></A> <A href="http://www.easycounter.com/FreeCounter3.html">Free
Web Counters</A></center> 
<center><a href="copyrightinfo.htm">Copyright Information</a></center> 
<center>This site is best viewed in 1024x768 screen resolution <a href="copyrightinfo.htm">Click Here</a> If you are not sure how to change your screen resolution</center> 
<center>NOTE: The links provided below are not necessarily the opinion or statement of God's Grace Saves.</center>
<center><table border="0" cellpadding="0" cellspacing="10" summary=""width="100">
<tr>

<td><a href="http://www.biblestudynotes.org/topsites/in.php?id=760"><img src="http://www.biblestudynotes.org/topsites/button.php?id=760" alt="" border="0" ></a></td>
<td><A HREF="http://topsites.christiansunite.com/vote.cgi?1227244468" target="_top"><IMG SRC="http://topsites.christiansunite.com/images/vote.gif" alt=""HEIGHT="60" WIDTH="120" BORDER="0"></A></td>
<td><a href="http://www.kjv-1611.com/"><img src="http://www.kjv-1611.com/button.php?u=pioneer1970" alt="KJV-1611 Authorized Version Topsites" border="0"></a></td>
<td>
<a href="http://christiantraffic.gotop100.com/in.php?ref=172" target="_blank">
<img src="http://christiantraffic.gotop100.com/lists/christiantraffic/custombanners/29530.JPG" alt=""border="0" width="88" height="31"> </a>
</td>
<td><a href="http://www.christianforumsite.com/topsites/"><img src="http://www.christianforumsite.com/topsites/button.php?u=pioneer1970" alt="CFS Top Christian Websites" border="0"></a></td>
<td>
<a href="http://cybermin.gotop100.com/in.php?ref=360" target="_blank">
<img src="http://cybermin.gotop100.com/lists/cybermin/custombanners/15398.gif"alt="" border="0" width="100" height="40"> </a>
</td>
</tr>
</table>

bluewalrus

12-17-2008, 05:33 AM

part 2

</center>

<center><table border="0" cellpadding="0" cellspacing="10" summary=""width="0">
<tr>
<td><a href="http://www.klove.com">k Love Radio</a></td>
<td><a href="http://www.christianweb100.com/">
<img src="http://www.christianweb100.com/button.php?u=pioneer1970" alt="Christian Web 100 - Top Christian Websites" border="0">
</a></td>
<td><A href="http://www.hisimage.org"><IMG
style="WIDTH: 173px; HEIGHT: 29px" height=24 alt=""
src="images/SimpleCross-ihi.gif" width=142></A></td>
</tr>
</table></center>
</body>
</html>

me_myself

12-17-2008, 08:48 PM

pioneer1970, great website my bro... May god bless what you do.

pioneer1970

12-18-2008, 03:36 AM

Thanks bluewalrus for the help with the code that you gave it didnt work for me. So i'm useing another menu

Thanks me_myself doing what i feel i'm being led to do