Navigation, background images and other mess

[nfp1900 29]

Hi I'm having real trouble getting started with this site - the CSS that I used in some sites with platform pro to move the main.nav to float right doesn't have any effect in the dev version of v.2: #primary-nav ul.main-nav.nosearch { width:inherit; float:right; margin-top:10px; What I need to achieve is logo left and the navigation to the right (with no fine line) and sitting above the background image stripe (which I adjusted into the correct location using the PL settings). I'm also finding that the main content is creeping into the background image but despite searching I couldn't find any conclusive CSS to nudge this all down away from the background image. Thanks as ever for the support!

[Jenny 33]

Since PlatformPro and PageLines Framework are two completely separate products, they have different CSS selectors. If you simply copied/pasted your CSS, it would be better to remove it all and add it to a text editor and then add one-by-one to determine if each one is working properly (or if the selector needs changed. For example, your "main content creeping" is because of this selector: img.mainlogo-img {margin-bottom: -65px;} You may be able to use the [i]float[/i] property to get the logo/nav layout you're looking for. Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting [url="http://www.pagelines.com/pros/"]our Pros page[/url]. Common CSS Tweaks http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1 http://www.pagelines.com/forum/discussion/16222/common-questions-and-customizations#Item_2

[nfp1900 29]

Hi Thanks for the tips, I realise it's a bit of trial and error to get things where you need them. However, I just want an opinion that this is the right way to go about it. The menu is to the right and raised above the background image using: #nav {float:right;} #nav {margin-top: -50px;} However, this causes the content to nudge up so I added this: .content-pad {padding-top: 70px} The weird thing is that this works for say Template 1 but when I add a new page with the default template which has the same layout (feature etc), the menu drops back in front of the background image. Is there a better way of going about this?

[Danny+ 1,327]

Hi, Using negative margins really shouldn't be used to position anything on a website unless there is no other way. Would it be possible for you to create a concept image of how you envision your website and we can then assist you.

[nfp1900 29]

Hi I have been using FB to identify the elements and I've tried using position:absolute to fix the location of the menu - but I still couldn't understand why this was appearing differently on two pages using the same template (look at home and about us) e.g: #nav { position:absolute; right:100px; top:80px; } However, the issue still remains that when using either the float or absolute properties for the menu or main logo that this pushes the main content out and some assistance on the best property to use so that I have a consistent layout would help. Here's a link to the site proposal which is pretty straightforward: http://ontariooilng.com/funmi1/test/ I've built some really successful sites in platform pro (e.g. http://www.raysplayhouse.org and www.lechiron.com) but I just need a bit of a nudge in the right direction to get moving on this!! Thanks

[Jenny 33]

Your Home and About pages are using the same page type and everything so you most likely have some conflicting information in your custom CSS file. You should go through your CSS to find the culprit.

[nfp1900 29]

This is the only CSS I have, what else could cause this? The page is just a test but it's kinda odd. I need to clean up the position/font/hover of the menu etc but it's getting there in terms of positioning using the position:absolute property. BUT is this the correct CSS, that will work across all templates to ensure that the background image remains clear of content, whatever it might be (features/boxes etc)? .fixed_width #branding .content-pad { padding-bottom: 70px;} body{} #nav { position:absolute; right:100px; top:70px; } img.mainlogo-img {margin-top: -15px;} .navigation_wrap { border-bottom: 0 none !important; } .main_nav li a {font-weight: bold;} .fixed_width #branding .content-pad { padding-bottom: 70px;}

[catrina 103]

Have you tried using any CSS to control the background image position itself? (Such as this?: http://www.w3schools.com/cssref/pr_background-position.asp)

[nfp1900 29]

We're sort of going in circles a bit here... if the background image is in the correct location having used the positioning in PL then surely no additional CSS is needed for the background? BUT, this location interferes with the main content, so I increased the bottom padding of the branding with this CSS but I was asking if this was the correct way to go about it: .fixed_width #branding .content-pad { padding-bottom: 70px;} I also asked if the position:absolute was the correct CSS to use to adjust the menu location but maybe it doesn't matter what you use? If it doesn't then that's great.

[Danny+ 1,327]

If you wish to have your logo on the left and menu on the right, why haven't you used the BrandNav section instead of Branding ?

[nfp1900 29]

That would have been so easy... but I don't like how it compresses the logo, it never looks quite right unless PL has improved this (and there are comments in some postings about this). And how I've done it seemed the 'easiest' to get all three elements aligned. It's looking fine across all Mac browsers. I was really just looking for someone to say, OK, that will work.

[Danny+ 1,327]

If you provide an image as to how you want your header to look, I will assist you once I know what it is your exactly trying to achieve.

[nfp1900 29]

Hey Danny This is the screenshot: http://ontariooilng.com/funmi1/test/ It's weird because I've adjusted the padding of the #branding so a feature doesn't come into the content and this works. But then you go back to the site and it's back in the background image again! Would you perhaps recommend creating a png file that fills the whole header space with the blue stripe and logo included and then adding the background repeat as a separate file? The menu can then sit on top of this?

[Danny+ 1,327]

I think the best option would be to go to PageLines > Settings > Color Control and choose "Full-Width Sections" and then use BrandNav. Once you have done this, reply here and I can then assist you further.

[nfp1900 29]

OK, so I changed to to brandnav and added the CSS below to move it down, however I couldn't find the right CSS in firebug that identifies the hover as that is still appearing in the original position! Added some padding to the brandnav field to prevent content coming into the background image. #brandnav li a, #brandnav .nav-special { position:relative; right:20px; top:70px; } #brandnav .content-pad { padding-bottom: 70px; }

[catrina 103]

I don't know where that extra hover background is coming from, but it's included in the brandnav-nav DIV layer. Try removing the "#brandnav li a" selector from your CSS. If you're already moving the brandnav with "#brandnav .nav-special" I don't think you have to move the li items again.

[nfp1900 29]

the #brandnav .nav-special selector doesn't seem to have any effect on the menu when adding CSS. And using FB all I can track down is #brandnav li a, #brandnav .nav-special I was sort of hoping this would be a 5 min job...

[Jenny 33]

Your applying CSS to the wrong selector. Instead of moving the image itself, you need to move the image link. Remove: [code]#brandnav .mainlogo-link img { left: 20px; position: relative; top: -25px; }[/code] Replace with: [code]#brandnav .mainlogo-link, #brandnav .title-container { left: 20px; position: relative; top: -25px; }[/code] If you want to move the navigation down (like the screenshot you posted), you can use: [code]#brandnav .brandnav-nav { margin-top: 40px; }[/code] Hope that helps!

[nfp1900 29]

Thanks for the bit of CSS, that helped get the logo/nav in a reasonable location. However, I get the homepage looking right, then go to add content elsewhere http://ontariooilng.com/funmi1/about-us/ and it's all screwed up with the brandnav dropping into the background image. I added some padding to the brandnav to ensure some distance from the main content area but it's not working how it should - there must be a different way of doing this. I have around 30 pages to add so it's important that the template is solid. I don't remember PPro ever being this erratic. Thanks #brandnav .content-pad { padding-bottom: 50px; }

[catrina 103]

Instead of adding bottom padding to the brandnav, try adding top margin spacing to the main page content area: [code]#page-main {margin-top: #px;}[/code]

[nfp1900 29]

OK, so I removed the brandnav padding and added the margin spacing. On some pages there was no change and the height was still all messed up. All pages are using Template 1. What I've found is that if you use the meta settings to adjust the height of the feature area (I changed it from a static height of 350 to 200), this affects the location of the brandnav: http://ontariooilng.com/funmi1/about-us/ Likewise, I removed the boxes from this page and then just added some copy and the brandnav also drops down into the background image: http://ontariooilng.com/funmi1/test-2/ Does someone have a conclusive way to get a template to actually behave like one? This is all the CSS I have which is nothing complicated: #page-main {margin-top: 30px;} #brandnav .brandnav-nav { margin-top: 50px; } #brandnav .mainlogo-link, #brandnav .title-container { left: 20px; position: relative; top: -20px; } .fboxinfo {clear:left} .fboxgraphic { display: block; background: #eaeaea; padding: 3px; border: solid 1px #d6d6d6; } .fboxgraphic {border:1px solid #b0a9b0;} .fboxgraphic { float: left; height: 120px; padding-right: 3px !important; padding-top: 3px !important;}

[Jenny 33]

Make sure you don't have any CSS anywhere else that you're missing. It seems as if you have page specific CSS somewhere else. Also, make sure each page is setup the same (i.e. not telling a section to be "hidden"). And make sure that the brandnav section is the only thing in the Header Template.

[Jenny 33]

Actually, messing around with your CSS, the issue is resolved with changing the feature height. Change it to 380px and problem solved. You should also get rid of the #page-main {margin-top: 30px;} and see how that looks.

[nfp1900 29]

So I think we are just going in circles here... It should be simple to style the brandnav with CSS and have it remain in that location irrespective of the settings of subsequent templates. But it doesn't seem to manage that. - Removing #page-main {margin-top: 30px;} causes the brandnav to sink into the background so I put it back in. - I removed any other branding sections from the header template so just brandnav remains. - Is it not recommended to adjust the height of a feature area in the meta settings? - The whole point of PL is to have the ability to hide/reveal sections as necessary but you are advising against this? Do you recommend that I go back to Platform Pro? Or do I need to pay for a fix?

[Jenny 33]

Removing the #page-main CSS causes the brandnav to sink BECAUSE of the feature height. Fix the feature height first either in the Meta panel or on the page Meta itself.