New to PHP - Attempting to work with DIV & PHP together?

Beginners - Learning PHP
#1

Thank you for coming to read what I am seeking help on =) Currently my main goal is to be able to update multiple pages on my website with just altering code once. I have done research and understand that I need to create individual PHP files under a separate folder (IE: include).

I have done this and text works great; however, I seem to have a problem with my layout (CSS). The menu/navigation is not connecting with the PHP. This is what I have done…

[php]<?php include("includes/layout.php"); ?>

<?php include("includes/menu.php"); ?>
[/php]

Layout = General CSS of the entire page.
Menu = Strictly my navigation, which has the coding below…

[code]

[/code]

Not sure what I could do - I am sure I am not doing it the best way. If anyone could please help me I would greatly appreciate it! Thank you again.

Joe

#2

From what I see it should work with the CSS.
PHP happens server-side so what you need to understand is that anything that is PHP will already be displayed to the page as HTML and the css file will recognize it as regular HTML. If it is not properly rendering then there is a problem in your CSS.

#3

Hmmm - Well here is the coding I have for my DIV :slight_smile:

[code]#centeredmenu {
clear: both;
float: left;
margin: 0px;
padding: 30px;
border-bottom: 0px solid #000; /* black line below menu /
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 120%;
z-index: 1000; / This makes the dropdown menus appear above the page content below */
position: relative;
top: -60px;
}

/* Top menu items /
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#FFF;
text-decoration:none;
color:#6ac25b;
font-weight:none;
border-bottom:0px solid #000;
}
#centeredmenu ul li.active a { / Main #2 /
color:#6ac25b;
background:#FFF;
}
#centeredmenu ul li a:hover {
background:#6ac25b; / Top menu items background colour /
color:#FFF;
border-bottom:0px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { / This line is required for IE 6 and below /
background:#6ac25b; / Top menu items background colour */
color:#FFF;
border-bottom:0px solid #03f;
}

/* Submenu items /
#centeredmenu ul ul {
display:none; / Sub menus are hiden by default */
position:absolute;
top:2em;
left:0;
right:auto; /*resets the right:50% on the parent ul /
width:10em; / width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li /
margin:0; / Reset the 1px margin from the top menu /
clear:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { / This line is required for IE 6 and below /
font-size:.8em;
font-weight:normal; / resets the bold set for the top level menu items /
background:#FFF;
color:#000;
line-height:1.4em; / overwrite line-height value from top menu /
border-bottom:1px solid #DDD; / sub menu item horizontal lines /
border-top:1px solid #DDD;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { / This line is required for IE 6 and below /
background:#6ac25b; / Sub menu items background colour */
color:#FFF;
}

/* Flip the last submenu so it stays within the page /
#centeredmenu ul ul.last {
left:auto; / reset left:0; value /
right:0; / Set right value instead */
}

/* Make the sub menus appear on hover /
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { / This line is required for IE 6 and below /
display:block; / Show the sub menus */
}
[/code]

How does that look?

#4

you can actually change this…
[php]

<?php include("includes/menu.php"); ?>

[/php]
i would put that div in the php file as well so that line would just be
[php] <?php include("includes/menu.php"); ?>[/php]

I think you are putting too much focus on that file being seperate from your HTML. Treat that file as if it was in each and every page you want it in

#5

I did just put initially, but then how do I get the CSS aspect for the menu? :slight_smile:

#6

Just did exactly that and added the DIV into the PHP file (named menu.php) and it still looks wrong. No CSS added to the page.

#7

PS: I dont mean to constantly post in a row, but just an update…

I think it has something to do with my layout.php file. When I remove ALL the coding in there, my page still looks the same - Is it possible I am doing something wrong there?

#8

GAHH!

I figured it out - I read somewhere that I should NOT be placing Style tags when it comes to these PHP pages; however, I went against what I read and it worked PERFECTLY! :slight_smile:

Thank you :slight_smile:

#9

So you are using inline styles instead of using CSS?

#10

My page is used by CSS, but when I put the style tags around it all - It worked.

Is there something that should be different? :frowning:

#11

Sorry to jump in, but, normally, your includes would be whatever code you need EXCEPT the CSS for the code inside the include. The CSS should be in it’s own file and should be included as a link to it up in the header area.

So, the CSS code would contain all of your styling for all parts of the pages. And, as Mdahlke kindly explained,
CSS has nothing to do with the server-side PHP code. If you have FireFox, you can install the FireBug addon
and debug the section that is not displaying correctly. FireBug will show you the CSS that is being used on
the part that is not showing. You basically just right-click on that item and tell it to “inspect” this element.
Then, you can see what is wrong. Also, I have found that sometimes the error will work under IE or FF and
not in, let’s say Chrome. SO, you need to test your page in all three of these browsers. You may even get
an error message that helps you debug it.

Sorry I did not have a quick answer for you, let us know how we can help further…

Sponsor our Newsletter | Privacy Policy | Terms of Service