Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Can't get ssl logo to sit in Header

Can't get ssl logo to sit in Header

Locked

Views: 4,132

Results 1 to 20 of 35
This thread is locked. New replies are disabled.
20 Feb 2009, 7:29 PM
#1
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Can't get ssl logo to sit in Header

Hello Fellow Zenners. I tried many things and cant get the ssl to move heigher up in the header. It should be horizontally aligned with the free shipping logo (logo3 in CSS). I should have enough room there.

My header is a 1000px (logo is 604-logo3 starts at 620 and its' 160px) That a total of only 780, with a remainder of 220 px. The sll is only 118px leaving plenty of room but no matter what I cant get it to move up. :frusty:

Am I missing something here any help is appreciated.

website is https://www.fashionfavourites.com

20 Feb 2009, 9:25 PM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: Can't get ssl logo to sit in Header

Again, as I stated in your other post. You're trying to put three divs horizontally in a wrapper thinking they go in 1, 2, 3 sequence. You cannot put divs in that order like you would a table.

If you Google three-column div you will find some ways to do what you are trying to do. Continuing to try and throw margins, padding, etc at it won't work.

The three-column div site will show you how to place them in a 1, 3, 2 sequence that will work.

20 Feb 2009, 10:54 PM
#3
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

dbltoe:

Again, as I stated in your other post. You're trying to put three divs horizontally in a wrapper thinking they go in 1, 2, 3 sequence. You cannot put divs in that order like you would a table.

If you Google three-column div you will find some ways to do what you are trying to do. Continuing to try and throw margins, padding, etc at it won't work.

The three-column div site will show you how to place them in a 1, 3, 2 sequence that will work.

hmm A little confused about 1,2,3 then 1,3,2. I took your earlier suggestions but guess this part I need to do a little more googling. Thank bud, I will search exatly what you suggested "three-column div" in google. looks like I missed that chapter.

p.s. Wondering if 3 div is the maximum. Is it possible for 4-column divs...just curiosity dont have to answer

20 Feb 2009, 11:38 PM
#4
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

you can stack them inline if you make sure they are all inside of another div, then set exact widths on all of the elements you want to stack, then float them all to the left. Once that is done use some margin left on each element to push it out to the right were you want it, start margin-left adjustments with the left most element.

21 Feb 2009, 12:08 AM
#5
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

barco57:

you can stack them inline if you make sure they are all inside of another div, then set exact widths on all of the elements you want to stack, then float them all to the left. Once that is done use some margin left on each element to push it out to the right were you want it, start margin-left adjustments with the left most element.

This was my exact intention, I calculated out everything. This is my tpl_header.php file and you can see all three elements are inside the headerWrapper div

<div id="headerWrapper">

<!--bof-branding display-->

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>
<div id="logo3"><?php echo zen_image($template->get_template_dir(WOWFREE_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . WOWFREE_LOGO_IMAGE, WOWFREE_ALT_TEXT) ; ?></div>

<!-- bof ssl site seal -->

<div id="ssl">
<span id="___sitess__alt_img_wrapper_middle_image">
<a href="http://www.alphassl.com/" target="_blank" title="SSL Certificate" >
</div>

Some more code I dont want to flood the forum

</div>

Then in my stylesheet I used some left margin with the calculated values taking into acccount the size of the images.

I tried floating all there divs left and that is a mess. Guess what i am missing is where you say "stack them inline" hhmmm, Wonder how I can do that. here i come again google.

ps. I am still reading about tbltoe's suggestion about dbltoe's suggestion about three-column div and all I am finding is tutorials on a 3-column template.

21 Feb 2009, 12:19 AM
#6
s_t_e_v_e avatar

s_t_e_v_e

Zen Follower

Join Date:
Aug 2006
Location:
UK
Posts:
430
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

Why bother putting your 3 images in 3 divs, then try to get them inline, when you can put 3 images (including relevant links) into 1 div??? or use Span to style them inline..??

21 Feb 2009, 12:33 AM
#7
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

s_t_e_v_e:

Why bother putting your 3 images in 3 divs, then try to get them inline, when you can put 3 images (including relevant links) into 1 div??? or use Span to style them inline..??

Very intresting and a great point. I dont know anything about span nor inline stuff in fact I am reading about them in google for the first time in my life. Pardon me I am a total newbie.

If I am understanding you correct. you are saying I should remove the div tags (1 for logo, 1 for log3 and 1 for ssl) and just put everything (direct code) inside the headerWrapper div?. Then I can use some margin left to style them, is that correct mate?

By the way reason I put them in seperate divs, is so that in my css I can do something like #logo and style it. I am too scared/inexperienced to attempt to put the styling with the code.

thank for the suggestion.

21 Feb 2009, 12:46 AM
#8
s_t_e_v_e avatar

s_t_e_v_e

Zen Follower

Join Date:
Aug 2006
Location:
UK
Posts:
430
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

I'd probably change the template and put all 3 items in the logo div... and see how it looks...

as long as you keep a backup and dont change too many things at once, have a go... you may surprise yourself.

plus - there are many here that will offer assistance.

21 Feb 2009, 12:52 AM
#9
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

What happened to the logoWrapper div?```

<div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

----bunch of tagline and banner code---

</div> <br class="clearBoth" /> <!--eof-branding display-- ```
21 Feb 2009, 1:00 AM
#10
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

barco57:

What happened to the logoWrapper div?```

<div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

----bunch of tagline and banner code---

</div> <br class="clearBoth" /> <!--eof-branding display-- ```

barco57 I have no idea where you got that from but I have removed it. It seemed useless and I understand what i am doign now (sorta). It was in the headerWrapper. What i've done instead is just put all three images in headerWrapper. I'v just finished reading this http://www.webdesignfromscratch.com/css-block-and-inline.php, And I am considering switching the divs into span... Do you think that would resolve my issues.?

Looks like after I get this working (hopefully soon)I've learned quiet a lot.

21 Feb 2009, 1:04 AM
#11
s_t_e_v_e avatar

s_t_e_v_e

Zen Follower

Join Date:
Aug 2006
Location:
UK
Posts:
430
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

or...

#logo3 {
float:left;
margin-top:10px;
}

#ssl {
background-color:#FFFFFF;
float:right;
margin:50px;

}

#navMainSearch {
clear:both;
height:20px;
margin-left:275px;
margin-top:14px;
padding:0;
width:280px;}

21 Feb 2009, 1:40 AM
#12
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: Can't get ssl logo to sit in Header

If we could get a fourth version in here, we could really confuse this guy.:P

You've removed several things that Zen uses and added others unneeded. Might be best to regroup to before the addition of the ssl and insert it properly with any method that doesn't require fixing 14 things just to make one work.

From a standard install, insertion of the ssl image would be a snap. If you keep trying to fix broken pieces, you'll wind up with.....broken pieces.

21 Feb 2009, 1:50 AM
#13
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

dbltoe:

If we could get a fourth version in here, we could really confuse this guy.:P

You've removed several things that Zen uses and added others unneeded. Might be best to regroup to before the addition of the ssl and insert it properly with any method that doesn't require fixing 14 things just to make one work.

From a standard install, insertion of the ssl image would be a snap. If you keep trying to fix broken pieces, you'll wind up with.....broken pieces.

hahahah...forth version you lost me there..:mellow: lol. Thanks for the humour man, it is great with all the pitfals to be able to laugh.

and please wait on the forth version...got catching up to do.

steve appreciate your assistance bud.

21 Feb 2009, 1:53 AM
#14
s_t_e_v_e avatar

s_t_e_v_e

Zen Follower

Join Date:
Aug 2006
Location:
UK
Posts:
430
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

:-) The changes to the stylesheet in post 11 will align the images... probably the easiest change to make

21 Feb 2009, 3:02 AM
#15
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

Though I might let you guys know how I doing with this. After Many reading and research in google I've now resolved all my header issues.:clap:. The best part of it is, I actually know what is going on rather then blindly guessing at margins and paddings.

Thanks to all your assistance...I am now going to tackle the footer.

please critique it ... and you dont have to be nice just dont send me back to google.:wink:

One quik question: I see this (#navCatTabsWrapper) in my css and confirm that the styling does effect the website...however I do not see a deleration in the tpl_header.php file.... do you find that odd too or am i missing something?

21 Feb 2009, 3:14 AM
#16
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: Can't get ssl logo to sit in Header

The navCatTabsWrapper is switchable in the admin. If the display of the navCatTabsWrapper is turned off in the admin, you won't see it rendered in the cart.

Also, excite is sometimes a decent place to look.
:rolleyes:

21 Feb 2009, 3:20 AM
#17
hardwiredtemplates avatar

hardwiredtemplates

Zen Follower

Join Date:
Sep 2008
Posts:
211
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

dbltoe:

The navCatTabsWrapper is switchable in the admin. If the display of the navCatTabsWrapper is turned off in the admin, you won't see it rendered in the cart.

Also, excite is sometimes a decent place to look.
:rolleyes:

Thanks buddy, I was thinking that might be the reason because it is optional, and for that reason I would not see a deleration in the tpl_header.php file.

Will look into excite in my next search. Could i get a little feedback from you, or anyone who has contributed to this thread.

21 Feb 2009, 6:14 AM
#18
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: Can't get ssl logo to sit in Header

I'm going to have to download Clyde's Comstock template just to see which of you two is so creative.:P

All sorts of extra things floating in the footer. Once again, an extra div is bouncing things around.

Top of the site is looking good.

Still seeing a lot of coding errors that could mean problems in IE. And, the marquee for Bestsellers is going outside the box on several items.

21 Feb 2009, 10:09 AM
#19
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: Can't get ssl logo to sit in Header

Ok thats strange behavior. When I go to the site in IE7 the logo is where it belongs, logo3 is hidden partially behind the nav menu and the ssl div is nowhere in site. Now what is strange is when I hover over the logo the other two divs pop back into place and stay there until I move to another page then logo3 and the ssl div hide again until the logo div is hovered. Very weird, I also note that the login page has unsecure items being called on to the secure page, specifically the addthis.com code is calling its part http instead of https.

21 Feb 2009, 1:22 PM
#20
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: Can't get ssl logo to sit in Header

Yep, I think you would be best served to start from scratch and maybe even with another template.:dontgetit