[Your text to link here…](http://www.proto.annethullfineartdesigns.com/anne-thull-fine-art-designs/ “http://www.proto.annethullfineartdesigns.com/anne-thull-fine-art-designs/”)
This header is what it needs to look like but I know it’s not proper. I can’t select the H2 tagline text and it’s all over the place on the iPhone. Should I avoid absolute positioning? Should I put new divs above the hgroup or inside?
To expand further.
Generally, we read left to right and from top to bottom (excepting, of course, those that don’t) but that generality is fundamental to, say, websites in English.
As such, we should try to structure our HTML in the same way. If your logo/hgroup is top-left it should come before anything else in your HTML…and so on.
That way there is little need to move things about with absolute &/or relative positioning.
I noticed a couple of things that are causing your issue
I would recommend that you
* Side note I would look at removing the clear:both from your h1, h2,h3, h4, h5, h6 elements and create a class that you call only when you need to use the clear:both attribute.
If this does not work for you try putting the code in Codepen an leaving us a link here.
For your side note, can you give me an example?
As for the height I need on the header, should I set a height to something like hgroup, #branding, or #header? Or just use the margins on the elements to push the height?
Also, if you inspect the main navigation something doesn’t seem right. Any suggestions?
Thanks for this effective advice.
To be honest, I would consider re-structuring the whole header; putting things in the right order and using padding/margins to settle things in place rather than ANY positioning.
That’s not to say that positioning doesn’t have it’s place but overuse can lead to problems later.
I’m also confused why your logo h1 is ALL an image but your h2 isn’t. Wouldn’t it make sense to just use one image &/or actual text in the h1/h2 with the appropriate font-family. Granted the AT logo probably needs to be an image…but the rest of it…nah.
As for the navigation, I’m unsure why the background image has been applied to the ‘body’ instead of just the navigation ‘ul’.
Yeah we’re on the same page with restructuring.
As for the H1 logo. Appropriate font styling is easier said than done when it comes to the designer. So I used the logo as the h1 site title and text as the h2 tagline. Just don’t know how else to do it.
For the nav. Please enlighten me on how to get the ul background to go full width.
Thank you, I’m learning a lot.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".