PDA

Click to See Complete Forum and Search --> : Css background image issue

UAL225
09-08-2009, 09:54 PM
Hey there, I am new to this part of the forums, I usually hang out at the PHP side, well I have this issue.

I am making a site (a simple one) that uses css fully instead of using tables. Everything works great, but one thing, every time I float my p#nav to the left the image disappears from beneath it, but if it is not floated it is good. The image in question is the body.jpg I have it repeating-y, can anyone help me or do you need clarification?

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

<head>
<meta name="keywords" content="Website, Web, Server, Hosting, Design, Web Design, Logo, Logo Deign, local, professional web design, w3c, w3c web design, creative web design, cheap, email, cheap hosting" />
<meta name="description" content="Creative website design, devlopment and implation onto the world wide web" />
<title>TB Web Productions | Home</title>
<link href="tb.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<img alt="TB_Web Productions" src="header.jpg"/>

<div id="maincontent">
<p>Check to see if all is good</p>
<p id="nav">
<a href="test2.php"><img alt="home" src="Home.png"/></a>
<br/>
<a href="aboutt.pgp"><img alt="about" src="About.png"/></a>
<br/>
<a href="yourproject.php"><img alt="YourP" src="YourP.png"/></a>
<br/>
<a href="contactt.php"><img alt="contact" src="Contact.png"/></a>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<!--Used to test valadation not valid yet b/c of links in nav bar --!>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>

</body>

</html>


CSS for page:
body{
text-align:center;
font-family: "Times New Roman", Times, serif;
background-color: black;
}

a:link {color: black;}
a:active {color: black;}
a:hover {color: black;}
a:visited {color: black;}

#maincontent
{
background-image: url(body.jpg);
width:836px;
margin: 0 auto;
}
criterion9
09-08-2009, 11:57 PM
You might have better luck using a "div" instead of a "p" element.
cbVision
09-09-2009, 08:11 AM
Yea, if you want to do a CSS layout, you won't want to use "P" tags for containers. P = Paragraph...use it only for paragraphing your content. Use div's to create your containers.

Also, you won't want to use the break tags. If you use div's, you shouldn't have to use a break because it's block level..p tags are inline, meaning you need a break unless you set the CSS to " p {display: block;} " Instead of using break tags, use "margin-bottom: 10px;" or however much you want a space. You'll need to use a block level element such as a div for it to work though.

You're layout could be simplified like this:


<body>
<style type="text/css">
#maincontent {background: url(body.jpg) repeat-y; width: 836px; margin: 0 auto;}
ul, li {margin: 0; padding: 0;}
ul li {display: inline;} /* makes nav horizontal */
</style>
<img alt="TB_Web Productions" src="header.jpg"/>
<div id="maincontent">
<p>Check to see if all is good</p>
<ul id="nav">
<li><a href="test2.php"><img alt="home" src="Home.png"/></a></li>
<li><a href="aboutt.pgp"><img alt="about" src="About.png"/></a></li>
<li><a href="yourproject.php"><img alt="YourP" src="YourP.png"/></a></li>
<li><a href="contactt.php"><img alt="contact" src="Contact.png"/></a></li>
</ul>
</div>
</body>