PHP Coding difficulties

[mario64mario]

My background is overlapping the rest of my website, and I don't know how to fix that without taking out the background. I need the background to be...well...in the BACKGROUND. Can anyone help me?

Here's my stylesheet (style.css)

/*
Theme Name: The Legend of Mario 1
Theme URI: http://beyondthelostwoods.net/
Description: The first of many layouts for 'The Legend of Mario' Layout designed by Kinopio.
Version: 1.0
Author: Mario64Mario
Author URI: http://smb.zeldaoracles.net/
*/

body {
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(layout/bgpixel.png);
}

img {
border: 0px;
}

td.menu {
border-width: 1px;
border-top: 0px;
border-style: solid;
border-color: #000;
}

td.content {
border-width: 1px;
border-top: 0px;
border-style: solid;
border-color: #000;
}

[btiffin]

This isn't really a PHP issue.

When you set the body background, that influences the entire page. You may want to move that CSS entry to one of your DIVs (if that is how you sectioned your page - I haven't looked) or even down to the <p class=...> level for extra refinement.

Cheers
P.S. I only learn enough CSS to get the task at hand completed - then forget it. But I think that is where your problem stems from.

[mario64mario]

Well I have two stylesheets: Style.css and Rtl.css. Should I get rid of one?

My Stylesheet stems into nothing but images, and my RTL Stylesheet stems into: header.php, and footer.php.

Updated: I took out 'background-image: url(layout/bgpixel.jpeg);' from the Stylesheet, and the site remains the same.

[Aziz]

The latest defined rule overwrites the other ones (if they're the same rule, of course)

[mario64mario]

But it's a matter of bringing the background behind the rest of the content. everything else is there. -.-

[rdrake]

Moved to web design, not a PHP issue.

[DemonWasp]

Assuming that I understand your problem, the solution is relatively simple. First, remember that all elements will default to having a transparent background, so you will be able to see the body background behind them.

Your HTML page is structured in terms of "containers" - each is inside another one, excepting the body, which is the "root" level container. So, the problem here is that you've got a background specified in the body, but there's nothing drawn over it. To fix this, you need to do something like:

code:

td {   background-color: #fff; }

And you'd need a different one for each of td, div, and so forth. That will set their background to white, and you'll probably want to change that.

[mario64mario]

So I insert the code you've given me, and replace the colour with the background file I have?

[jeffgreco13]

No not at all...

You're background image IS in the background and there is NO WAY that it is overlapping tables on your site. (Unless you screwed up to code, so why dont u post some of it more than just the style)

DemonWasp wrote:

code:

td {   background-color: #fff; }

And you'd need a different one for each of td, div, and so forth. That will set their background to white, and you'll probably want to change that.

What he means is that would be one of the style attributes. notice the 'td' that means for each table cell it detects it will make the background colour white. if your body { } remains the same then the picture will still be ur background but will have white squares over it where the table cells are.

[DemonWasp]

There seems to be a slight misunderstanding going on here, about how HTML is rendered (and how styles are applied). Forgive me if I go over stuff you already know, I'm just making sure.

HTML has a block structure, meaning that each element has a beginning and an ending. The beginning is in the form <tagName> while the ending is in the form </tagName>; between them is the contents of that block.

Each of these blocks is rendered so that it contains anything that was between the start tag and the end tag.

When elements (such as tables, divs, spans, and so forth) draw, they will only draw parts that have been specified. If they contain text, then they will draw that text; if they have a border specified (as yours do), then they will draw the border. If they do NOT have a background given, then they won't draw a background, and there will instead just be a background showing through them.

This appears to be the problem you're describing: the background shows through the borders / text of your <div> and <table> elements. To prevent that from happening, you can just add the following to the top of your style.css file (warning: will set the background of most/all elements to be white):

code:

table, div, span, p, h1, h2, h3, h4, h5 {   background-color: #fff; }

This will force those elements to draw a white background over their portion of the body background, so that the body background will NOT show through those elements.

If this is not the problem you're describing, then we will need some example code, or a screenshot - more information to help us understand what's going on.

[mario64mario]

I inserted it into my style.css, and the site is still the background colour.

Let me explain how the design is set up.

I have two stylesheets: 'style.css', and 'rtl.css'

From those two stylesheets, templates are called upon. The templates I have are as follows:

~ Single Post (single.php)
~ Widgets (widgets.php)
~ 404 template (404.php)
~ Comments Template (wp-comments.php)
~ Search Form (searchform.php)
~ Search Results (search.php)
~ Comments (comments.php)
~ Image Upload Template (image.php)
~ Header Template (header.php)
~ Footer Template (footer.php)
~ Index Template (index.php)

The three main templates I am assuming are involved in this problem are Header.php, Footer.php, and Index.php. Below, I will post the two style sheets, and the three templates.

Style.css

/*
Theme Name: The Legend of Mario 1
Theme URI: http://beyondthelostwoods.net/
Description: The first of many layouts for 'The Legend of Mario' Layout designed by Kinopio.
Version: 1.0
Author: Mario64Mario
Author URI: http://smb.zeldaoracles.net/
*/

table, div, span, p, h1, h2, h3, h4, h5 {
background-color: #fff;
}


body {
margin: 0px;
padding: 0px;
text-align: center;
}


img {
border: 0px;
}

td.menu {
border-width: 1px;
border-top: 0px;
border-style: solid;
border-color: #000;
}

td.content {
border-width: 1px;
border-top: 0px;
border-style: solid;
border-color: #000;
}

rtl.css

/*
Theme name: Legend of Mario 1 - The Beginning -
Editors: Mario64Mario; Kinopio
*/


<?php include("http://smb.zeldaoracles.net/wp-content/themes/legendofmario/header.php"); ?>


body, .commentlist li, #commentform input, #commentform textarea, #commentform p, #sidebar, #wp-calendar caption {
font-family:tahoma, arial;
}


#page {
text-align:right;
direction:rtl;
}
h1, h2, h3, #sidebar h2 {
font-family:arial, tahoma;
}
.commentlist li .avatar {
float:left;
}
#header {
margin:0 1px 0 0;
}
.narrowcolumn {
float:right;
padding: 0 45px 20px 0;
}
.widecolumn {
margin: 5px 150px 0 0;
}
.widecolumn .smallattachment {
margin: 5px 0 5px 5px;
}
.postmetadata {
clear:right;
}
#sidebar {
margin-left: 0;
margin-right: 545px;
}
img.alignright {
margin: 0 7px 2px 0;
}

img.alignleft {
margin: 0 0 2px 7px;
}

.alignright {
float: left;
}

.alignleft {
float: right;
}
code {
display:block;
direction:ltr;
text-align:left;
}
acronym, abbr, span.caps {
letter-spacing:0;
}
html>body .entry ul {
padding:0 10px 0 0;
text-indent:10px;
}
html>body .entry li {
margin: 7px 10px 8px 0;
}
.entry ol {
padding: 0 35px 0 0;
}
#sidebar ul ul, #sidebar ul ol {
margin: 5px 10px 0 0;
}
#sidebar ul ul ul, #sidebar ul ol {
margin: 0 10px 0 0;
}
#commentform input {
margin: 5px 0 1px 5px;
}
#commentform #submit {
float:left;
}
.commentlist p {
margin: 10px 0 10px 5px;
}
#wp-calendar #next a {
padding-right:0;
padding-left:10px;
text-align:left;
}
#wp-calendar #prev a {
padding-left:0;
padding-right:10px;
text-align:right;
}
blockquote {
margin: 15px 10px 0 30px;
padding-left: 0;
padding-right: 20px;
border-left: 0 none;
border-right: 5px solid #ddd;
}
#email, #url {
direction:ltr;
}

!important;
font:62.5%/125% 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
margin:0;
padding:0;}

<?php include("http://smb.zeldaoracles.net/wp-content/themes/legendofmario/footer.php"); ?>

Header.php

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>The Legend of Mario
</head>
<table>
<body>
<div id="header">
<img src="http://smb.zeldaoracles.net/layout/banner.png" width="880" height="175">

Footer.php

<hr />
<div id="footer">
<p>
<?php bloginfo('name'); ?> is not in any way affiliated with, connected to, or funded by Nintendo. <br />
Layout Design by Kinopio
</table>
</body>
</html>

Index.php

<!--
Theme Name: Legend of Mario 1
Theme URI: http://www.smb.zeldaoracles.net
Description: This is the Theme for The Legend of Mario
Version: 1.0
Author: Mario64Mario
Author URI: http://www.smb.zeldaoracles.net
-->

<?php include("wp-content/themes/legendofmario/header.php"); ?>

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments ?', '1 Comment ?', '% Comments ?'); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php include("wp-content/themes/legendofmario/footer.php"); ?>

Also, if it helps, I'm using the latest version of Wordpress

[DemonWasp]

Alright, a few things:

1. Please, for the love of all that is holy, use [ code ] or [ syntax ] tags. See this post: http://compsci.ca/v3/viewtopic.php?t=16370&highlight=code+tags

2. Always, always, always indent your code correctly. It may just have been obliterated by posting without the code/syntax tags, but I suspect you don't have any in your actual source. This leads into #3...

3. I may be slightly mistaken because of the PHP stuff (replaced with placeholders, since I don't have LAMP at the moment), but I'm fairly certain you're missing a ton of end-tags. The following is an incomplete listing:

- </title>
- after the Title php code
- </div> corresponding to header <div>

4. You cannot ever have a table wrap around a body tag. Ever. You also seem to have a problem where instead of the following

code:

<Alpha>   <Beta>   </Beta> </Alpha>

You have:

code:

<Alpha>   <Beta>   </Alpha> </Beta>

Which is incorrect and shouldn't be rendered correctly (though most modern browsers will correct your mistakes for you.

5. Tables are not for layout, they are for tabular data. You can use them for layout, but technically speaking, it's discouraged. Use <div> elements instead, they're a better plan, and render better cross-browser.

6. Really, you should be forcing the browser to interpret your page as XHTML-strict. Add the following line to the top of your header.php file to tell the browser that you mean XHTML-strict (forces you to write better HTML code, more likely to work with all browsers):

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

7. Assuming you want to do a really good job, you should then run your code through a validator, to make sure that you're 100% standards-compliant (after that, you can begin the silly-long process of making IE render it acceptably). The accepted standard is W3C, and their validator is here: http://validator.w3.org/

8. As a nitpick, it's generally better form to use names like "footer" or "sidebar" than "center", because changing the appearance of the site later requires changing CSS, not changing the styles referenced. Not critical.

Sorry if that came off as aggressive / mean-spirited. It isn't meant to be; I'm just trying to provide a pointer to being better - take it or leave it as you will. I'll also recognise that I'm certainly not the best webdev out there, by a long shot.

[jeffgreco13]

Yes DemonWasp is exactly right you've got more going on there than just style problems... I'm actually surprised you havent run into further problems. Go through your code and make sure you follow the proper standards.

code:

<html> </html>

Then

code:

<html> <body> </body </html>

Understand? when you open a tag hit the return button a couple times and end it right away then start coding inside. this almost guarentees that you dont run into the similar problem.


ALSO

Quote:

rtl.css

/*
Theme name: Legend of Mario 1 - The Beginning -
Editors: Mario64Mario; Kinopio
*/


<?php include("http://smb.zeldaoracles.net/wp-content/themes/legendofmario/header.php"); ?>


body, .commentlist li, #commentform input, #commentform textarea, #commentform p, #sidebar, #wp-calendar caption {
font-family:tahoma, arial;
}

why are u including a php file in a cascading style sheet? makes no sense!!


Also
Header.php reads its styling from style.css yet the <div> in header.php has an id="header" but if you notice in your style.css there is no specific attribute for .header


And the rtl.css isnt being used ANYWHERE in those pages. When you assign an id to a tag I'm almost positive it overwrites default settings.

[DemonWasp]

Ahah, good eyes jeffgreco; I hadn't noticed that he isn't even including rtl.css. I'm not sure what you mean about "When you assign an id to a tag I'm almost positive it overwrites default settings", though. Tags will take all the styles that they match, with the most-specific styles overriding less-specific styles.

For example, if we have:

code:

<div id="myId" class="myClass">Content</div>

Then the following will all apply:
[code]
div { }
.myClass { }
div.myClass { }
#myId { }
div #myId { }

In something like that order (not 100% sure what it is right at the moment). So yes, styles applied based on ID will suppress styles applied based on being a div object, but only if there is some new style to replace them with.

[jeffgreco13]

overwrite might not have been the right word to use....

bar none he's kinda got a CSS nightmare going on there.