PDA

View Full Version : God this is stressing me out



Mccall101
Mar 20th, 2009, 04:58 PM
Alright I don't mean to sound like I'm whinging but I'm really stressing out, I need to get my page done and etc and nothing is working whenever i follow the exact instructions or copy and paste the EXACT tag as in a video.

Here's the situation. I'm trying to insert an image into my page using CSS. I've asked 3 different ppl and none of what they have told me worked. I have my images in my html folder with the stylesheet and etc. And I copied the EXACT tag to insert it. and nothing works. my css on fonts work but not images

abduraooft
Mar 20th, 2009, 05:01 PM
please help meThat's not the way to ask a question here in CF. We need to see what you've done at your end. So post a link or some relevant code and then elaborate your issue.

PS: http://www.codingforums.com/postguide.htm

Mccall101
Mar 20th, 2009, 05:13 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>SKO Designs!</title>

<meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-1">'
<link href="Prototype.css" rel="stylesheet" />
</head>
<body>

<div id="header">

</div>
<!--End Of Header-->

<div id="nav">
<ul id="nav">
<li><a href="SKODesignshome.htm">Home</a></li>
<li><a href="SKODesignsAbout.htm">About Us</a></li>
<li><a href="SKODesignsContact.htm">Contact Us</a></li>
<li><a href="SKODesignsAdvertise.htm">Advertise Here</a></li>
<li><a href="SKODesignsBasic.htm">Basic Package</a></li>
<li><a href="SKODesignsPremium.htm">Premium Package</a></li>
</ul>
</div>

<div id="container">
<h2>Welcome To Stylish Knockouts Designs</h2>
<p>Welcome to SKO Designs</p>
</div>


<div id="footer">
<p style="text-align: center;">&copy www.SKODesigns.com All Rights Reserved</p>
</div>
</body>

</html>

theres my html


body{
text-align: center;
font-family: Helvetica,arial,sans-serif;


#header{
position: relative;
background-image:(SKODesigns2_02.png);
background-repeat: no-repeat;
}



theres my so far css

BoldUlysses
Mar 20th, 2009, 05:35 PM
On first glance it looks like you need to give your header div some dimensions. Background images in CSS won't automatically expand their containing box like they would if you used the <img> tag in the HTML. I dunno what your image sizes are but try something like this:


#header{
position: relative;
background-image:(SKODesigns2_02.png);
background-repeat: no-repeat;
height:100px;
width:400px;
}

Adjust pixel values to suit.

Also, your syntax is off:


background-image:url(SKODesigns2_02.png);

Mccall101
Mar 20th, 2009, 05:42 PM
didn't work. Where exactly should my images be? I had them in a folder named images on my desktop then i moved them to my folder where my html and css files were. none fixed my probelm

BoldUlysses
Mar 20th, 2009, 05:46 PM
See the updated post above for the recommendation about syntax. Running your CSS through the validator (http://jigsaw.w3.org/css-validator/) frequently is good practice and would've caught that.

Also, you're missing a closing bracket for your body statements:


body{
text-align: center;
font-family: Helvetica,arial,sans-serif;
}

#header{
position: relative;
background-image:url(SKODesigns2_02.png);
background-repeat: no-repeat;
}

TinyScript
Mar 20th, 2009, 06:03 PM
<meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-1">'

you see the little quote after the tag, that's a problem

and you donb't have an ending bracket for you body in the css

TinyScript
Mar 20th, 2009, 06:06 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>SKO Designs!</title>

<meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-1">
<link href="Prototype.css" rel="stylesheet" />
</head>
<body>

<div id="header">

</div>
<!--End Of Header-->

<div id="nav">
<ul id="nav">
<li><a href="SKODesignshome.htm">Home</a></li>
<li><a href="SKODesignsAbout.htm">About Us</a></li>
<li><a href="SKODesignsContact.htm">Contact Us</a></li>
<li><a href="SKODesignsAdvertise.htm">Advertise Here</a></li>
<li><a href="SKODesignsBasic.htm">Basic Package</a></li>
<li><a href="SKODesignsPremium.htm">Premium Package</a></li>
</ul>
</div>

<div id="container">
<h2>Welcome To Stylish Knockouts Designs</h2>
<p>Welcome to SKO Designs</p>
</div>


<div id="footer">
<p style="text-align: center;">&copy www.SKODesigns.com All Rights Reserved</p>
</div>
</body>

</html>


css


body{
text-align: center;
font-family: Helvetica,arial,sans-serif;
}

#header{
position: relative;
width:200px;
height:200px;
background-image:url('SKODesigns2_02.png');
background-repeat: no-repeat;
}

Mccall101
Mar 20th, 2009, 06:57 PM
still nothing

Mccall101
Mar 20th, 2009, 07:11 PM
should my images folder be in the same folder as my html and css file are? does it matter where it is as long its on my computer? None of what has been posted has changed this and im sure its none of you's fault its probably my fault somewhere

Excavator
Mar 20th, 2009, 07:14 PM
For this line to work -
background-image:url('SKODesigns2_02.png');
your image would need to be in the same directory as Prototype.css.

Mccall101
Mar 20th, 2009, 07:22 PM
still nothing. I have a folder on my computer named SKO Designs. In that folder is my css file, my html file. and my images. I've done exactly whatt everyone has told me and nothing has fixed it.

Excavator
Mar 20th, 2009, 07:27 PM
Can you put something online for us to look at? There must be a problem with your path or what your calling the image. Spelling error maybe?

Mccall101
Mar 20th, 2009, 07:38 PM
skodesigns.com

Excavator
Mar 20th, 2009, 08:18 PM
Prototype.css does not appear to be a CSS file at all. This is what I get on this end -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Error 404 - Not found</title>
</head>
<frameset rows="100%" frameborder="0" framespacing="0" border="0">
<frame src="http://www.sedoparking.com/domparking.php?id=415788&u=http://skodesigns.com/Prototype.css">
<noframes>

<body bgcolor="White" text="Black">
<table cellspacing="0" cellpadding="0" width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">


<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="5" valign="top"><img src="/spicons/notfound.jpg" width=163 height=177 alt="" border="0"></td>
<td colspan="4"><img src="/spicons/mrblue.gif" width="500" height=2 alt="" border="0"></td>
<td><img src="/spicons/undercover.gif" width=1 height=2 alt="" border="0"></td>
</tr><tr>
<td rowspan="4" valign="bottom"><img src="/spicons/ecke.gif" width=14 height=43 alt="" border="0"></td>
<td valign="middle" align="center" rowspan="2">
<table cellspacing="1" cellpadding="0" width=470 border="0">
<tr>
<td><font face="Verdana, Helvetica, sans-serif" size="5" color="Red"><b>Error 404 - Not found</b></font><br><img src="/spicons/undercover.gif" width=14 height=5 alt="" border="0"><br></td>
</tr><tr>
<td><font face="Verdana, Helvetica, sans-serif" size="2" color="Black">The document you requested is not found.</font><br><br></td>
</tr>
</table>
</td>
<td rowspan="2" width=2 align=right><img src="/spicons/mrblue.gif" width=2 height=146 alt="" border="0"></td>
<td><img src="/spicons/undercover.gif" width=1 height=132 alt="" border="0"></td>
</tr><tr>

<td><img src="/spicons/undercover.gif" width=1 height=14 alt="" border="0"></td>
</tr><tr>
<td colspan="2"><img src="/spicons/mrblue.gif" width=486 height=2 alt="" border="0"></td>
<td><img src="/spicons/undercover.gif" width=1 height=2 alt="" border="0"></td>
</tr><tr>
<td colspan="2"><img src="/spicons/undercover.gif" width=486 height=27 alt="" border="0"></td>
<td><img src="/spicons/undercover.gif" width=1 height=27 alt="" border="0"></td>
</tr>
</table>

</td>
</tr>
</table>

</body>
</noframes>
</frameset>
</html>


What is your real .css file called?
http://skodesigns.com/SKODesigns2_02.png is not there.

Maybe you should try some embedded CSS to start with? Embedded is enclosed within the documents head... like this -
<head>
<style type="text/css">
<!--
p {text-indent: 10pt}
-->
</style>
</head>

You would still need to get your .png in the correct directory.

TinyScript
Mar 20th, 2009, 08:34 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>SKO Designs!</title>

<meta http-equiv="Content-Type" content="text/html"; charset=iso-8859-1">
<style>
body{
text-align: center;
font-family: Helvetica,arial,sans-serif;
}

#header{
position: relative;
width:200px;
height:200px;
background-image:url('SKODesigns2_02.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>

<div id="header">

</div>
<!--End Of Header-->

<div id="nav">
<ul id="nav">
<li><a href="SKODesignshome.htm">Home</a></li>
<li><a href="SKODesignsAbout.htm">About Us</a></li>
<li><a href="SKODesignsContact.htm">Contact Us</a></li>
<li><a href="SKODesignsAdvertise.htm">Advertise Here</a></li>
<li><a href="SKODesignsBasic.htm">Basic Package</a></li>
<li><a href="SKODesignsPremium.htm">Premium Package</a></li>
</ul>
</div>

<div id="container">
<h2>Welcome To Stylish Knockouts Designs</h2>
<p>Welcome to SKO Designs</p>
</div>


<div id="footer">
<p style="text-align: center;">&copy www.SKODesigns.com All Rights Reserved</p>
</div>
</body>

</html>


this will work. Make sure your image is named SKODesigns2_02.png and that it's a png file. Make sure the html file is in the same location as the image file
here's what it looks like
http://i41.tinypic.com/33u7pl5.jpg

Mccall101
Mar 20th, 2009, 08:35 PM
you typed in the thing wrong. is SKODesigns (http://www.skodesigns.com)

This was for excavater

Mccall101
Mar 20th, 2009, 08:38 PM
part of the image showed up but just like 1/4th of it

Mccall101
Mar 20th, 2009, 08:47 PM
k it works now. What was wrong with it?

Mccall101
Mar 20th, 2009, 08:49 PM
ok so now i uploaded that and it didn't show up on the web but it showed up on my comp

Excavator
Mar 20th, 2009, 08:51 PM
you typed in the thing wrong. is SKODesigns (http://www.skodesigns.com)

This was for excavater

I didn't type anything. Copy/paste from you.

Mccall101
Mar 20th, 2009, 08:54 PM
i got the same thing you gave me when i forgot to add the s. Srry if i posted it wrong

Mccall101
Mar 20th, 2009, 09:39 PM
Anyone know why it doesn't show up online but it will when i preview the html file?

Excavator
Mar 21st, 2009, 12:44 AM
Anyone know why it doesn't show up online but it will when i preview the html file?

http://www.skodesigns.com/SKODesigns2_02.png should load your picture. Since it doesn't, you either have spelling error, a case errror or a path error.
I do know that if your image is actually named skodesigns2_02.png that it will work locally but not on the server as your server is likely case sensitive.
Maybe you've put a 0 in place of a O?

Either way... I see you've found your image in /images and your .css file looks much better now too.

You still have #nav defined twice though. Have a look at the links in my sig about validation.