Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

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

Posts: 83
Name: Mohammed A.
Location: Ca, USA.
Trades: 0
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
Please login or register to view this content. Registration is FREE
MoeAlza is offline
Reply With Quote
View Public Profile Visit MoeAlza's homepage!
 
 
Register now for full access!
Old 06-15-2007, 10:02 AM Re: centering help
rolda hayes's Avatar
Wannabe Adventurer...

Posts: 961
Name: Darren
Location: England
Trades: 0
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 Just a test to see what happens...
Please login or register to view this content. Registration is FREE

"Let us be thankful for the fools. But for them the rest of us could not succeed..."
rolda hayes is offline
Reply With Quote
View Public Profile
 
Old 06-15-2007, 03:02 PM Re: centering help
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
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 !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-15-2007, 07:21 PM Re: centering help
Skilled Talker

Posts: 83
Name: Mohammed A.
Location: Ca, USA.
Trades: 0
thanks. it worked.
__________________
Webmaster of
Please login or register to view this content. Registration is FREE
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
Trades: 0
[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
__________________

Please login or register to view this content. Registration is FREE

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
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
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 !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

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: 961
Name: Darren
Location: England
Trades: 0
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 Just a test to see what happens...
Please login or register to view this content. Registration is FREE

"Let us be thankful for the fools. But for them the rest of us could not succeed..."
rolda hayes is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to centering help
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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

BB 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.46151 seconds with 12 queries