How to use div with table to center CSS Logo

Posted: Sat Nov 23, 2013 9:10 am

Guys, I guess I will need a little bit help to finally center this CSS Logo from Google Colors.

My header.html is

Code:

<table style="width:100%; height:121px;" border="0" cellpadding="0" cellspacing="0">


<tr>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_01.gif" alt="bb_01.gif" /></td>


<td style="width:158px; height:121px;"><img src="themes/Dolphins/images/bb_02.gif" alt="bb_02.gif" /></td>


<td style="height:121px; background-image:url(themes/Dolphins/images/top1.gif); width:100%;"><a href="http://www.bestbuildpc.org" title="The power of imagination"><img src="themes/Dolphins/images/logoart3.png" alt="The Power of ICT Solutions" border="0" /></a><a href="http://www.facebook.com/pages/bestbuildpc.ict/337437973003389"><img src="themes/Dolphins/images/facebook.png" style="width:48px; height:48px; float:right; padding:5px" alt="facebook.png" /></a><a href="https://twitter.com/bestbuildpc"><img src="themes/Dolphins/images/twitter.png" style="width:48px; height:48px; float:right; padding:5px" alt="twitter.png" /></a><a href="https://plus.google.com/101317679175525430601/posts"><img src="themes/Dolphins/images/gplus.png" style="width:48px; height:48px; float:right; padding:5px" alt="gplus.png" /></a></td>


<td style="width:115px; height:121px;"><img src="themes/Dolphins/images/bb_06.gif" alt="bb_06.gif" /></td>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_07.gif" alt="bb_07.gif" /></td>


</tr>


<tr>


<td><img src="themes/Dolphins/images/bb_03.gif" style="width:22px; height:31px;" alt="bb_03.gif" /></td>


<td style="background-image:url(themes/Dolphins/images/bb_04.gif); padding-left:10px;" align="left"><img src="themes/Dolphins/images/spacer.gif" style="width:14px" alt="spacer.gif" />$theuser</td>


<td colspan="2" style="background-image:url(themes/Dolphins/images/top2.gif);" align="center"><div align="center">$navMenu</div></td>


<td><img src="themes/Dolphins/images/bb_09.gif" style="width:22px; height:31px;" alt="bb_09.gif" /></td>


</tr>


</table>





<table style="width:100%" border="0" cellpadding="0" cellspacing="0">


<tr><td style="width:22px; background-image:url(themes/Dolphins/images/bb_11.gif);"><img src="themes/Dolphins/images/bb_11.gif" alt="bb_11.gif" /></td>


<td style="vertical-align:top; background-color:#ffffff;">

I tried many posibilities but it doesn't go well.

Here is my code

Code:

<div id="logo">


      <a class="B">B</a><a class="e">e</a><a class="s">s</a><a class="t">t</a><a class="B1">B</a><a class="u">u</a><a class="i">i</a><a class="l">l</a><a class="d">d</a><a class="P">P</a><a class="C">C</a>


   </div>

The style.css code

Code:

@-moz-font-face{


    font-family: Catull;


    src: url(font/catull.ttf);


    font-weight:400;


}


@-webkit-font-face{


    font-family: Catull;


    src: url(font/catull.ttf);


    font-weight:400;


}


@-o-font-face{


    font-family: Catull;


    src: url(font/catull.ttf);


    font-weight:400;


}


@-ms-font-face{


    font-family: Catull;


    src: url(font/catull.ttf);


    font-weight:400;


}


@font-face{


    font-family: Catull;


    src: url(font/catull.ttf);


    font-weight:400;


}


html body{


    font-family: Catull,Sans-Serif;


    background: #f1f1f1;


}


#logo{


    margin:200px auto;


    width:600px;


    height:200px;


    text-align:center;


    font-size:100px;


    text-shadow:0px 3px 3px rgba(0,0,0,0.25);


    filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3); 


}





.B{


    color:#0047F1;


}


.B::-moz-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-webkit-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-o-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-ms-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::selection{


    background-color:#0047F1;


    color:#DD172C;


}


.e{


    color:#DD172C;


}


.e::-moz-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.e::-webkit-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.e::-o-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.e::-ms-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.e::selection{


    background-color:#DD172C;


    color:#F9A600;


}


.s{


    color:#F9A600;


}


.s::-moz-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.s::-o-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.s::-ms-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.s::-webkit-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.s::selection{


    background-color:#F9A600;


    color:#0047F1;


}


.t{


    color:#0047F1;


}


.t::-moz-selection{


    background-color:#0047F1;


    color:#00930E;


}


.t::-o-selection{


    background-color:#0047F1;


    color:#00930E;


}


.t::-ms-selection{


    background-color:#0047F1;


    color:#00930E;


}


.t::-webkit-selection{


    background-color:#0047F1;


    color:#00930E;


}


.t::selection{


    background-color:#0047F1;


    color:#00930E;


}


.B1{


    color:#00930E;


}


.B1::-moz-selection{


    background-color:#00930E;


    color:#E61B31;


}


.B1::-o-selection{


    background-color:#00930E;


    color:#E61B31;


}


.B1::-webkit-selection{


    background-color:#00930E;


    color:#E61B31;


}


.B1::-ms-selection{


    background-color:#00930E;


    color:#E61B31;


}


.B1::selection{


    background-color:#00930E;


    color:#E61B31;


}


.u{


    color:#DD172C;


}


.u::-moz-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.u::-webkit-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.u::-o-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.u::-ms-selection{


    background-color:#DD172C;


    color:#F9A600;


}


.u::selection{


    background-color:#DD172C;


    color:#F9A600;


}


.i{


    color:#F9A600;


}


.i::-moz-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.i::-o-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.i::-ms-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.i::-webkit-selection{


    background-color:#F9A600;


    color:#0047F1;


}


.i::selection{


    background-color:#F9A600;


    color:#0047F1;


}


.l{


    color:#00930E;


}


.l::-moz-selection{


    background-color:#00930E;


    color:#E61B31;


}


.l::-o-selection{


    background-color:#00930E;


    color:#E61B31;


}


.l::-webkit-selection{


    background-color:#00930E;


    color:#E61B31;


}


.l::-ms-selection{


    background-color:#00930E;


    color:#E61B31;


}


.l::selection{


    background-color:#00930E;


    color:#E61B31;


}


.d{


    color:#0047F1;


}


.d::-moz-selection{


    background-color:#0047F1;


    color:#00930E;


}


.d::-o-selection{


    background-color:#0047F1;


    color:#00930E;


}


.d::-ms-selection{


    background-color:#0047F1;


    color:#00930E;


}


.d::-webkit-selection{


    background-color:#0047F1;


    color:#00930E;


}


.d::selection{


    background-color:#0047F1;


    color:#00930E;


}


.P{


    color:#00930E;


}


.P::-moz-selection{


    background-color:#00930E;


    color:#E61B31;


}


.P::-o-selection{


    background-color:#00930E;


    color:#E61B31;


}


.P::-webkit-selection{


    background-color:#00930E;


    color:#E61B31;


}


.P::-ms-selection{


    background-color:#00930E;


    color:#E61B31;


}


.P::selection{


    background-color:#00930E;


    color:#E61B31;


}


.C{


    color:#E61B31;


}


.C::-moz-selection{


    background-color:#E61B31;


    color:#0047F1;


}


.C::-webkit-selection{


    background-color:#E61B31;


    color:#0047F1;


}


.C::-o-selection{


    background-color:#E61B31;


    color:#0047F1;


}


.C::-ms-selection{


    background-color:#E61B31;


    color:#0047F1;


}


.C::selection{


    background-color:#E61B31;


    color:#0047F1;


}

example of this result

http://www.bestbuildpc.org/google/index.html

Note: When I mix div with table doesn't go in the right place. Thanks in advance.

registered · Site Admin Joined: Aug 22, 2007 Posts: 1775

try: <div id="logo" class="centered">

Posted: Sat Nov 23, 2013 10:03 am

When I use the div here the logo goes to the footer. It doensn't work.

Code:

<div id="logo" class="centered">


<table style="width:100%; height:121px;" border="0" cellpadding="0" cellspacing="0">


<tr>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_01.gif" alt="bb_01.gif" /></td>


<td style="width:158px; height:121px;"><img src="themes/Dolphins/images/bb_02.gif" alt="bb_02.gif" /></td>


<td style="height:121px; background-image:url(themes/Dolphins/images/top1.gif); width:100%;"><a href="http://www.bestbuildpc.org" title="The power of imagination"><img src="themes/Dolphins/images/logoart3.png" alt="The Power of ICT Solutions" border="0" /></a><a href="http://www.facebook.com/pages/bestbuildpc.ict/337437973003389"><img src="themes/Dolphins/images/facebook.png" style="width:48px; height:48px; float:right; padding:5px" alt="facebook.png" /></a><a href="https://twitter.com/bestbuildpc"><img src="themes/Dolphins/images/twitter.png" style="width:48px; height:48px; float:right; padding:5px" alt="twitter.png" /></a><a href="https://plus.google.com/101317679175525430601/posts"><img src="themes/Dolphins/images/gplus.png" style="width:48px; height:48px; float:right; padding:5px" alt="gplus.png" /></a></td>


<td style="width:115px; height:121px;"><img src="themes/Dolphins/images/bb_06.gif" alt="bb_06.gif" /></td>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_07.gif" alt="bb_07.gif" /></td>


</tr>


<tr>


<td><img src="themes/Dolphins/images/bb_03.gif" style="width:22px; height:31px;" alt="bb_03.gif" /></td>


<td style="background-image:url(themes/Dolphins/images/bb_04.gif); padding-left:10px;" align="left"><img src="themes/Dolphins/images/spacer.gif" style="width:14px" alt="spacer.gif" />$theuser</td>


<td colspan="2" style="background-image:url(themes/Dolphins/images/top2.gif);" align="center"><div align="center">$navMenu</div></td>


<td><img src="themes/Dolphins/images/bb_09.gif" style="width:22px; height:31px;" alt="bb_09.gif" /></td>


</tr>


</table>





<table style="width:100%" border="0" cellpadding="0" cellspacing="0">


<tr><td style="width:22px; background-image:url(themes/Dolphins/images/bb_11.gif);"><img src="themes/Dolphins/images/bb_11.gif" alt="bb_11.gif" /></td>


<td style="vertical-align:top; background-color:#ffffff;">

Posted: Sat Nov 23, 2013 10:37 am

Ya for sure when you are add the div around the table. Smile

Put the div in a td, where you want show it. A div have a closing tag too, you should use it. Check you div container an put the code inside a td with a width value.

Posted: Sat Nov 23, 2013 6:23 pm

ya, I did it but it becomes very big. I really don't know how to mix div the td. Confused

Posted: Sun Nov 24, 2013 7:12 am

<td><div></div></td>

The rest is pure css, not more.

Posted: Sun Nov 24, 2013 8:40 am

hi neralex,

I did your recomendation but unfortunately it doesn't work

Take a look at my site right now it becomes

Code:

<table style="width:100%; height:121px;" border="0" cellpadding="0" cellspacing="0">


<tr>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_01.gif" alt="bb_01.gif" /></td>


<td style="width:158px; height:121px;"><img src="themes/Dolphins/images/bb_02.gif" alt="bb_02.gif" /></td>


<td style="height:121px; background-image:url(themes/Dolphins/images/top1.gif); width:100%;"><div id="logo" class="centered"><a class="B">B</a><a class="e">e</a><a class="s">s</a><a class="t">t</a><a class="B1">B</a><a class="u">u</a><a class="i">i</a><a class="l">l</a><a class="d">d</a><a class="P">P</a><a class="C">C</a></div><a href="http://www.facebook.com/pages/bestbuildpc.ict/337437973003389"><img src="themes/Dolphins/images/facebook.png" style="width:48px; height:48px; float:right; padding:5px" alt="facebook.png" /></a><a href="https://twitter.com/bestbuildpc"><img src="themes/Dolphins/images/twitter.png" style="width:48px; height:48px; float:right; padding:5px" alt="twitter.png" /></a><a href="https://plus.google.com/101317679175525430601/posts"><img src="themes/Dolphins/images/gplus.png" style="width:48px; height:48px; float:right; padding:5px" alt="gplus.png" /></a></td>


<td style="width:115px; height:121px;"><img src="themes/Dolphins/images/bb_06.gif" alt="bb_06.gif" /></td>


<td style="width:22px; height:121px;"><img src="themes/Dolphins/images/bb_07.gif" alt="bb_07.gif" /></td>


</tr>


<tr>


<td><img src="themes/Dolphins/images/bb_03.gif" style="width:22px; height:31px;" alt="bb_03.gif" /></td>


<td style="background-image:url(themes/Dolphins/images/bb_04.gif); padding-left:10px;" align="left"><img src="themes/Dolphins/images/spacer.gif" style="width:14px" alt="spacer.gif" />$theuser</td>


<td colspan="2" style="background-image:url(themes/Dolphins/images/top2.gif);" align="center"><div align="center">$navMenu</div></td>


<td><img src="themes/Dolphins/images/bb_09.gif" style="width:22px; height:31px;" alt="bb_09.gif" /></td>


</tr>


</table>





<table style="width:100%" border="0" cellpadding="0" cellspacing="0">


<tr><td style="width:22px; background-image:url(themes/Dolphins/images/bb_11.gif);"><img src="themes/Dolphins/images/bb_11.gif" alt="bb_11.gif" /></td>


<td style="vertical-align:top; background-color:#ffffff;">

Posted: Sun Nov 24, 2013 8:49 am

I think I did it

I had it to remove margin and do some modification in the style.css

What do you think of the result neralex? Very Happy

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

Of the Google-ized BestBuildPC page? Colorful....

Posted: Sun Nov 24, 2013 8:35 pm

Hi kguske

The work has been done. Take a look.

www.bestbuildpc.org

Very Happy

Posted: Sun Nov 24, 2013 9:12 pm

Seeing that it's inheriting some of your core styling. On mouseover it flashes into font-size 10px and other styling associated with a:hover

Posted: Mon Nov 25, 2013 2:55 am

yeah, that is true, but how can I fix that?

Posted: Mon Nov 25, 2013 7:35 am

This should fix all but the hover color

#logo a:link,#logo a:visited,#logo a:hover,div#logo {
font-family: Catull,Sans-Serif;
font-size: 50px;
text-decoration: none;
}

then you need to add to each of your "letter" classes after that, to fix to hover color, for example

.C, a.C:hover {
color: #E61B31;
}

Posted: Mon Nov 25, 2013 8:33 am

U mean like this

Code:

#logo a:link,#logo a:visited,#logo a:hover,div#logo {


font-family: Catull,Sans-Serif;


font-size: 50px;


text-decoration: none;


    filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3); 


}





.B, a.B:hover {


    color:#0047F1;


}


.B::-moz-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-webkit-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-o-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::-ms-selection{


    background-color:#0047F1;


    color:#DD172C;


}


.B::selection{


    background-color:#0047F1;


    color:#DD172C;


}

Let me know how to make the logo bigger because I put 50px but if I do 70 then it take the blue image and makes it as bigger as the logo. Shocked

Posted: Mon Nov 25, 2013 9:54 am

I didn't look at all the CSS you had going, but I guess that's what I was talking about. I would probably do all the "selection" declarations as 1 declaration though

.B::-moz-selection,
.B::-webkit-selection,
.B::-o-selection,
.B::-ms-selection,
.B::selection{
background-color:#0047F1;
color:#DD172C;
}

not sure what you mean by "then it take the blue image and makes it as bigger as the logo".... you mean on hover?

Posted: Tue Nov 26, 2013 9:05 am

I think an image will be better to understand. Very Happy

This result is happening if I use 70px

Code:

#logo a:link,#logo a:visited,#logo a:hover,div#logo {


font-family: Catull,Sans-Serif;


font-size: 70px;


text-decoration: none;


    filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3); 


}

Posted: Wed Nov 27, 2013 8:41 am

Hard to say for sure but I would guess it is stacking on top of your social icons on the right. try adding #logo{float:left} which may prevent that from happening

Posted: Wed Nov 27, 2013 3:07 pm

Hi Spasticdonkey

All the issues has been fixed. I just remove the social icons and everything is working fine now. Thanks a lot!!! Wink