Results 1 to 9 of 9
  1. #1
    Join Date
    May 2006
    Posts
    310
    Plugin Contributions
    0

    Default placement of Sideboxes relative to nav bar?

    Hi all - it's been going slowly, but at least it's going
    Couple items I have not been able to figure out with my ridiculously slow iterative process of "learning" css.

    1) When I view my site in firefox v ie, there is a difference in the spacing of where the headers for the first sideboxes land relative to the navbar. I'd like the top of the headers for the first sideboxes on left and right to be flush with the bottom of the navbar and I can't figure out how to do it.

    2) there appears to be a gap between the left sidebox header (for featured products) and the contents of the box - it doesn't happen on any other sidebox, and I can't figure out if I accidentally changed something or of that's standard appearance. I'd like to get rid of the space...

    http://spritelygoods.com

    TIA!

  2. #2
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: placement of Sideboxes relative to nav bar?

    Quote Originally Posted by woodlandsprite
    Hi all - it's been going slowly, but at least it's going
    Couple items I have not been able to figure out with my ridiculously slow iterative process of "learning" css.

    1) When I view my site in firefox v ie, there is a difference in the spacing of where the headers for the first sideboxes land relative to the navbar. I'd like the top of the headers for the first sideboxes on left and right to be flush with the bottom of the navbar and I can't figure out how to do it.

    2) there appears to be a gap between the left sidebox header (for featured products) and the contents of the box - it doesn't happen on any other sidebox, and I can't figure out if I accidentally changed something or of that's standard appearance. I'd like to get rid of the space...

    http://spritelygoods.com

    TIA!
    You have several minor problems / issues going on here.

    The space between the navCategoryTabs bar and the top of your left and right columns, is the spacing above every side box. To preserve this space for the boxes whilst eliminating it for the top of the column, you can move the whole columns by adding the following to your CSS
    #navColumnOneWrapper, #navColumnTwoWrapper {margin-top:-2.1em}
    The heading sizes in your right hand column are jumbled. This is a deliberate feature of the template_default I suspect, to encourage you to deal with them.
    label {font-size:1.0em}

    To match them to the sizes in your left hand column you need to tweak the h3 heading size and the links within h3 heading sizes as follows
    h3.rightBoxHeading, h3.rightBoxHeading a {font-size:1em}
    Finally, there is a 0.4em margin-top set for all content with class centeredContent which includes your featured box. You don't want to undo this as it would have effects elsewhere, just override it generally in sideboxes which you can do with
    .sideBoxContent {margin-top:0}
    Please don't just stick these in your CSS. You've been learning a lot over the past few days, so please take a few minutes to understand why each of these CSS tweaks resolves one of your issues.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  3. #3
    Join Date
    May 2006
    Posts
    310
    Plugin Contributions
    0

    Default Re: placement of Sideboxes relative to nav bar?

    Quote Originally Posted by kuroi
    You've been learning a lot over the past few days...
    LOL. that's one way to put it. I figure I taught myself HTML the same way, I may not understand the gentle nuances of code...but at least I'm learning to recognize what various things mean!

    I appreciate the pointers and will certainly not just "plug and chug"

    Plenty more things to do before the shop goes live (not the least of which is populating all of the inventory!) and I'm sure I'll have plenty more questions.

    I only hope that once this is "done" I can prove to be helpful to others.

    Thanks again for your help!

  4. #4
    Join Date
    May 2006
    Posts
    310
    Plugin Contributions
    0

    Default Re: placement of Sideboxes relative to nav bar?

    oh dear. I misspoke.
    or mistyped as it were...I was hoping to have the top of the sideboxes be flush with the bottom of the breadcrumb (I think that's the breadcrumb - the part below the navbar). I'll poke the css to see if I can't figure something out...maybe fix the height of the breadcrumb and the column top margins in pixels perhaps?

  5. #5
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: placement of Sideboxes relative to nav bar?

    Quote Originally Posted by woodlandsprite
    oh dear. I misspoke.
    or mistyped as it were...I was hoping to have the top of the sideboxes be flush with the bottom of the breadcrumb (I think that's the breadcrumb - the part below the navbar). I'll poke the css to see if I can't figure something out...maybe fix the height of the breadcrumb and the column top margins in pixels perhaps?
    In order to maintain the consistency between IE and FF that you are aiming for, I recommend using ems rather than pixels. They're more complex to work with, but are treated the same by both browsers, unlike pixels!
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

  6. #6
    Join Date
    May 2006
    Posts
    310
    Plugin Contributions
    0

    Default Re: placement of Sideboxes relative to nav bar?

    ah - I've been messing with the ems and haven't yet struck upon what I'm hunting for - I had thought I had it fixed originally (by setting the Sidebox container margins) It looks nice and clean in Firefox, (Bottom of breadcrumb even and inline with Top of first sideboxes on either side) but no joy in IE. Drat that IE!! lol

    What appears to be causing the trickiness is the margin for the top of the columns currently calls out as "auto"

    I've attempted the following so far and haven't quite stumbled on the best :
    Setting height value of the Breadcrumb to = Margin-top of the navColumnOneWrapper (didn't work, discrepancy still apparent)

    I tried removing the padding on the Breadcrumb and then a repeat of the above
    (also didn't work, discrepancy still apparent).

    Adding back the top padding on the breadcrumb, setting breadcrumb height to look as if it has even padding on top and bottom, then setting margin-top on Column Wrapper....it looks like I can iteratively get this to work, but will it cause issues with the Breadcrumb later?

  7. #7
    Join Date
    May 2006
    Posts
    310
    Plugin Contributions
    0

    Default Re: placement of Sideboxes relative to nav bar?

    oh ho! I've fixed the space between the "featured" header and the "featured content"
    Turns out that the .sidebox content {margin-top: 0em} did not do the trick

    Instead I had to add a new line of code into the CSS

    #featured .centeredContent {margin-top: 0em}

    Now if I can just figure out the other spacing issues on the top of the columns as well as the banner bar I'll be a Happier Zenner...

  8. #8
    Join Date
    Oct 2004
    Location
    Southport, UK
    Posts
    4,236
    Plugin Contributions
    20

    Default Re: placement of Sideboxes relative to nav bar?

    This may help in the understanding of ems - it certainly helped me!

    An em is roughly the width of a lowercase "m" in a font and using a browser's default internal stylesheet, am em is roughly equivalent to 16 pixels.

    Setting the font-size attribute in the body tag to 62.5% (as in the default stylesheet for ZC 1.3) makes one em roughly equivalent to 10px...making it a lot easier to equate ems to pixel sizes e.g. 1.2em will be 12px, 9px will be 0.9em.

    Or near enough!
    Development Manager @ JSWeb Ltd
    Over 15 years with Zencart

  9. #9
    Join Date
    Apr 2006
    Location
    London, UK
    Posts
    10,569
    Plugin Contributions
    25

    Default Re: placement of Sideboxes relative to nav bar?

    Quote Originally Posted by Ryk
    This may help in the understanding of ems - it certainly helped me!

    An em is roughly the width of a lowercase "m" in a font and using a browser's default internal stylesheet, am em is roughly equivalent to 16 pixels.

    Setting the font-size attribute in the body tag to 62.5% (as in the default stylesheet for ZC 1.3) makes one em roughly equivalent to 10px...making it a lot easier to equate ems to pixel sizes e.g. 1.2em will be 12px, 9px will be 0.9em.

    Or near enough!
    Everything Ryk says is spot on, but there is an additional wrinkle to watch out for. Unlike pixels which are absolute, ems are inherited. OK, what doies that mean in plain English? Well, if you apply a font-size in ems to the text in a div, then nest another div inside and give that a font size in ems too, the results may be rather different to what you expected.

    For example, suppose you wanted to create some larger text and so set the font size for your div to 2em. You then nest another div inside and want the text there to be 2ems too and so set a CSS font size for the nested div to be 2em also. NOOOOO. What you will get is a font size of 2 x 2 = 4ems because the inner div also inherits the font size styling for the outer div. You can see this in practice here.

    So the moral of this story is use ems for text sizes, but set them only when you want to change the size and bear in mind any other changes already made higher in the div hierarchy.

    Of course, this poses a second question. If they're so damned tricky, why use them at all? At least we know where we are with pixels! We like ems for reasons of accessibility and cross browser compatibility. Unlike pixels, everybody handles ems in the same way. The biggest drawback of pixels is that IE treats them differently to everybody else when the user decides to change foint size. For example, people with poor eyesight may choose to display all text larger, sometimes very much larger. IE won't let them if the text size is defined in pixels. Whereas ems scale nicely in all browsers and if you define the stuff around your text in ems too, it is possible to design sites that keep much of their shape even when dispalyed at several times the intended text size.
    Kuroi Web Design and Development | Twitter

    (Questions answered in the forum only - so that any forum member can benefit - not by personal message)

 

 

Similar Threads

  1. Nav bar - How can i delete a heading in my Nav bar (v1.5.0)
    By Pretty dumb in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 8 Oct 2012, 02:07 PM
  2. Replies: 1
    Last Post: 10 Jun 2009, 10:16 AM
  3. nav bar / nav links
    By eaglepg in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 11 Jun 2008, 04:49 PM
  4. How to move search bar into nav bar?
    By Sullmoney in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 20 Sep 2006, 08:49 AM
  5. Top bar Header Bar Nav Bar
    By mole69 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 13 Jul 2006, 04:35 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR