nevermore Posted February 28, 2011 Report Share Posted February 28, 2011 I am slowly but surely learning php. Right now I am creating a header.php with html added in, for my site, however the graphics are misplaced when I look at the php file. In the html version it looks fine and both files are linked to the same style.css, so nothing was changed. The html and correct look: header.php look incorrect: here is the header.php code: <html> <head> <link href="style.css" rel="stylesheet" type="text/css" media="screen"/> </head> <body> <div id="header_wrap"> <div id="header"> <div id="site_logo"> <div id="menu_wrap"> <div id="menu"> <ul> <li><a href="http://www..com/main/index.html">Home</a></li> <li><a href="http://www..com/main/about.html">About</a></li> <li><a href="http://www..com/fanfiction/index.php">Stories</a></li> <li><a href="http://www..com/comics_art">Art</a></li> <li><a href="http://www./forums">Forum</a></li> <li><a href="http://www./chat">Chat</a></li> </ul> </div> </div> </div> </div> </div> </body> </html> index.html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <div id="header_wrap"> <div id="header"> <div id="site_logo"> </div> </div> </div> <div id="menu_wrap"> <div id="menu"> <ul> <li><a href="http://www..com/main/index.html">Home</a></li> <li><a href="http://www..com/main/about.html">About</a></li> <li><a href="http://www..com/fanfiction/index.php">Stories</a></li> <li><a href="http://www..com/comics_art">Art</a></li> <li><a href="http://www..com/forums">Forum</a></li> <li><a href="http://www..com/chat">Chat</a></li> </ul> </div> </div> Style.css (exact same for both) body { margin:0px; padding:0px; background:#2b1b17; } #header_wrap{ width:100%; height:114px; margin:0px; background:url(images/header_bg.png) repeat-x; } #header{ width:100%; margin:0 auto; } #site_logo{ width:340px; height:100px; background:url(.....)no-repeat; } #menu_wrap{ width:100%; height:41px; background:url(images/menu_bg.png) repeat-x; overflow: hidden; } #menu{ width:980px; height:41px; margin: 0 auto; } #menu ul{ margin:0 0 3px 15px; padding:0px; list-style:none; } #menu li { margin:0px; padding:0px; } #menu a { float:left; display:block; height:36px; width:128px; padding:8px; margin:0px 0 0 0px; background:url(images/menu.png) no-repeat; text-align:center; font-size:14px; text-decoration:none; color:white; font-weight:bold; outline:none; } #menu a:hover { color:black; background:url(images/menu_hover.png) no-repeat; } #menu .current { color:black; background:url(images/menu_hover.png) no-repeat; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 28, 2011 Report Share Posted February 28, 2011 I think the issue is that you open and close the divs in a different order in the two files. In your index.php file, you open and close these divs: <div id="header_wrap"> <div id="header"> <div id="site_logo"> </div> </div> </div> ...menu here... Whereas in your header.php file, you don't close those three divs until after the menu: <div id="header_wrap"> <div id="header"> <div id="site_logo"> <div id="menu_wrap"> <div id="menu"> ... menu here... </div> </div> </div> </div> </div> Your CSS file says that the site_logo div is 340px wide, so in your header.php file, (since the menu is within the #site_logo div) it has a max width of 340px. Hopefully that's clear enough... Quote Link to comment Share on other sites More sharing options...
nevermore Posted February 28, 2011 Author Report Share Posted February 28, 2011 I think the issue is that you open and close the divs in a different order in the two files. In your index.php file, you open and close these divs: <div id="header_wrap"> <div id="header"> <div id="site_logo"> </div> </div> </div> ...menu here... Whereas in your header.php file, you don't close those three divs until after the menu: <div id="header_wrap"> <div id="header"> <div id="site_logo"> <div id="menu_wrap"> <div id="menu"> ... menu here... </div> </div> </div> </div> </div> Your CSS file says that the site_logo div is 340px wide, so in your header.php file, (since the menu is within the #site_logo div) it has a max width of 340px. Hopefully that's clear enough... Well I guess I am learning because that made sense to me, a month ago I would have been like "Whaaaaaaaaaaat?" I closed of the site_logo div above where the menu started and now it works! Thank you so much!!! You are awesome! Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 28, 2011 Report Share Posted February 28, 2011 All this up there is html and css, not php. PHP would look something like that: <?php include("header.php"); ?> Yes, you are using php to include the header into the pages, but but that's all. Then, whatever is on the file that gets included is placed on the spot of that line of php. so in you case, if your file header.php looks like what you post above and you include that into the index file, you'll have things like <html> and the link to the stylesheet twice. So I'm either totally not getting what you're doing - or you're not quite clear on the process. Also, looking at what's up there, there is no reason that you need so many divisions - why? And, it seems that you don't have a background image at all, minus maybe that green border portion - you just have a black background. For that, you would NOT use an image, you just tell your background to be black - so like this: background: #000000; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.