Jump to content

Style messed up with php?


nevermore

Recommended Posts

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:

rightwithhtml.jpg

 

header.php look incorrect:

wrongwithphp.jpg

 

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;


}

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...