Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> How To's
Author Message
hicuxunicorniobestbuildpc
Life Cycles Becoming CPU Cycles


Joined: Aug 13, 2009
Posts: 967
Location: Netherland

PostPosted: Sat Nov 23, 2013 9:10 am Reply with quote

HitsFan 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
Only registered users can see links on this board! Get registered or login!

Note: When I mix div with table doesn't go in the right place. Thanks in advance.
 
View user's profile Send private message Visit poster's website
neralex
The Mouse Is Extension Of Arm


Joined: Aug 22, 2007
Posts: 1329
Location: Germany

PostPosted: Sat Nov 23, 2013 9:26 am Reply with quote

try: <div id="logo" class="centered">
 
View user's profile Send private message
hicuxunicorniobestbuildpc
PostPosted: Sat Nov 23, 2013 10:03 am Reply with quote

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;">
 
neralex
PostPosted: Sat Nov 23, 2013 10:37 am Reply with quote

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.
 
hicuxunicorniobestbuildpc
PostPosted: Sat Nov 23, 2013 6:23 pm Reply with quote

Evil or Very Mad ya, I did it but it becomes very big. I really don't know how to mix div the td. Confused
 
neralex
PostPosted: Sun Nov 24, 2013 7:12 am Reply with quote

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

The rest is pure css, not more.
 
hicuxunicorniobestbuildpc
PostPosted: Sun Nov 24, 2013 8:40 am Reply with quote

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;">
 
hicuxunicorniobestbuildpc
PostPosted: Sun Nov 24, 2013 8:49 am Reply with quote

Very Happy Very Happy Very Happy 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
 
kguske
Site Admin


Joined: Jun 04, 2004
Posts: 6383

PostPosted: Sun Nov 24, 2013 5:19 pm Reply with quote

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

_________________
I google, therefore I exist...
Only registered users can see links on this board! Get registered or login!
 
View user's profile Send private message
hicuxunicorniobestbuildpc
PostPosted: Sun Nov 24, 2013 8:35 pm Reply with quote

Hi kguske

The work has been done. Take a look.
Only registered users can see links on this board! Get registered or login!

Very Happy
 
spasticdonkey
RavenNuke(tm) Development Team


Joined: Dec 02, 2006
Posts: 1693
Location: Texas, USA

PostPosted: Sun Nov 24, 2013 9:12 pm Reply with quote

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
 
View user's profile Send private message Visit poster's website
hicuxunicorniobestbuildpc
PostPosted: Mon Nov 25, 2013 2:55 am Reply with quote

yeah, that is true, but how can I fix that?
 
spasticdonkey
PostPosted: Mon Nov 25, 2013 7:35 am Reply with quote

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;
}
 
hicuxunicorniobestbuildpc
PostPosted: Mon Nov 25, 2013 8:33 am Reply with quote

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
 
spasticdonkey
PostPosted: Mon Nov 25, 2013 9:54 am Reply with quote

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?
 
hicuxunicorniobestbuildpc
PostPosted: Tue Nov 26, 2013 9:05 am Reply with quote

Image

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);
}
 
spasticdonkey
PostPosted: Wed Nov 27, 2013 8:41 am Reply with quote

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
 
hicuxunicorniobestbuildpc
PostPosted: Wed Nov 27, 2013 3:07 pm Reply with quote

Hi Spasticdonkey

All the issues has been fixed. I just remove the social icons and everything is working fine now. Thanks a lot!!! Wink
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> How To's

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©