CSS: Trouble Positioning Nav Element

[bmoneruiux]

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.

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.

[sreejesh]

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.

[ketu]

Hey,

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,

clear touch visuals
		          
creative media + motion graphics








Services


Portfolio


BTS


Contact

Let it try. Its working for me :)

[bmoneruiux]

@ketu:

Thanks. That did work very well!

[bmoneruiux]

Should I still keep all of the float:left’s on h1, h1 a, and h2…or is that too repetitive and I should remove them?

[ketu]

Yes keep it remain as it is.

[bmoneruiux]

@ Ketu

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

[chrisburton]

hgroup is not required in that markup.

[bmoneruiux]

Hard-Refresh your page. hgroup is no longer in that markup.

It’s supposed to look like this:

[chrisburton]

bad image path?

[bmoneruiux]

[chrisburton]

I didn’t notice the h2 therefore hgroup would be appropriate.

[bmoneruiux]

@ChristopherBurton / @wolfcry911:

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.

[chrisburton]

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.

[chrisburton]

@wolfcry911 – I think he mean’t absolute positioning.

In my opinion, I think absolute positioning is really misunderstood and overused.

[Author]

Posts