I can't seem to get my nav to sit where I need it to be. My nav is inside of my header and SHOULD be to the right of the h1 & h2, however it seems to be sitting below them and to the right. I've been racking my brain for a day or two trying to figure out why this isn't working, so now I need help from others lol.
If someone would be so kind as to FireBug it and tell me where I went wrong, I'd greatly appreciate it. Everything questionable it color coded. The nav (blue) is supposed to be INSIDE on the header (pink).
I'm also trying to do this WITHOUT creating any unnecessary divs. HOPEFULLY this can be worked out without having to do more div wraps as that's just messy and uncalled for.
you have applied clear:both to the h2 and the nav tag .Thats what causes the problem. And i would strongly recommend putting both the h2 and h1 tags within a div.
sreejesh, I'm afraid it has nothing to do with the h1 and h2 clearing. The clear will only clear a preceeding float - not one that follows, as in this case. Also, there is really no reason to put the h1 and h2 in a div. What would you gain - they're already block level elements?
@psionicsin, you have a couple of options here. You could make the header position: relative and absolutely position the nav; or you could float both the h1 and h2 left, clear the h2 left, float the nav right and pull it up the height of h1 with a negative margin; or you could put the nav before the h1 and h2 in the source and float it right; or you could leave everything as is and pull it into place with a negative top margin.
I personally would probably use the AP in this case.
Can you take a look at the development of it so far and see what's going on?
I was told that I could make this work WITHOUT grouping or div-grouping those headers together. However not much explanation went into how I can do this. Would you know based on the current structure of the site?
psionicsin, I already gave you 4 ways of doing this - and there are others as well! Try this: don't float the h1, h1 a, or the h2; but float the nav right and give it a negative top margin.
Or don't float the h1, h1 a, or the h2; and position: absolute; bottom: 0; right: 0; on the nav and position: relative on the header
I'm trying to make this site as hack-less as possible. I've been told to never use positioning as it's just a fast hack to get around problems that could be dealt with otherwise {professors words, not mine lol}.
Now I am aware that the floats are causing them not to be how I want them. However, on a strange note, I was told elsewhere that I could float everything in there left and still get the functionality I want. Now I'm getting opposing viewpoints here and am trying to figure out why.
My original launched markup [after posting here] was an hgroup floated left containing the h1 & h2, and then the nav was floated right, with a top-margin to set it in place. So, I did take your advice (no neg-margin needed).
BUT...IE, and earlier versions of FF (even with the HTML5Shiv) broke my design. I don't think they liked hgroup one bit. The Shiv also doesn't allow IE8 and below to read CSS stylings on HTML5 elements. So now I'm forced to contain the header within the container to make sure they don't blow up.
I don't want to use a neg-margin because I'm afraid it'll mess up something else in the long run and then I'll have to do more work in the future. Leaving my only option to be to put the nav before the h1/2 like you suggested.
Now I'm gonna to cringe when I do this because, in my mind, I wanted the page to flow a certain way when reading the source. That and I considered switching the visual hierarchy of HTML elements another form of a hack. Hmm.
I was going off of @ketu's markup above which did not require an hgroup. As I looked at your site, I saw an h1 and h2 grouped together which would be appropriate to wrap them in an hgroup.
Who cares what your source looks like as long as your content and design looks the way you want it to.
First, I hope you don't feel that I'm upset - I'm not. I'm only trying to help you. I personally don't care if you take my advice or not.
Next, I respectfully but wholeheartedly disagree with your professor - positioning most definitely has a place and purpose in css design and is not a fast hack. If he means to use positioning throughout the entire page - then I agree it can be troublesome. Many new designers think AP is the best thing since sliced bread only to later discover how fragile an entire page built upon can be. I challenge your professor to discuss positioning with greats like Andy Clarke...
Now, let's address the hgroup first. Somehow your understanding of the shiv is backwards. The shiv is what allows IE8 and below to style the html5 elements. Without it, the styling is ignored. At any rate, the hgroup doesn't matter. You can do this either with or without it - its use depends more on the semantics and not the styling.
Don't forgo the negative margins just because you're worried about them. They work - they're in the specs and they're handled correctly most of the time, even by IE (which does have margin issues, but not related to this type of use).
I would agree with you in that sometimes changing source order for styling purposes is a hack. Sometimes its completely unavoidable, but usually the page source should be considered before styling (for SEO and semantics).
Here's yet another way to accomplish this. Float the h1 and h2. Don't float the nav, but give it a top margin of 15px (65-50) and left margin of 560px.
Right, I was speaking of absolute position (AP). I mentioned that many newcomers make too great use of it (without fully understanding it). So I agree I think the masses don't fully understand or use appropriately, but that still doesn't negate its usefulness in some situations.
Didn't think you were mad at all lol. I just wanted to make sure that I thoroughly detailed my process and shortcomings as I went along so that you guys know how I arrived at where I am now...which is HERE.
I changed the source order, although I'm going to go back and try what you suggested. Something that's killing me though is that the nav seems to like to sit in a place that NORMALLY would be below the block width header elements. Even when I give them a width. BUT...I'm gonna try that and hopefully that does it for me.
It won't because they're floating - add clear: left; to the h2 then you'll need to add overflow: hidden to the nav so that it creates a new formatting context and the floating li within aren't affected by the previous floats.
Before I even read the article, let me just state right now - the overflow: hidden; method of containing floats is most definitely NOT a hack - its in the specs and it works. I'll go on to say that there are a number of ways to contain floats and no one way is perfect 100% of the time. I'll also say that overflow:hidden in my previous post was not used to contain floats. It was used to change the block formatting context - a completely different thing.
Now I'll read the article... Okay, I read it and not compelled to change a thing. I also don't agree with Cederholm's changing of the clearfix name, but that's a different story. A developer should know the various ways to contain a float and which one to use in a certain situation. But again, my use above was for a different reason entirely.
Here's the test site http://www.cleartouchonline.com/test/
If someone would be so kind as to FireBug it and tell me where I went wrong, I'd greatly appreciate it. Everything questionable it color coded. The nav (blue) is supposed to be INSIDE on the header (pink).
I'm also trying to do this WITHOUT creating any unnecessary divs. HOPEFULLY this can be worked out without having to do more div wraps as that's just messy and uncalled for.
And i would strongly recommend putting both the h2 and h1 tags within a div.
@psionicsin, you have a couple of options here. You could make the header position: relative and absolutely position the nav; or you could float both the h1 and h2 left, clear the h2 left, float the nav right and pull it up the height of h1 with a negative margin; or you could put the nav before the h1 and h2 in the source and float it right; or you could leave everything as is and pull it into place with a negative top margin.
I personally would probably use the AP in this case.
I have checked your site and this is html5. so pl. add "hgroup" tag in html and all h1 and h2 put inside this tag.
So your structure will become following,
Let it try. Its working for me :)
Thanks. That did work very well!
Can you take a look at the development of it so far and see what's going on?
I was told that I could make this work WITHOUT grouping or div-grouping those headers together. However not much explanation went into how I can do this. Would you know based on the current structure of the site?
dev.cleartouchonline.com
It's supposed to look like this:
Try this: don't float the h1, h1 a, or the h2; but float the nav right and give it a negative top margin.
Or don't float the h1, h1 a, or the h2; and position: absolute; bottom: 0; right: 0; on the nav and position: relative on the header
I'm trying to make this site as hack-less as possible. I've been told to never use positioning as it's just a fast hack to get around problems that could be dealt with otherwise {professors words, not mine lol}.
Now I am aware that the floats are causing them not to be how I want them. However, on a strange note, I was told elsewhere that I could float everything in there left and still get the functionality I want. Now I'm getting opposing viewpoints here and am trying to figure out why.
@wolfcry911 (specifically):
My original launched markup [after posting here] was an hgroup floated left containing the h1 & h2, and then the nav was floated right, with a top-margin to set it in place. So, I did take your advice (no neg-margin needed).
BUT...IE, and earlier versions of FF (even with the HTML5Shiv) broke my design. I don't think they liked hgroup one bit. The Shiv also doesn't allow IE8 and below to read CSS stylings on HTML5 elements. So now I'm forced to contain the header within the container to make sure they don't blow up.
I don't want to use a neg-margin because I'm afraid it'll mess up something else in the long run and then I'll have to do more work in the future. Leaving my only option to be to put the nav before the h1/2 like you suggested.
Now I'm gonna to cringe when I do this because, in my mind, I wanted the page to flow a certain way when reading the source. That and I considered switching the visual hierarchy of HTML elements another form of a hack. Hmm.
Who cares what your source looks like as long as your content and design looks the way you want it to.
Next, I respectfully but wholeheartedly disagree with your professor - positioning most definitely has a place and purpose in css design and is not a fast hack. If he means to use positioning throughout the entire page - then I agree it can be troublesome. Many new designers think AP is the best thing since sliced bread only to later discover how fragile an entire page built upon can be. I challenge your professor to discuss positioning with greats like Andy Clarke...
Now, let's address the hgroup first. Somehow your understanding of the shiv is backwards. The shiv is what allows IE8 and below to style the html5 elements. Without it, the styling is ignored. At any rate, the hgroup doesn't matter. You can do this either with or without it - its use depends more on the semantics and not the styling.
Don't forgo the negative margins just because you're worried about them. They work - they're in the specs and they're handled correctly most of the time, even by IE (which does have margin issues, but not related to this type of use).
I would agree with you in that sometimes changing source order for styling purposes is a hack. Sometimes its completely unavoidable, but usually the page source should be considered before styling (for SEO and semantics).
Here's yet another way to accomplish this. Float the h1 and h2. Don't float the nav, but give it a top margin of 15px (65-50) and left margin of 560px.
In my opinion, I think absolute positioning is really misunderstood and overused.
I remember using AP many moons ago, and then getting yelled at on codingforums.com for it lol.
@wolfcry911
Didn't think you were mad at all lol. I just wanted to make sure that I thoroughly detailed my process and shortcomings as I went along so that you guys know how I arrived at where I am now...which is HERE.
I changed the source order, although I'm going to go back and try what you suggested. Something that's killing me though is that the nav seems to like to sit in a place that NORMALLY would be below the block width header elements. Even when I give them a width. BUT...I'm gonna try that and hopefully that does it for me.
Ok I tried what you suggested and it looks great...except for one thing...
H2 is still being a b**** and not wanting to go underneath H1
See update here. Hard Refresh for new content.
then you'll need to add overflow: hidden to the nav so that it creates a new formatting context and the floating li within aren't affected by the previous floats.
I've always been confused by this, but how would/could I implement THIS TECHNIQUE in place of the overflow:hidden hack?
Now I'll read the article... Okay, I read it and not compelled to change a thing. I also don't agree with Cederholm's changing of the clearfix name, but that's a different story. A developer should know the various ways to contain a float and which one to use in a certain situation. But again, my use above was for a different reason entirely.
I couldn't stop laughing when I read that lol. But ok, will do.