The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background images help, I read the w3 schools, still need help
s_connors
post Apr 25 2007, 08:34 AM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 2-April 07
Member No.: 2,404



good morning folks, I copied the code right off your website and W3's to name this work and no images are showing up.

I'm going crazed blink.gif help?

CODE


<html>
<head>
<title>Studio 527</title>
<style type="text/css">
body
{
text-align:center;
background:white;
font-family:verdana;
color: #222222;
}





#box
{
width: 800px;
height:600px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-style:solid;
border-width:1px;
}




div.header
{
width:798px;
height:148
margin:0;
padding:1px;
clear:left;
background-image: url(/img/bgheader.jpg);
}




div.row2left
{
float:left;
width:598px;
height:298;
margin:0;
padding:1px;
background-image: url(/img/bodyleft.jpg);
background-repeat: no-repeat;
}





div.row2right
{
float:right;
width:198px;
height:298;
margin:0;
padding:1px;
background-image: url(/img/bodyright.jpg);
background-repeat: no-repeat;
}





div.footer
{
width:798px;
height:148
margin:0;
padding:1px;
clear:left;
background-image: url(/img/bgfooter.jpg);
background-repeat: no-repeat;
}





h1.sand
{
background-color: #ff8800;
width: auto;
text-align: center }





h1.smile
{
background-color: #0000ff;
width: auto;
text-align: center
}




/* start link config start link config start link config start link config */



a
{
border-bottom: 1px dotted #DE7600;
color: #DE7600;
margin-bottom: 0;
text-decoration: none;
}


a:hover
{
border-bottom-style: solid;
}


a:focus
{
background: #333333;
}


a:active
{
color: #ff8800;
}


a.imagelink
{
border-bottom: none;
text-decoration: none;
}

a.imagelink:hover
{
border-bottom: none;
}



/* end link config end link config end link config end link config */
</style>

</head>

<body>
<div id="box">





<div class="header">SUP?
<h1 class="sand">header</h1>

header </div>


<div class="row2left">
<h1 class="smile">fat body</h1>

fat body</div>


<div class="row2right">
<h1 class="sand">Right nav</h1>

Right nav bar</div>

<div class="footer">
<h1 class="smile">Footer</h1>

Footer </div>








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














User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 08:42 AM
Post #2


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



Just a quick possibility - I don't think there should be a / in front of the img - if the img folder is in the root folder where the style sheet is. If the style sheet is in a seperate styles folder, you may not have the tree right to reach where the image folder is...I've run into this before. If that isn't the image you are talking about...sorry smile.gif


QUOTE(s_connors @ Apr 25 2007, 09:34 AM) *

good morning folks, I copied the code right off your website and W3's to name this work and no images are showing up.

I'm going crazed blink.gif help?

CODE


<html>
<head>
<title>Studio 527</title>
<style type="text/css">
body
{
text-align:center;
background:white;
font-family:verdana;
color: #222222;
}





#box
{
width: 800px;
height:600px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-style:solid;
border-width:1px;
}




div.header
{
width:798px;
height:148
margin:0;
padding:1px;
clear:left;
background-image: url(/img/bgheader.jpg);
}




div.row2left
{
float:left;
width:598px;
height:298;
margin:0;
padding:1px;
background-image: url(/img/bodyleft.jpg);
background-repeat: no-repeat;
}





div.row2right
{
float:right;
width:198px;
height:298;
margin:0;
padding:1px;
background-image: url(/img/bodyright.jpg);
background-repeat: no-repeat;
}





div.footer
{
width:798px;
height:148
margin:0;
padding:1px;
clear:left;
background-image: url(/img/bgfooter.jpg);
background-repeat: no-repeat;
}





h1.sand
{
background-color: #ff8800;
width: auto;
text-align: center }





h1.smile
{
background-color: #0000ff;
width: auto;
text-align: center
}




/* start link config start link config start link config start link config */



a
{
border-bottom: 1px dotted #DE7600;
color: #DE7600;
margin-bottom: 0;
text-decoration: none;
}


a:hover
{
border-bottom-style: solid;
}


a:focus
{
background: #333333;
}


a:active
{
color: #ff8800;
}


a.imagelink
{
border-bottom: none;
text-decoration: none;
}

a.imagelink:hover
{
border-bottom: none;
}



/* end link config end link config end link config end link config */
</style>

</head>

<body>
<div id="box">





<div class="header">SUP?
<h1 class="sand">header</h1>

header </div>


<div class="row2left">
<h1 class="smile">fat body</h1>

fat body</div>


<div class="row2right">
<h1 class="sand">Right nav</h1>

Right nav bar</div>

<div class="footer">
<h1 class="smile">Footer</h1>

Footer </div>








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
















User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s_connors
post Apr 25 2007, 08:47 AM
Post #3


Newbie
*

Group: Members
Posts: 16
Joined: 2-April 07
Member No.: 2,404



this file is the index and all the images are in a folder called "img"
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 08:51 AM
Post #4


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



Well, if this file and the IMG folder are in the same directory, take off the leading / before the word img and see if that fixes it.

QUOTE(s_connors @ Apr 25 2007, 09:47 AM) *

this file is the index and all the images are in a folder called "img"

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s_connors
post Apr 25 2007, 08:55 AM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 2-April 07
Member No.: 2,404



aye, gave that a go, nothing
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 08:58 AM
Post #6


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



It's not a pretty fix, but in one of the url slots, type in the entire url to the image and see if that fixes it (http://etc.) If this works, you'll know that the problem is that the page isn't finding the images properly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s_connors
post Apr 25 2007, 09:03 AM
Post #7


Newbie
*

Group: Members
Posts: 16
Joined: 2-April 07
Member No.: 2,404



its not hosted, its for my learning
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 09:08 AM
Post #8


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



You can do the same with drive letters you do with http: - you can just tell it to go to C:\whateverdirectory\img
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
s_connors
post Apr 25 2007, 09:13 AM
Post #9


Newbie
*

Group: Members
Posts: 16
Joined: 2-April 07
Member No.: 2,404



ok that worked, but when I do host, this is not a smart solution... any other sugestions
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2007, 09:23 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,418
Joined: 9-August 06
Member No.: 6



Your first way of doing it is a good one. "/" means the document root and a document root relative URL works anywhere in the file structure. But on your local machine the slash probably refers to c:\ .
http://htmlhelp.com/faq/html/basics.html#relative-url

If 'img/...' (without the first slash) does't work, then the files don't have the relationship you said. The images are somewhere else.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 09:24 AM
Post #11


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



Since you aren't hosted, you need to change the / to a \ differfence of how the browser finds things.

When on the web server, it will be img/filename.gif
When on your hard drive without web technology: img\filename.gif

DNW
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 25 2007, 09:26 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,418
Joined: 9-August 06
Member No.: 6



No, that's not the case. Forwards slashes in relative URLs work just fine locally too.

BTW w3schools has nothing to do with the W3C. The latter tend to be correct a lot more often. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Shadeaux
post Apr 25 2007, 09:39 AM
Post #13


Member
***

Group: Members
Posts: 31
Joined: 24-April 07
Member No.: 2,621



Well, it worked when he used the direct file path, but not when he used the relative url...so in some way, he isn't getting the path to the image correct.

Shouldn't there be " " marks around the img/imagename.jpg line?

David

This post has been edited by Shadeaux: Apr 25 2007, 10:04 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 25 2007, 01:21 PM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



According to the CSS 2.1 spec, the quotes are optional. Some older browsers support one format but not the other, which can be useful for hiding "advanced" style sheets from them, but that isn't really applicable to background image URLs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 14th November 2019 - 04:24 PM