Argh! CSS Menu Messes UpOnce I INCLUDE it With PHP

silverwex · 14-01-2010 1:47am #1

Basically, I have this file:

www.thelostclassics.com/CSS_MENU.php

and wish to implement it into the index.php page of that site using the INCLUDE function.

But check out www.thelostclassics.com and youll see that the menu is too close to the main area (it seems to be aligned right or pushed there for some reason!).

Tried everything.

Only thing is there are two CSS files in play, one internal on CSS_MENU and one external one (global.css) on index page - might they be conflicting?!

Help needed!

Thanks!

HandWS LTD · 14-01-2010 1:56am

Yes, they are conflicting. I didn't look at the code but sounds like you just have to fix up the padding and margins.

silverwex · 14-01-2010 2:05am

Thanks, Ive been trying all night but still have gotten nowhere.

S.M.B. · 14-01-2010 2:05am

You've got a width of 180px attached to your links which is making it look like it's aligned to the right.

Should the grey background be behind your bullet points too? If so style your li instead of your a tags.

silverwex · 14-01-2010 2:07am

Thanks SMB, the bullets shouldnt be there at all! Theyre supposed to only show on the main page lists!

PS- Thanks SMB, they're aligning ok now, but theres just space between the FEATURED review and menu now. also want the bullets gone and replaced with the grey. Any ideas?

PPS - Shows up ok (ignoring the bullets and space at top!) in FF but still same in IE.

silverwex · 14-01-2010 2:20am

Ok, sorry about all the posts.

BUT... Ive got the bullets taken out, the grey background filled in and its aligned properly in FF.

Two small problems left:

1) Space between top of menu (above HOMEPAGE) and bottom of FEATURED REVIEW image...

and

2) Its still messed up in IE (well its just aligned to the right).

Thanks for any help

silverwex · 14-01-2010 2:47am

Hmmm resolved.

To get the menu taken away from the right in IE I just added

margin-top: 0px;

to ul.nav

and set

width: 100%

in ul.nav also... and it aligned!

Can someone explain?!

Thanks

silverwex · 14-01-2010 3:09am

Two more problems:

Slight space STILL above HOMEPAGE and image.

AND

Any other page (apart from homepage!) makes menu about 70% in IE. Weird.

cormee · 14-01-2010 10:26am

If you're getting into CSS you need to download the Developer Toolbar for Internet Explorer and Firebug for Firefox. They allow you edit your CSS on the fly and see the changes live on the server without any need to FTP.

Firebug for Firefox is the better of the two.

Your two CSS files would probably only conflict if they both specify styles for the same element, if you find you need to specify an element twice in two different sheets but you want one to take priority over the other add "!important" to the end of the style

ie.

body {
background-color: #CEE4FF!important;
}

will be given priority over

body {
background-color: #ffffff;
}

if they are both mentioned in two different style sheets (or even in the same stylesheet) when the page is being rendered.

silverwex · 14-01-2010 1:59pm

Thanks cormee, but have checked both sources and there arent any identical tags in the two CSS files!

pontovic · 15-01-2010 11:13am

Hi Silverwex,

From looking at your code it seems you have one page of HTML embedded in another, basically 2 html tags, one for the main page and another for the menu itself. You shouldn't be doing that as it can cause serious headaches as you have just experienced.

When you are including something in php within a page itself you don't need to worry about declaring another <html> block. I would scrap all the <html><head><title> tags you have, and move the CSS into the main index.php file that you need.

I know you got it sorted but this is something worth looking into. Good luck with it!

silverwex · 16-01-2010 3:10pm

Thanks pontovic for that tip.

I have used an INCLUDE to add the menu to the left as the site is gonna be BIIIGGGGG and need somewhere central for my menu rather than update it on every page (ugh!).

Its my first proper stab at CSS as I have been studying it for only a few weeks now and that site was table based (probably the last table based site Ill ever do) before I even start getting into CSS.

Thanks again.

pontovic · 17-01-2010 3:10am

silverwex wrote: »

Thanks pontovic for that tip.

I have used an INCLUDE to add the menu to the left as the site is gonna be BIIIGGGGG and need somewhere central for my menu rather than update it on every page (ugh!).

Its my first proper stab at CSS as I have been studying it for only a few weeks now and that site was table based (probably the last table based site Ill ever do) before I even start getting into CSS.

Thanks again.

No you're right to include the menu in each page but when editing the include file itself you can ditch the <html> tags, <head> and <body> too.

When PHP includes a file in the main PHP page all the browser sees is the html put together.

Argh! CSS Menu Messes UpOnce I INCLUDE it With PHP

Comments