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

[Peace Freak]

This is a carryover from a thread in the old forum...

http://www.zen-cart.com/forum/showthread.php?t=34474

I have been quite busy and was not able to get back to finishing my logo off till today...

Anyway, I have tried my best but cannot get it to fly...

I am not a CSS master and somehow doubt I ever will be... So rather than write the CSS from scratch, I used GoLive to make the CSS for me and now am trying to get it to work... Could someone have a look at my stylesheet and tpl_header and let me know what is wrong!

(Also, I am wondering about the proper place to store the images that I am using... Ideally, should they be stored in the my_template/images folder?)

Here is what I have for the style sheet...

#logoWrapper, {

#logoleft { width:490px; height:115px; float:left }
#logoright { width:85px; height:115px; float:right }
#logomiddle { background-image: url(logo/gpc-logo-trans-line.gif); width:auto; height:115px; margin-left:490px; margin-right:85px }
} /*Peace Freak - GPC Logo Added*/

#headerWrapper,....

And here is what I have for my tpl_header.php

<!--bof-branding display-->
<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="logo/GPCMainBanner-e.gif" alt="" height="115" width="490" border="0" /></a></div>
<div id="logoright">
<img src="logo/GPCMainBanner-animation.gif" alt="" height="115" width="60" border="0" /><a title="Click here to go to the Japanese Global Peace Campaign homepage" href="http://globalpeace.jp"><img id="goto_e" src="logo/goto-j.gif" alt="" name="goto_e" height="115" width="25" border="0" /></a></div>
<div id="logomiddle"></div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--bof-navigation display-->
<div id="navMainWrapper">

[Merlinpa1969]

rather than go through these hoops.....

open tpl_header.php in your custom/common folder

find the call for the logo image
and put <center></center> around it....

the logo will now stay centered and will let the page float around it

[Peace Freak]

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]

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.

[Peace Freak]

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]

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.

[paulm]

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]

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

test example:

<!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]

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

[Peace Freak]

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!