Comments on: Two-Sided Expanding Headers http://manisheriar.com/blog/two-sided-expanding-headers Impeccable Code | Beautiful Design Thu, 13 May 2010 19:08:51 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Ed Diehl http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-13954 Ed Diehl Fri, 16 Feb 2007 12:47:40 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-13954 Working with your expanding header was exactly what I was looking for, except for one thing: I am using Project Seven's CSS Express menus (url:http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm) combined with their 3-column fluid body content, and the tags prevent the menu from displaying at all. I've tried various configurations for placement, but nothing has worked yet. The usual result is that the graphics display behind the 3-columns, and the navbar disappears. If the navbar is visible, it does not function. Suggestions? Best regards, Ed Working with your expanding header was exactly what I was looking for, except for one thing: I am using Project Seven’s CSS Express menus (url:http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm) combined with their 3-column fluid body content, and the tags prevent the menu from displaying at all. I’ve tried various configurations for placement, but nothing has worked yet. The usual result is that the graphics display behind the 3-columns, and the navbar disappears. If the navbar is visible, it does not function.

Suggestions?

Best regards,
Ed

]]> By: Candy http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-2714 Candy Tue, 26 Sep 2006 17:54:59 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-2714 This was really helpful to me, I have been struggling with a similar issue for a while now! Also, any tips for bottom borders? As in, the same as this but running across the bottom of the page. Mine always jumps up and never stays put! This was really helpful to me, I have been struggling with a similar issue for a while now!
Also, any tips for bottom borders? As in, the same as this but running across the bottom of the page. Mine always jumps up and never stays put!

]]> By: Andy http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-510 Andy Wed, 17 May 2006 23:16:35 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-510 Of course! I didn't consider the unstyled display. Of course! I didn’t consider the unstyled display.

]]> By: Sheriar Designs http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-509 Sheriar Designs Wed, 17 May 2006 21:46:16 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-509 <strong>Andy:</strong> I used spans because I don't want these containers to interfere with spacing if the site were viewed unstyled (like on a handheld device). Empty spans take up no space at all, whereas empty divs will cause line breaks. Andy: I used spans because I don’t want these containers to interfere with spacing if the site were viewed unstyled (like on a handheld device).

Empty spans take up no space at all, whereas empty divs will cause line breaks.

]]> By: Andy http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-508 Andy Wed, 17 May 2006 21:42:52 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-508 Nice solution to this one. Is there a reason you use spans instead of divs for the two repeater areas? Seems to me that a div already has the block level setting, and would thus remove one line of css code from each definition. Nice solution to this one.

Is there a reason you use spans instead of divs for the two repeater areas? Seems to me that a div already has the block level setting, and would thus remove one line of css code from each definition.

]]> By: Sheriar Designs http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-504 Sheriar Designs Tue, 16 May 2006 18:06:22 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-504 <strong>David:</strong> Ah ... you're such a ball buster! (And I say that with love) ;o) Let me say again: I did not design this site. I am simply coding it. I have no control over the choice to design for a 1024px window. But, having said that, many sites are going that way now and I expect more will follow. I have yet to design one optimized for that width, however. Yes, "young and hip" may indeed browse with handheld devices, and sites I code are always done with that in mind, as will this one be. Just because it's graphical presentation will be wide, that has absolutely no effect on the unstyled document. David: Ah … you’re such a ball buster! (And I say that with love) ;o)

Let me say again: I did not design this site. I am simply coding it. I have no control over the choice to design for a 1024px window. But, having said that, many sites are going that way now and I expect more will follow. I have yet to design one optimized for that width, however.

Yes, “young and hip” may indeed browse with handheld devices, and sites I code are always done with that in mind, as will this one be. Just because it’s graphical presentation will be wide, that has absolutely no effect on the unstyled document.

]]> By: David Hucklesby http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-503 David Hucklesby Tue, 16 May 2006 17:59:46 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-503 <strong>Mani:</strong> You say: The page is designed ... for a 1024px width browser A 1024px screen does not equate to a "1024px width browser". Consider these cases: - Browser is not maximized - Windows taskbar is to the side - Browser sidebar is open - A browser toolbar is on one side "Young and hip" may prefer handheld devices to PCs anyway, if trends in Japan and Europe are an indication. Mani: You say:
The page is designed … for a 1024px width browser

A 1024px screen does not equate to a “1024px width browser”. Consider these cases:

- Browser is not maximized
- Windows taskbar is to the side
- Browser sidebar is open
- A browser toolbar is on one side

“Young and hip” may prefer handheld devices to PCs anyway, if trends in Japan and Europe are an indication.

]]> By: Sheriar Designs http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-501 Sheriar Designs Mon, 15 May 2006 21:23:22 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-501 <strong>David:</strong> The page is designed (not by me, by the way) for a 1024px width browser (the most common these days), with all the main central content viewable within an 800px wide browser. That's why the scroll is there if your browswer is smaller, and there is nothing to do about that. However, I believe that this method would shrink just fine if the content didn't force the width (see <a href="http://manisheriar.com/natural_high/header1.htm" rel="nofollow">example 1</a>, which shows the technique without added content). As for the nav images not being visible with images turned off, you're right. But I'm willing to live with that as they are visible as text when css is disabled, and I think it is a rare thing for folks to be on a browser with images disabled and css enabled. Especially for this client's target audience (young and hip). David: The page is designed (not by me, by the way) for a 1024px width browser (the most common these days), with all the main central content viewable within an 800px wide browser. That’s why the scroll is there if your browswer is smaller, and there is nothing to do about that. However, I believe that this method would shrink just fine if the content didn’t force the width (see example 1, which shows the technique without added content).

As for the nav images not being visible with images turned off, you’re right. But I’m willing to live with that as they are visible as text when css is disabled, and I think it is a rare thing for folks to be on a browser with images disabled and css enabled. Especially for this client’s target audience (young and hip).

]]> By: David Hucklesby http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-500 David Hucklesby Mon, 15 May 2006 20:01:11 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-500 Expand - yes. Shrink - no. I'd expect a large number of visitors still experience a horizontal scroll. Could you make the minimum width smaller? Did you try PNG instead of JPG for the original wide image? A heads up - the secondary links don't show with images disabled, or on text browsers. They show up fine in small screen mode, though. Cordially, David. Expand – yes. Shrink – no. I’d expect a large number of visitors still experience a horizontal scroll. Could you make the minimum width smaller?

Did you try PNG instead of JPG for the original wide image?

A heads up – the secondary links don’t show with images disabled, or on text browsers. They show up fine in small screen mode, though.

Cordially, David.

]]> By: Sheriar Designs http://manisheriar.com/blog/two-sided-expanding-headers/comment-page-1#comment-499 Sheriar Designs Mon, 15 May 2006 02:42:46 +0000 http://manisheriar.com/blog/two-sided-expanding-headers#comment-499 The *{margin:0;pading:0;} resets the margin and padding for <strong>ALL</strong> elements. I do this because different browsers have various default margin and padding for elements, which can cause layout discrepencies. If the margin and padding of all elements is reset to 0 then you will have the opportunity to set them all to whatever you like and be sure that the results will be the same among all browsers. So, if you use this method, you will have to reset the margins for paragraphs, as well as for all other elements. Hope this helps! The *{margin:0;pading:0;} resets the margin and padding for ALL elements. I do this because different browsers have various default margin and padding for elements, which can cause layout discrepencies. If the margin and padding of all elements is reset to 0 then you will have the opportunity to set them all to whatever you like and be sure that the results will be the same among all browsers.

So, if you use this method, you will have to reset the margins for paragraphs, as well as for all other elements.

Hope this helps!

]]>