CSS help wanted: How do I adjust space around header and at top of page?

[Deckard Cain]

Hi!

I use the Design Studio to adjust my Appearance, and in the Advanced CSS-box I have currently added this to make it look better:

/*Remove top bar with button, member info and search box.*/
#xn_bar {display: none;}

/*No text in header*/
#xg_sitedesc {display:none!important;}

 

Now I want to adjust the spacing in 3 different places, marked in the image below (click for larger version). I think it is too much dead space between the components.

I have tested some code found here on Creators already, but did not get it to work.

How do I do this? Can anyone please help with some CSS-code to try? :)

My website is found at www.diablo-guilds.com, where this can be seen.

[The Internet Junkie]

Hello Deckard!

Try the codes below.

Area #1:

body {margin-top: 50px;}

Area #2:

.xg_theme h1#xg_sitename {padding: 30px 0 5px 3px;}


Description for area #2:

First # of 30px is padding from the top.

Second # of 5px is padding from the bottom. 

Third # of 3px is padding to the right.

I think you will be happy with the adjustment I have implemented with the code above. If not, just adjust to your preference. =)  

 

[Deckard Cain]

Area 1 and 2 worked great, thanks. :)

Still have problems with Area 3 though, can not get that space narrower between the header and the menu. CSS code at the moment like this:

/*Remove top bar with button, member info and search box.*/
#xn_bar {display: none;}
body {margin-top: -15px;}
.xg_theme h1#xg_sitename {padding: 0 0 0 3px;}

/*No text in header*/
#xg_sitedesc {display:none!important;}

Which results in this:

I tried to set it like below, but setting like below did not work. Just brought back the larger distance at Area 2, and Area3 was uneffected.:

.xg_theme h1#xg_sitename {padding: 0 0 -10px 3px;}

Any suggestions?

Feels like the site description is in the way? I have hidden it, but is it still blocking me from closing the gap between header image and menu?

[The Internet Junkie]

Give this a try for distance between header and menu.

#xg_masthead {height: 170px;} 

[Deckard Cain]

YES! Excellent, thank you very much! :)

[Karla Moore-NineGPS]

I am having the same issue as above with area 3. The code above is not affecting change.

Need solutions for area below network logo and menu bar. Thanks!!!

[Karla Moore-NineGPS]

Thanks for your response! That actually resolved the top of the banner but the space between banner (network logo) & menu bar no change. I adjusted it to -5 and the top is perfect. Appreciated!