Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Paul Murphy
Paul Murphy
6,162 Points

Displaying an element above another

Hi I have a google search bar on my site and I want it to appear directly above the main nav. After I installed it and floated the form to the right of the page it pushed the nav element to the left. They vertically both appear how they should but the nav is not in the correct horizontal position.

http://codepen.io/paul-masteel/pen/kDnrp

Any suggestions?

6 Answers

Paul Murphy
Paul Murphy
6,162 Points

Hi Navid, thank you very much!!! In terms of position the 2 elements are exactly where I want them now :)

Unfortunately there seems to be a collapsing issue. I want the 3 elements in my header to display on the same line and not with such a big vertical gap between my logo on the left and the 2 elements on the right.

How do I overcome this?

http://i1285.photobucket.com/albums/a588/paul-masteel/pvs-nav2_zps2e673ed6.jpg (this is what it looks like now)

EDIT***

I have fixed it with a margin-top: -95px;

Is there any way to do it without using this?

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

which 3 elements you want in same line? you've to prevent using negative margins only when there is no other way.

Paul Murphy
Paul Murphy
6,162 Points

It currently displays like this:

http://i1285.photobucket.com/albums/a588/paul-masteel/pvs-nav_zpsee8aa830.png (I have managed it display like this using a negative margin)

without the negative margin it looks like this: http://i1285.photobucket.com/albums/a588/paul-masteel/pvs-nav2_zps2e673ed6.jpg

I want the logo to be horizontally parallel with the nav and search bar. Thanks

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

http://codepen.io/anon/pen/vwAoL ;) without negative margin ;) goodluck!. offcourse you can use a div and store the logo in it. The most common thing i do for a logo i make a <h1> tag and store the logo as background and give it a negative text-indent like -100000px this makes it possible that Search Engines index your page better because it's symantic.

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

check here just adjust the positions then it should be right;)

just edit it to make more logic

http://codepen.io/anon/pen/GlwJq

Paul Murphy
Paul Murphy
6,162 Points

Thanks for the examples but I don't want them to appear on the same line I want the nav to appear directly beneath the search bar.

Paul Murphy
Paul Murphy
6,162 Points

Thanks for trying but unfortunately that didn't work the elements still seemed to overflow and not position themselves how I wanted.

Paul Murphy
Paul Murphy
6,162 Points

Just as a test I put a <br> tag in the html after <form> and before the <nav> and the vertical position is exactly how I want it but now the whole header section displays too tall. I want to achieve the same effect with CSS without using the <br> tag

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

Can you make a picture how you wanted? or did you already solved it?

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

aaah noww its clear, im gonna fix it for you :)

Navid Mirzaie Milani
Navid Mirzaie Milani
6,273 Points

hahah you're welcome dude, glad i could help!