Hi i have the layout of my website as background images but when i go to put text over these images it jus ends up not showing(maybe underneath the images)

ive been trying to insert links but they wont show up.

Any way of fixing this problem?

 

heres my code....

<!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" xml:lang="en" lang="en">

<head>

<title>PSD vs NET</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

</head>

 

<body>

<div id="wrapper">

<div id="header">

<img src="images/header.gif" />

<div id="nav">

<ul>

<li><a href="http://www.yoursite.com/resources.html" mce_href=”http://www.yoursite.com/resources.html">Resources</a></li>

<li><a href="http://www.yoursite.com/effects.html" mce_href=”http://www.yoursite.com/effects.html">Effects</a></li>

<li><a href="http://www.yoursite.com/headers/footers.html" mce_href=”http://www.yoursite.com/header/footers.html">Header/Footers</a></li>

<li><a href="http://www.yoursite.com/basics.html" mce_href=”http://www.yoursite.com/basics.html">Basics</a></li>

<li><a href="http://www.yoursite.com/news.html" mce_href=”http://www.yoursite.com/news.html">News</a></li>

<li><a href="http://www.yoursite.com/home.html" mce_href=”http://www.yoursite.com/home.html">Home</a></li>

</ul>

</div>

</div>

<div id="content">

<img src="images/content.gif" />

</div>

<div id="sidebar">

<img src="images/sidebar.gif" />

</div>

<div id="footer">

<img src="images/footer.gif" />

</div>

</div>

 

</body>

 

</html>

................................................................................

.............................................

 

 

#header {

width:990px;

height:127px;

background: url (images/header.gif) top center no-repeat;

}

#content {

float:left;

width:707px;

height:2723px;

background: url (images/content.gif) top center no-repeat;

}

#sidebar {

float:left:600px;

width:283px;

height:2723px;

background: url (images/sidebar.gif) top center no-repeat;

}

#footer {

clear:both;

width:990px;

background: url (images/footer.gif) top center no-repeat;

}

 

#wrapper {

width:990px;

margin:0 auto;

}

You need to remove the images from the html document as they are being put into the document via the style sheet.

You need to remove the images from the html document as they are being put into the document via the style sheet.

 

When I remove them the background disapear!

The image paths need to be relative to the css file, not the html document.

The image paths need to be relative to the css file, not the html document.

 

Ive done this ( i think)

But the background images dont show now....

 

 

body {

background: #717171;

}

#header {

width:990px;

height:127px;

background: url (images/header.gif) top center no-repeat;

}

#content {

float:left;

width:707px;

height:2723px;

background: url (images/content.gif) top center no-repeat;

}

#sidebar {

float:left:600px;

width:283px;

height:2723px;

background: url (images/sidebar.gif) top center no-repeat;

}

#footer {

clear:both;

width:990px;

background: url (images/footer.gif) top center no-repeat;

}

 

#wrapper {

width:990px;

margin:0 auto;

}

................................................................................

.....................

<!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" xml:lang="en" lang="en">

<head>

<title>PSD vs NET</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

</head>

 

<body>

<div id="wrapper">

 

<div id="nav">

<ul>

<li><a href="http://www.yoursite.com/resources.html" mce_href=”http://www.yoursite.com/resources.html">Resources</a></li>

<li><a href="http://www.yoursite.com/effects.html" mce_href=”http://www.yoursite.com/effects.html">Effects</a></li>

<li><a href="http://www.yoursite.com/headers/footers.html" mce_href=”http://www.yoursite.com/header/footers.html">Header/Footers</a></li>

<li><a href="http://www.yoursite.com/basics.html" mce_href=”http://www.yoursite.com/basics.html">Basics</a></li>

<li><a href="http://www.yoursite.com/news.html" mce_href=”http://www.yoursite.com/news.html">News</a></li>

<li><a href="http://www.yoursite.com/home.html" mce_href=”http://www.yoursite.com/home.html">Home</a></li>

</ul>

</div>

 

 

 

</div>

 

</body>

 

</html>

................................................................................

.............................

You still need to put the divs into the html :

<div id="sidebar">
</div>

etc

You still need to put the divs into the html :

<div id="sidebar">
</div>

etc

 

 

 

Ive done that now but the images are still not showing from css?!?

 

<!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" xml:lang="en" lang="en">

<head>

<title>PSD vs NET</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

</head>

 

<body>

<div id="wrapper">

<div id="header">

</div>

<div id="nav">

<ul>

<li><a href="http://www.yoursite.com/resources.html" mce_href=”http://www.yoursite.com/resources.html">Resources</a></li>

<li><a href="http://www.yoursite.com/effects.html" mce_href=”http://www.yoursite.com/effects.html">Effects</a></li>

<li><a href="http://www.yoursite.com/headers/footers.html" mce_href=”http://www.yoursite.com/header/footers.html">Header/Footers</a></li>

<li><a href="http://www.yoursite.com/basics.html" mce_href=”http://www.yoursite.com/basics.html">Basics</a></li>

<li><a href="http://www.yoursite.com/news.html" mce_href=”http://www.yoursite.com/news.html">News</a></li>

<li><a href="http://www.yoursite.com/home.html" mce_href=”http://www.yoursite.com/home.html">Home</a></li>

</ul>

</div>

<div id="content">

</div>

<div id="sidebar">

</div>

<div id="footer">

 

</div>

</div>

 

</body>

 

</html>

 

The css code is the same as above.

Sounds like you need to check your file paths.

For that css to work, stylesheet.css and your images folder need to be in the same directory.