Use a Logo instead of a titel in the header

Topics: Customizing Orchard
Mar 28, 2012 at 2:01 PM
Edited Mar 28, 2012 at 6:39 PM

In my previous wiki (Wiki Link: [discussion:347094]) i did ask whether this was possible and due to the help of you guys I was able to get it working perfectly... until i did a test with Google chrome.
The strange thing about my solution was that i had to use marging for my logo and image to get them well positioned. This worked, but not for Chrome because there i could not use my naviation anymore.

So I went deeper into it and finally found that within site.css (also in TheThemeMachine theme) there is a part called zones and i found that .zone-header was using padding. What i did was using a negative margin myself and inside .zone-header there was a positive padding. IE9 was working perfectly, but Chrome could not handle it, and navigation was not possible. By removing the padding inside the .zone-header and taking out the margin in my coding, the system was working perfectly and the problem in Chrome was gone. But i still was puzzled ;-)

Could someone tell me why a padding was placed in the .zone-header? I did expected this sort of positioning inside #layout header or in #branding since this information is typically connected to the header. 

Also when and for what do you use the .zone-header and other .zone-... ?

thanks for your comments

Mar 29, 2012 at 7:01 PM

In Short:  Is there anyone who can answer my question where I should put padding or margin for a header?

1. inside #layout header or # branding ?

2. inside .zone-header?

That was basically my post.

Mar 30, 2012 at 4:13 PM

I don't think this is a question related to Orchard at all, but related to CSS in general. In any case, it depends on what you're trying to achieve. In some situations, you may want to use margin, in others padding, sometimes you may want to apply it to one element and other times to some other element. It may help if you have a clear understanding between the difference of margin and padding. This page has a good explanation and visual of the box model.

Mar 31, 2012 at 9:21 AM
Edited Mar 31, 2012 at 9:22 AM

My question has nothing to do with margin or padding, i know how they work :-)
The only remark was that inside the site.css file the header was given a padding under .zone-header which was puzzling me. What is the reason to put it inside the .zone ? This is because there is also a #layout header specified inside the site.css and there i expected it to be.