Replacing Logo with liquid CSS, (almost there...)

**Peace Freak** · 13 May 2006, 03:46 PM

Hello, using <center></center>does not want to work...

I have a total of four images across my logo area, one on the left, one liquid section and then two images that need to be side by side on the right...

I have been playing with this for hours now but without any progress...

Any other suggestions would be greatly appreciated...

**paulm** · 13 May 2006, 04:31 PM

Originally Posted by Peace Freak

Hello, using <center></center>does not want to work...

Besides the <center> tag is depricated.

The center element was deprecated in HTML 4.01.

The center element is not supported in XHTML 1.0 Strict DTD.

http://www.w3schools.com/tags/tag_center.asp

So if you want to be ready for the future, better do not get used to using it.

**paulm** · 13 May 2006, 04:43 PM

I am not really sure about what you are exactly trying to achieve, else I would give it a shot. But I did read the other thread, and if you think it's easier to achieve if you use a table for this I would just use a table. It's not like tables are eavil or something. It's just that it usually it is better not to use tables if you don't need to.

BTW the site looks great in FireFox, I do not see any problem with the logo currently.

**Peace Freak** · 13 May 2006, 04:36 PM

I have tried changing the code from the original GoLive generated code to that below, which has four boxes, one for each image... but it still I cannot get it to fly, basically because I do not really understand the float concept...

Instead of being to the right of logomiddle, logoright1 and logoright2 move down below logoleft...

The problem can be viewed here: http://english.globalpeace.jp

**************

StyleSheet

#logoWrapper, {

#logoleft { width:490px; height:115px; float:left }
#logomiddle { background-image: url(http://english.globalpeace.jp/store/...ans-line.gif); width:auto; height:115px; margin-left:490px; margin-right:60px }
#logoright1 { width:60px; height:115px; float:right }
#logoright2 { width:25px; height:115px; float:right }
}

***************

tpl_header.php

<div id="logoWrapper">

<div id="logoleft">
<a title="Click here to go to the main Global Peace Campaign homepage" href="http://english.globalpeace.jp"><img src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/GPCMainBanner-e.gif" alt="" height="115" width="490" border="0" /></a></div>

<div id="logoright2">
<img src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/goto-j.gif" alt="" height="115" width="25" border="0" /></div>

<div id="logoright1">
<img src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/GPCMainBanner-animation.gif" alt="" height="115" width="60" border="0" /></div>

<div id="logomiddle"></div>
</div>

**paulm** · 13 May 2006, 04:56 PM

Originally Posted by Peace Freak

The problem can be viewed here: http://english.globalpeace.jp

That's not the url where the problem can be seen. That one is correct (almost, there's a little problem in IE). The problem site is here: http://english.globalpeace.jp/store/

**paulm** · 13 May 2006, 05:32 PM

Actually I am quite sure using a table is smarter here (although I love CSS-P).

test example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body, html, table, td {
margin: 0;
padding: 0;
}
table#logowrapper {
width: 100%;
}
#logowrapper td {
border: 1px dotted green;
}
#logopart1 {
width: 490px;
}  
#logopart3 {
width: 60px;
}
#logopart4 {
width: 25px;
}
-->
</style>
</head>
<body>
<table id="logowrapper" cellspacing="0">
<tr>
<td id="logopart1">L</td>
<td id="logopart2">O</td>
<td id="logopart3">G</td>
<td id="logopart4">O</td>
</tr>
</table>
</body>
</html>

**paulm** · 13 May 2006, 05:38 PM

And since "<td id="logopart3">G</td>" will be an empty cell you should put a   in it. But I guess you already knew that.

**Peace Freak** · 13 May 2006, 06:07 PM

Yes, posted the wrong URL. Glad you worked it out!

Well, I am actually more comfortable with tables myself so I may end up using your suggestion. I had been using a table with a test osCommerce site, before I found Zen...

Kuroi San, (a CSS master that prowls around these Zen-cart boards) advised that CSS was the way to go, and well, I thought I would take up the challenge...

Actually, since his suggestion I have been reading tutorials and trying to get up to speed... Actually it has been fun learning the little CSS that I have produced so far...

As I am so close, (At least I believe I am...!) if someone can help me with the CSS, that would be wonderful...

Anyway, I will hang in a bit longer and hopefully someone will show me what to do...

Anyway, paulm, I appreciate your time and your input!

**paulm** · 13 May 2006, 08:21 PM

Nice to hear you rather use CSS after all :-)

The CSS you posted seems to have some typos though.

Here's a CSS sample that works (you only need to put the two right images (inline) into the #logo3 div):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 

body, html {
margin: 0;
padding: 0;
}

#logo1 {position: absolute; left: 0; top:0; width: 490px; height:115px; background: red; display: inline;}
#logo2 {background: green url(logo/gpc-logo-trans-line.gif); height:115px; width: auto; margin-left:490px; margin-right: 85px;}
#logo3 {position: absolute; right: 0; top:0; width:85px; height:115px; background: orange; display: inline;}

 /*Peace Freak - GPC Logo Added*/ 
-->
</style>
</head>
<body>
<div id="logo1">L</div><div id="logo2">OG</div><div id="logo3">O</div>
</body>
</html>

**clydejones** · 14 May 2006, 02:55 AM

You might want to change the CSS you have added:
Here's what you have

Code:

#logoWrapper, {
#logo {float:left; width:490px; height:115px}  
#nihongoSiteButton {float:right; width:25px; height:115px} 
#animation {float:right; width:60px; height:115px} 
#line {background-image: url(http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/gpc-logo-trans-line.gif); background-repeat: repeat-x; margin:0 85px 0 490px; width:auto; height:115px}  
} /*Peace Freak - GPC Logo Added*/

You've included 3 IDs inside the LogoWrapper ID.
Make these changes and see if it helps

Code:

#logoWrapper, { }
#logo {float:left; width:490px; height:115px}  
#nihongoSiteButton {float:right; width:25px; height:115px} 
#animation {float:right; width:60px; height:115px} 
#line {background: url(../images/logo/gpc-logo-trans-line.gif) repeat-x; margin:0 85px 0 490px; width:auto; height:115px}  
 /*Peace Freak - GPC Logo Added*/

Thread: Replacing Logo with liquid CSS, (almost there...)

Thread Tools

Search Thread

Display

Hybrid View

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Re: Replacing Logo with liquid CSS, (almost there...)

Similar Threads

problem replacing Zen Cart Logo with my own

replacing the logo with dhtml menu/navigation

Almost there, need help with site map and font in search header

Posting Permissions