Reply
centering help
Old 06-15-2007, 05:33 AM centering help
Skilled Talker

Posts: 80
Name: Mohammed A.
Location: Ca, USA.
Hello I would like to center the buttons located at http://www.doughboy-entertainment.com/video/
The ones that read "Featured, All Categories, Images, Random, Submit".

I tried using <center> but that wont work.

The page code is...
Quote:
<div id='tabs'>
<ul>
<li><a {if $pagetype eq "feature"}class="current"{/if} href='index.php?pt=feature' accesskey='f'><span class='key'>{$LAN_2|default:"Featured"}</span></a></li>
<li><a {if $pagetype eq "all"}class="current"{/if} href='index.php?pt=all' accesskey='a'><span class='key'>{$LAN_3|default:"All"}</span></a></li>
<li><a {if $pagetype eq "categories"}class="current"{/if} href='categories.php?pt=categories' accesskey='c'><span class='key'>{$LAN_40|default:"Categories"}</span></a></li>
<li><a {if $pagetype eq "images"}class="current"{/if} href='images.php?pt=images' accesskey='i'><span class='key'>{$LAN_4|default:"Images"}</span></a></li>
<li><a {if $pagetype eq "videos"}class="current"{/if} href='videos.php?pt=videos' accesskey='r'><span class='key'>{$LAN_39|default:"Videos"}</span></a></li>
<li><a {if $pagetype eq "submit"}class="current"{/if} href='submit.php?pt=submit&amp;part=1' accesskey='s'><span class='key'>{$LAN_5|default:"Submit"}</span></a></li>
</ul>
And the css page is...
Quote:
/*
project: internet sharing template
author: luka cvrk (www.solucija.com)
*/

body { padding: 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.6em; }

/* links */
a { color: #003B6E; background: inherit; }
a:hover { color: #9EC068; background: inherit; }

.redsmall {
color: #FF0000;
font-size: 12px;
}


/* headings */
h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }
h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }
h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }
h1 a:hover, h2 a:hover { color: #2b2b2b; background: #FFF; }
.title { color: #808080; background: #fff; }

.style1 {color: #0000FF;
text-decoration:underline;}

/* lists and form elements */
ul { margin: 0; padding : 0; list-style : none; }
form { margin: 0; }
input.search { width: 279px; border: none; background: #fff url('images/input.gif') no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }

/* content holder */
#content { margin: 10px auto; width: 960px; }

/* horizontal tabbed menu */
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url('images/barbg.gif') no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; margin-left: auto; margin-right: auto; }
#tabs li a:hover { background: #fff url('images/barcurrent.gif') no-repeat; color: #000; }
#tabs li a.current { background: #fff url('images/barcurrent.gif') no-repeat; color: #2C71AE; }
.key { text-decoration: underline; }

/* search form */
}
#search p { padding: 0; margin: 0; }


/* grey subheader */
.gboxtop { clear: both; height: 8px; background: #dedede url('images/gboxtop.gif') no-repeat; color: #000; }
.gbox { background: #dedede url('images/gbox.gif') no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}


/* left side */
.left { float: left; width: 650px; margin: 0 0 10px 0; }
.left_articles {
margin: 0 20px 15px 10px;
padding: 10px 0 0 0;
text-align: justify;
border-bottom: 1px dotted #ccc;
color: #000;
background: #fff;
}

.calendar { height: 50px; float: left; background: #fff url('images/calendar.gif') no-repeat; width: 50px; padding: 5px 0 0 9px; color: #808080;}
.calendar p { padding: 0; margin: 0; }
.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
.thumbnail { float: left; margin: 0 15px 8px 0; border: 1px solid #dedede; }


/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
.smallboxtop { height: 14px; background: #fff url('images/smallboxtop.gif') no-repeat; color: #000; }
.smallbox { background: #fff url('images/smallbox.gif') no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; }
.smallbox p { padding: 0; margin: 0; }


/* right side */
#right {
float: right;
width: 295px;
margin: 0 0 10px 0;
}
.boxtop { height: 19px; background: #fff url('images/boxtop.gif') no-repeat; color: #000; }
.box { background: #fff url('images/box.gif') no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
.box p { padding: 0; margin: 0;}
.image { float: left; margin: 0 9px 3px 0; }


/* misc */
.buttons { text-align: right; padding: 4px 3px 0 0;}
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: #488EB2 url('images/bluebtn.gif') no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #488EB2 url('images/greenbtn.gif') no-repeat; padding: 1px 17px 5px 10px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #488EB2 url('images/hoverbtn.gif') no-repeat; color: #fff; }


/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}
/* styles for the unit rater */
.ratingblock {
width: 50%;
display:block;
padding-bottom:8px;
margin-bottom:8px;
}

.loading {
height: 30px;
background: url('images/working.gif') 50% 50% no-repeat;
}

.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 30px;
position: relative;
background: url('images/starrating.gif') top left repeat-x;
}

.unit-rating li{
text-indent: -90000px;
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}

.unit-rating li a {
outline: none;
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}

.unit-rating li a:hover{
background: url('images/starrating.gif') left center;
z-index: 2;
left: 0px;
}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating a.r6-unit{left: 150px;}
.unit-rating a.r6-unit:hover{width: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}

.unit-rating li.current-rating {
background: url('images/starrating.gif') left bottom;
position: center;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

.voted {color:#999;}
.thanks {color:#36AA3D;}
.Warning {
color: #FF0000;
font-size: 12px;
font-style: italic;

}
.bannerbox{
margin: 0px auto;
background-color:#999999;
text-align: left;
width:800px;
height: 88px;
overflow: hidden;
border: black medium solid;
}
.content{
text-align:left;
width: 800px;
border: black medium solid;
background-color:#383838;
margin: 0px auto;
border-top: none;
border-bottom: black thin solid;
}
.footer{
width:800px;
height:20px;
background-color:#383838;
margin: 0px auto;
border-top: none;
overflow: hidden;
}
.header{
width:800px;
height:20px;
border: black medium solid;
margin: auto;
border-top: none;
border-bottom: black thin solid;
}
.authordate{
font-size:xx-small;
padding-left:50px;
}
.title{
font-size:large;
font-weight:bold;
padding-left:50px;
}
.contenttext{
padding-left:100px;
}
.contentpost{
width: 500px;
}
__________________
Webmaster of Gamers Community | Arcade Toad | Brawl Arena
MoeAlza is offline
Reply With Quote
View Public Profile Visit MoeAlza's homepage!
 
When You Register, These Ads Go Away!
Old 06-15-2007, 10:02 AM Re: centering help
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 564
Name: Darren
Location: England
Add the bit in red to the code:
(not sure if this is the "proper way" but it works!


<div class="header">
<div align="center"><a href="/index.php"><img src="/images/home.png" border="0"/></a><a href="http://www.doughboy-entertainment.com/arcade/index.php"><img src="/images/games.png" border="0"/></a><a href="/videos.php"><img src="/images/videos.png" border="0"/></a><a href="/forums/"><img src="/images/forums.png" border="0"/><a href="/about.php"><img src="/images/about.png" border="0"/></a><a href="/forums/"></a><a href="/forums/"></a><a href="/about.php"></a><a href="/forums/"></a></div>
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 06-15-2007, 03:02 PM Re: centering help
LadynRed's Avatar
Super Moderator

Posts: 6,567
Location: Tennessee
No, no, NOT the old awful "align='center' " !!! He's using CSS and very well I might add, don't add deprecated tags.

Try this solution:
#tabs ul{width: 70%;
margin: 0 auto;
}
#tabs{text-align: center;}

The margin 0 auto; and the width on the UL will center in Firefox and non-IE browsers. The text-align:center will work for IE 6 and below.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-15-2007, 07:21 PM Re: centering help
Skilled Talker

Posts: 80
Name: Mohammed A.
Location: Ca, USA.
thanks. it worked.
__________________
Webmaster of Gamers Community | Arcade Toad | Brawl Arena
MoeAlza is offline
Reply With Quote
View Public Profile Visit MoeAlza's homepage!
 
Old 06-15-2007, 07:27 PM Re: centering help
scotia's Avatar
Extreme Talker

Posts: 196
Location: Edinburgh, Scotland
[quote=rolda hayes;408411]Add the bit in red to the code:
(not sure if this is the "proper way" but it works!...

Id' have done the same...*ducks from ladynred's flying books* - lol
I'm joining detention for this post...*grins*..

Scotia
__________________
PaleGallery Web & Graphic Design
Big ideas don't have to mean big pockets.
scotia is offline
Reply With Quote
View Public Profile Visit scotia's homepage!
 
Old 06-15-2007, 08:44 PM Re: centering help
LadynRed's Avatar
Super Moderator

Posts: 6,567
Location: Tennessee
Hey Scotia.. I don't throw things
Besides, looks like you're Scottish.. you might be a relative of mine
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-16-2007, 07:31 AM Re: centering help
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 564
Name: Darren
Location: England
thats what I'm finding so hard about CSS, it is so easy to revert to things that you have been doing for years...

Oh well, back to the CSS books again...
__________________
"I always wanted the adoration of John Lennon - With The Anonimity of Ringo Starr..."
QuizBay Help with the testing of this Beta site!
rolda hayes is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to centering help
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.18329 seconds with 12 queries