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

**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>

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

Note: the width and height setting for #logo1 and #logo3 are actually not needed once you've put the images into those divs.

edit: And the "width: auto;" is obsolete too. It was a left over from testing :-)

Cleaned up version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html>
<head>
<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; margin-left:490px; margin-right: 85px;}
#logo3 {position: absolute; right: 0; top:0; width:85px; height:115px; background: orange; display: inline;}
-->
</style>
</head>
<body>
<div id="logo1">L</div><div id="logo2">OG</div><div id="logo3">O</div>
</body>
</html>

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

demo: www.zen-cart.nl/tmp/peace-css2.html

:-)

**paulm** · 13 May 2006, 09:51 PM

Ermm... last cleanup (I hope).

Not that it did not work, just removed some other obsolete code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
<!-- 
body, html {
margin: 0;
padding: 0;
  }
#logo1 {
position: absolute;
left: 0;
top:0;
width: 490px;
height:115px;
background: red;
  }
#logo2 {
background: green url(logo/gpc-logo-trans-line.gif);
height:115px;
margin-left:490px;
margin-right: 85px;
  }
#logo3 {
position: absolute;
right: 0;
top:0;
width:85px;
height:115px;
background: orange;
  }
-->
</style>
</head>
<body>
<div id="logo1">L</div><div id="logo2">OG</div><div id="logo3">O</div>
</body>
</html>

So the width and height settings may be removed form #logo1 and #logo3, and the background colors may be removed to of course, in the final CSS. These are only there to show that the sample works. (even the left and right div can be removed then, but I would leave those to keep it flexible).

So that would leave us:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
<!-- 
body, html {
margin: 0;
padding: 0;
  }
#logo1 {
position: absolute;
left: 0;
top:0;
  }
#logo2 {
background: green url(logo/gpc-logo-trans-line.gif);
height:115px;
margin-left:490px;
margin-right: 85px;
  }
#logo3 {
position: absolute;
right: 0;
top:0;
  }
-->
</style>
</head>
<body>
<div id="logo1">L</div><div id="logo2">OG</div><div id="logo3">O</div>
</body>
</html>

**kuroi** · 14 May 2006, 01:09 AM

PeaceFreak

This is what you are trying to achieve, yes?

Here's the code

PHP Code:


<div id="logoWrapper">

    <img id="logo" src="images/GPCMainBanner-e.gif" alt="" width="490" height="115" />

    <img id="nihongoSiteButton" src="images/goto-j.gif" alt="" width="25" height="115" />

    <img id="animation" src="images/GPCMainBanner-animation.gif" alt="" width="60" height="115" />

    <div id="line">&nbsp;</div>

</div>

and here's the CSS

PHP Code:


body {margin:0}

#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(images/gpc-logo-trans-line.gif); background-repeat: repeat-x; margin:0 85px 0 490px; width:auto; height:115px}

You'll see that I'm minimising the number of div tags. This is because you probably want them to ######## up against each other to give you a nice line. Firefox is great with this, but Internet Explorer introduces 3px gaps (like the ones on the GPC home page). There are hacks to get round this, but reducing the number of divs seems like a much easier and more satisfying solution (unless you're unnaturally attached to the gaps

)

**Sermonzone** · 14 May 2006, 01:18 AM

You gotta love this forum.

I have been following this thread since I am trying to do the same thing.

Thanks to Kuroi an Paulm both.

**paulm** · 14 May 2006, 01:59 AM

Using absolute postioning there are no gaps either BTW (not in Firefox and not in IE, and with or without the divs), but both solutions work well in this case.

**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*/

**Peace Freak** · 14 May 2006, 03:51 AM

I really appreciate the time everyone has spent on this for me.

I had just written a reply to paulm saying that I still could not get it to work with a status report etc. and was about to post it off, when I saw Kuroi Sans suggestion, which I hadn’t noticed when I resumed working on this this morning (Japan time).. So I put off that reply...

I have have just given Kuroi’s sans suggestion a try and now I can say I am almost, ALMOST there!!! The annimation and the goto-j.gif were in the wrong positions. The button on the left and the animation on the right... It seemed so strange to me as I used your code exactly... Anyway, I changed the order of the code both items in the stylesheet and tpl_header and that got them right! I wonder why this is so?

My last stumbling block is I cannot get the liquid section to fly? I have copied your code exactly, I believe... I tried changing its position to no avail...

Also, I am thinking that there is a little too much space below the logo and the main body of the page. Where do I go to reduce that?

(As for the 3px gaps on my main GPC homepage, of course I would love to get rid of them as well. After this store logo thing is done could you give me the lowdown on that?)

Below is my current coding... (I am including code before and after in case I may have messed up something...

(BTW. Once this is done and working I will post the css with a step by step explanation on the Zen site so everyone will benefit from this. I am sure that there are others who would like to do a similar designs, and if there are samples available, it will make it much easier for them. )

stylesheet.css

****************************************************
#mainWrapper {
/background-color: #ffffff;/ /*Peace Freak - turned the background-color off*/
text-align: left;
width: 100%;
vertical-align: top;
}

#logoWrapper, {

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

#headerWrapper,

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

tpl_header.php

<div id="headerWrapper">



<div id="logoWrapper">
<img id="logo" src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/GPCMainBanner-e.gif" alt="" width="490" height="115" />
<img id="animation" src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/GPCMainBanner-animation.gif" alt="" width="60" height="115" />
<img id="nihongoSiteButton" src="http://english.globalpeace.jp/store/includes/templates/my_template01/images/logo/goto-j.gif" alt="" width="25" height="115" />
<div id="line"> </div>

</div>
<br class="clearBoth" />

**Peace Freak** · 14 May 2006, 05:04 AM

Amazing... This forum totally rocks... After I submitted my last reply/question, I reloaded the thread and found clydejones’ suggestion, which must have appeared again while I was in the middle of my testing... His suggestion did the trick. Thank you so much for looking at my source. Once I added the extra

} to the #logoWrapper, {

and it started to work correctly, with the liquid line appearing... The order of the two RH graphics got messed up again, so I put them back to Kuroi San’s original style and I was up and running...

The space between the logo and the body of the page has improved and I think is reasonable now so I will not mess with that...

I have come this far with CSS that I now have one remaining CSS question... I want to be totally up there with the cutting edge of the web...

I would like to have an image rollover for the very right hand image... As Kuroi San had admonished me for living in the past by using tables for my logo, I went searching and I found this article about CSS rollovers http://www.oreillynet.com/pub/a/java...rollovers.html

But I really don’t know what the recommended way should be.

Either way, could someone explain the best way to do a rollover, perhaps with a sample, as I must admit, I am just a baby at this...

Many, many thanks!

(and Kuroi San, if you can let me know what how to best get rid of 3px gaps on the main GPC homepage, I would be indeed indebted for life!)

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

Thread Tools

Search Thread

Display

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...)

The solution?

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

Re: The solution?

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