[Solved] Fixing vertical space between Navigation menu and context box?

[stw2011]

Hi,

I am having trouble fixing the space between the menu and the content box. I want the menu and the content box to be very close to one another, very little vertical space between them.

http://evanography.com/wp/

I have tried making the #content { position: relative; margin-top: -125px; }

Making the margin-top to -125px will move the context box up but then it moves the text in the orange ribbon over to the right which I need to be centered

I am totally new to this so I don’t know the proper way to do this but I hope someone can help me, thank you in advance.

[noahgelman]

style.css line 116

main_header has padding bottom. Change it.

[stw2011]

If I change #main_header { padding-bottom: 25px; }
then the title of the page moves over to the left, but I still want it to be center…how can I achieve that?

thank you very much

[noahgelman]

A couple things wrong with the stylings here. This often happens when a bad choice is made in styling and it grows and grows by adding other styles to try and fix the underlying issue.

logo – This is what is causing the problem. It’s floated, but the height is ruining your layout and kicking around elements. Try this:

logo { position:absolute; top: 0; left:0; }

This will stop it from mucking around the rest of your design but still allow you to position it where you need. Adjust the top/left values as needed to position it.

content – Remove position relative and margin top. Don’t need them. This was to compensate for the #logo pushing everything down.

headernav – You have all kinds of stuff on this. Just switch it’s positiong with #top-nav. Why put it after if it’s supposed to go above. Remove the position: relative and the top/left values. Change float to right.

top-menu – You can float this right and position as needed with some margin. Reduce top padding.

From here you should be good to go.

Remember, if css gets too hard, then something is wrong and you should go back and try to find the heart of the issue. In this case it was the logo (which by the way, the id should be on the , not the ).

As another note, the #container has a width of 950px and the .single_container inside it has a width of 980px. Not sure if that’s intentional but it can cause problems later.

[stw2011]

noahgelman, I made these changes. Unforunately, the context box seems positioned much lower now

Do you have an email I could reach you at separately outside of here? Thank you for the help

[stw2011]

I wanted to thank noah separately off of here… Furthering this, I fixed most of what he said and things seem to be a bit better now.

What I amt trying to do now is fix the width/height (possibly the margins/padding) of the image slider on the home page. I have always wanted it to fill the box, so it doesn’t have the white space on three sides. This is what I see looking at the code, and I have changed them all to 0 so I don’t know how to fix this white space.

http://i41.tinypic.com/2646t09.png

Also, is it possible to move the context box and the main menu even closer together?

Thank you noah and wolfcry911

[stw2011]

Thank you for the tremendous help. I think my issue is that I don’t know CSS that well and I am trying to update a wordpress theme I did not make myself….

I left a little padding in below the header so I could space it a BIT.

Do you think you can help me fix the margins/border to remove the blank space on the image slider now? I still do not see any values there when I check with Firebug

EDIT: I THINK it is coming from the padding on single.content but I think I need that in order to have the actual site content centered more inside of the box. And I dont know how with worpdress to give the slider a different padding…I am using http://wordpress.org/plugins/slideshow-jquery-image-gallery/

Thank you again

[noahgelman]

Im not sure what blank space you’re referring to.

[stw2011]

Noah,

The white space around the left, right, and top of the images on the slider.

Here is a screenshot http://i39.tinypic.com/a9vjwk.jpg

Thank you

[stw2011]

Hi,

I changed that slideshow stuff to

.slideshow_container {margin-top: 0px; margin-left: -14px; width: 980px; }

The margin-top was part of the original CSS in there

it did indeed move the image over but now more white space on the right…

Thank you

[stw2011]

I changed the plugin for the slider I was using and added some similiar CSS (simpler for me) to the style.css and it seems to be working now. It fills the entire space!

I can’t thank you enough

[noahgelman]

Oh, I thought that white space was intentional. Like it was framing the picture.

Congrats on getting everything worked out.

[stw2011]

I have taken some basic HTML courses on udemy which were some gets helpful. Are there any good resources on there (or elsewhere) that I can look at to get a better understanding for CSS?

Thanks again

[noahgelman]

Resources for CSS? Yeah, just Googling around you can see all kinds of stuff for CSS. Probably the biggest teacher though is just experience. Guides and such can teach you what css properties are out there and how they can be used, but it’s experience that lets you use them effectively.

I guess it’s like playing an instrument. Doing it over and over.

[Author]

Posts