Jump to content
Sign in to follow this  
itscoolitsokay

Help with adding padding, deleting padding and sec nav colours

Recommended Posts

itscoolitsokay

Hi Guys, I've spent the last 3 hours trawling through all the forums and nothing has been able to help me thus far. I'm working on the following band site http://www.athousandcolours.com which I'm pretty happy with thus far. However, I've got 4 issues that are becoming a nightmare. 1. I'd like to delete the black line in between the header and the nav the bar completely so the nav sits flush underneath my header image 2. I'd like to move the content of the page down so that it doesn't encroach upon the blue colour of the nav bar across the width of the canvas. 3. I'd like to match the colours of my main nav onto my secondary nav which you'll see is aligned right within my morefoot area (also so the nav background spans the full width of the page). 4. Is there a simple fix so that my header adjusts to fit the width of different screen sizes (so that when viewed on different monitors it displays the same way?) I'm using the Platform Pro in Full-Width Design framework and in case some of the custom coding I've already inputted is causing conflict here's everything I've used thus far to make the site look the way it is (which is all taken from these forums - thank you so much!) #cred{display:none} .current_posts_info{display:none;} #site #branding .content {width:100%;} #branding .content-pad {padding: 0 0 0 0px;} #header{margin-top:-21px} #secondnav .content-pad { float:right; } #primary-nav { background: #1087bf; } .main_nav .main-nav li a:hover { background: #FFFFFF; color: #000000 !important; } .main_nav li a { color: #000000; } #nav_row, .center { float:left; width:100%!important; overflow:hidden; position:relative; } #nav_row ul, .center ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; width:auto!important; } #nav_row ul li, .center ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } List of installed plug ins as follows.. Facebook Like Box JW Player Next Gen Gallery Maintenance Mode Jetpack by Wordpress Any help much appreciated! Take Care, James

Share this post


Link to post
Share on other sites
Jenny
First, rather than searching the forums, why not install [url="http://www.getfirebug.com"]FireBug[/url] to help you figure out these CSS questions on your own. Even if you don't know CSS, it will help, and will make you learn along the way. :) I used Firebug to determine the changes to your site. For the black border between header and nav, there are actually no default borders that are that big (or dark). I went through every single CSS element in the branding and navigation, manually setting the border to 0 and it didn't go away. Check to see that you don't have it in inline CSS somewhere or maybe as an HTML border or table element. You may want to make your logo less wide. Horizontal scrolling is no good. ;) You can make it the same width for everyone by making your site fixed width. I did notice you have a slight border under your nav that is messing up the space between the nav and video. This will fix that: [code]#primary-nav #nav_row { border: 0 none; }[/code] Moving the content down is done with padding, like: [code]#page-main { padding-top: 10px; }[/code] You should be able to apply your other nav effects to your footer nav by using #secondnav. Just duplicate what's there except use #secondnav instead of .main-nav. Hope that helps!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
itscoolitsokay
Hey Jenny, Thank you - got the secondary nav fixed and the issue with the video but there are still a couple of things I'm trying to get over I've swapped the site over to fixed width but I can't for the life of me get rid of the padding at the top of the page. I've had firebug for a while but my CSS isn't great and I've tried loads of different things to get rid of it. Ideally I'd have the site on fixed width with no padding to the top, left or right so that the banner, primary and secondary navs span the width of everyone's screen when they surf onto the site (is that even possible?). Thanks again x

Share this post


Link to post
Share on other sites
itscoolitsokay
Hi Jenny, Okay so getting to grips with firebug - I managed to get the header and nav flush by inserting the following code [code]body { font-size: 87.5%; height: 100%; line-height: 0em; padding-top: 0px; }[/code] I'm pretty happy with how it looks now - it'd be good to get the thoughts of a pro like yourself as well though. Thanks, James

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×