- This topic is empty.
-
AuthorPosts
-
March 12, 2013 at 2:11 am #43318
jknetdesign
Participant[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?
March 12, 2013 at 6:32 am #127843Paulie_D
Member>Should I avoid absolute positioning?
Like the plague.
March 12, 2013 at 8:13 am #127848Paulie_D
MemberTo 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.
March 12, 2013 at 10:28 am #127885Historical Forums User
ParticipantHey jk,
I noticed a couple of things that are causing your issue- You are using clear:both; on the search form and on all h1 tags.
- But then you are overwriting the clear:both using positioning attributes
- This will be a never ending battle when building a responsive site and a lot of unnecessary CSS
I would recommend that you
- Remove position attributes from all elements in your header
- Look at using clear:right on search from instead of clear:both
- Remove the clear:both from h1 and h2 tags
- Re-position elements using margin and padding
* 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.
March 12, 2013 at 12:48 pm #127905Paulie_D
MemberTo 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’.
March 12, 2013 at 1:17 pm #127912Paulie_D
Member>Appropriate font styling is easier said than done when it comes to the designer.
Does that mean you don’t have access to the font used for the h1 text (excluding the AT ‘logo’)?
March 12, 2013 at 1:23 pm #127913Paulie_D
MemberFor the nav bg image, I’m not sure how much flexibility there is in the 2012 theme. Does everything have to be inside a single wrapper with the ‘site’ class?
March 12, 2013 at 2:58 pm #127930Paulie_D
MemberYou can’t put PHP in Codepen.
You have to give us the HTML output
March 12, 2013 at 6:55 pm #127972Historical Forums User
Participantjk take a look at [http://codepen.io/doublea79/pen/ItJFj](http://codepen.io/doublea79/pen/ItJFj “Code PEN link”)
I commented on some of your HTML and made some suggestions
March 13, 2013 at 2:17 am #128004Paulie_D
MemberNo CSS?
March 14, 2013 at 11:37 pm #128311Historical Forums User
Participantjk ,
line 138 on your style.css
.site-content {
width:725px;
}
This should be removed or converted to %;
March 15, 2013 at 7:35 am #128305Paulie_D
MemberThe h2 will, unfortunately, need to be moved padding-left & negative margin..(I think that’s the best way).
Try this:
.site-header h2 {
color: #000000;
font-family: “jbt-annabelle”, sans-serif;
font-size: 20px;padding-left: 75px <--
margin-top: -25px; <---
}March 15, 2013 at 7:40 am #128308Paulie_D
MemberOn your searchform
#searchform {
float: right;
clear: right;
top: 55px; <-- this is doing nothing...you can remove it
}March 15, 2013 at 7:46 am #128323Paulie_D
MemberOn the menu, I do think you should remove the ‘red’ bg image from the [body] and apply it to the .main-menu-container element.
We can work on the full width after it’s in the right place.
Let me work on something…
EDIT: Here we go…http://codepen.io/anon/pen/EvcCg
Preserves your current wrapper system…
March 15, 2013 at 3:11 pm #128392Paulie_D
Member -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.