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.

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

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

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>

[kuroi]

PeaceFreak

This is what you are trying to achieve, yes?

Here's the 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

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]

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.