...

View Full Version : Image not showing once live on server



ascensyon
07-17-2008, 03:10 AM
Hi there. I have a website that when i view the html files from my pc locally stored the borders show but once I upload the whole site to the server the side borders do not show.


here is the website www.lorignalpacking.ca and here is the coding from the CSS file:

#leftBorder {
position: relative;
top: 0px;
float: left;
width: 16px;
height: 1000px;
background: url(../image/leftBorder.gif) top left no-repeat;
display: block;
}
#rightBorder {
position: relative;
top: 0px;
float: right;
width: 16px;
height: 1000px;
background: url(../image/rightBorder.gif) top right no-repeat;
display: block;


and here is an image of what it looks like before i upload the site:

http://img139.imageshack.us/img139/3050/stuffij2.png

macwiz
07-17-2008, 03:12 AM
Did you upload everything? Make sure that the images are up too, not just the HTML pages.

Second, use CSS to assign the body a border, not an image:

This will give you an border around the entire page:


body {border: 3px solid black;}


To apply a border on just the sides:


body {border-left: 3px solid black; border-right: 3px solid black;}


You may also want to consider using the
padding:Xpx; property to put some space between the border and content.

bazz
07-17-2008, 03:12 AM
have you uploaded the images too?

bazz

bazz
07-17-2008, 03:12 AM
Snap!!

ascensyon
07-17-2008, 03:48 AM
yes the images have been uploaded, the whole site was uploaded to that server exactly the way it was on my flash drive, yet when i view the site from my flash drive the borders show, just like in my screeenshot.


and your idea sounds interesting.

edit: thank you for your response, how do i go about 'wrapping the border closer, since it seems to border around the window and not the site.

macwiz
07-17-2008, 03:54 AM
The image is not there:

Image should be here (http://www.lorignalpacking.ca/image/rightBorder.gif)

You have a DIV with everything in it?
<div id="content">

Try applying the border to that.

In the CSS I gave you, change the body to div#content

bazz
07-17-2008, 03:56 AM
just took a quick look at your css and looked also, to see if their url pointed to where you put the images. It seems that neither of them does. check you have uploaded them to the correct place, ie where the css thinks they are. You might also like to use the url


/images/image.gif


instead of


../images/image.gif

/ means the url is relative to your root directory and so it can be easier with a larger site (and a while after you first coded it), to find everything if you need to.

hth

bazz

bazz
07-17-2008, 03:58 AM
edit: thank you for your response, how do i go about 'wrapping the border closer, since it seems to border around the window and not the site.

assign the boder to the content div. then make its width narrower than the full screen width.

bazz

macwiz
07-17-2008, 04:01 AM
Wow, we post the same thing at the same time.

His CSS is correct.

The CSS file is in /style/style.css

The images are in /images/...

Thus, ../images/...

bazz
07-17-2008, 04:05 AM
Can't he/she do it either way? I do it as I suggested for relating scripts ot others so that I can see straightaway where to look for each. a bit rusty with css url's but thought it worked similarly.

bazz

macwiz
07-17-2008, 04:07 AM
No. The /images/... will not work unless you do www.lorignalpacking.ca/images/...

It can be site relative (root) or document relative.

Site relative requires the entire URL.

ascensyon
07-17-2008, 04:10 AM
you are both amazing! lol , you must be thinking wow he is a noob for sure now for saying this.

but this has greatly helped me and you have both answered my questions, i have since removed the images, and i understand now that in the future i'll need to put the full url if i do go that way. but the css border options works well if only i could round the corners now lol.

thanks again

macwiz
07-17-2008, 04:19 AM
You actually can round the border, in a way.

OK, do this:

If you need me to, I will produce it for you (the corners):

Create 2 divs, one with a white BG, and one with a Black BG.

make the white one the same size as the content div. Use a Z-Index to place the white div under the content div.

Using the Curvey Corners extension with Dreamweaver, make the black div hav rounded corders. Place this div with a Z-Index below the white one. Give it a size of 10px greater than that of the white div. Thus, you end up with a black div showing just the border, a white div keeping your white page background, and the content.

Take a look at what it does (you can make the border go all the way around, I did this page to give a shadow effect and you can make only one div rounded)

http://web.mac.com/macwiz1220/My_Site/html/home.html

bazz
07-17-2008, 04:29 AM
just to clarify about the relative image path etc...

I have just checked my css for one of my sites. CSS file located at /CSS and images in /images.

The path used to call my background image is... background:#333 url(/images/bg.gif);

so it seems that the /images/image.gif does work.

bazz

ascensyon
07-17-2008, 04:37 AM
You actually can round the border, in a way.

OK, do this:

If you need me to, I will produce it for you (the corners):

Create 2 divs, one with a white BG, and one with a Black BG.

make the white one the same size as the content div. Use a Z-Index to place the white div under the content div.

Using the Curvey Corners extension with Dreamweaver, make the black div hav rounded corders. Place this div with a Z-Index below the white one. Give it a size of 10px greater than that of the white div. Thus, you end up with a black div showing just the border, a white div keeping your white page background, and the content.

Take a look at what it does (you can make the border go all the way around, I did this page to give a shadow effect and you can make only one div rounded)

http://web.mac.com/macwiz1220/My_Site/html/home.html


ok please bear with me hehe. i am new to this :D. i used the following in my content div for my border atm.

border: 1px solid black;

bazz
07-17-2008, 04:45 AM
Thats ok, we'll see what it looks like when you uplaod it.

Are you designing for Firefox, and later going to tweak for IE. just that some of your images are a bit off place and we might need to adjust slightly, later.

orf to sleep now coz its 445am.

bazzzzzzzzzzzzzzzzzz

effpeetee
07-17-2008, 09:24 AM
You may find this site useful.

Here, especially no. 8 (http://exitfegs.co.uk/RndCorn.html)

Frank

WyrmFyre
07-17-2008, 09:34 AM
If you want left and right borders use




border-left: 1px solid #000;
border-right: 1px solid #000;



There is a short hand version, something like border: 0 1px 0 1px solid #000; im not sure if thats quite right

macwiz
07-17-2008, 02:53 PM
ok please bear with me hehe. i am new to this :D. i used the following in my content div for my border atm.


border: 1px solid black;

That is up to you. Make whatever settings you want.

macwiz
07-17-2008, 03:53 PM
ok please bear with me hehe. i am new to this :D. i used the following in my content div for my border atm.

border: 1px solid black;

I believe you want this (I edited the style.css and the index.html page, if you like this, post back and I will give you instructions on how to apply it to all of your pages. You need ALL the files in the ZIP for it to work.)

(I cannot fit in on this page as an attachment, download it here)
RoundedBorder (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip)

ramm19
07-17-2008, 05:01 PM
Site relative requires the entire URL.

are you talking about calling to external sites? in that case you need to use absolute urls, but for in-site links you can always use relative URLs.

macwiz
07-17-2008, 05:07 PM
are you talking about calling to external sites? in that case you need to use absolute urls, but for in-site links you can always use relative URLs.

No, what I'm saying is that if you have:

/images/apple.jpg
and
/html/mac.html

and you want to link to apple.jpg from mac.html, you need

<img src="../images/apple.jpg" />

ramm19
07-17-2008, 05:11 PM
ahh, yep you are right.

ascensyon
07-17-2008, 11:56 PM
Thank you all for your feedback everyone.

I have updloaded the site now. I build it for IE but it would be a bonus if it was good for FF as well.

I did away with the side borders and as you'll see i just did a border all around and padded the content div.

http://www.lorignalpacking.ca/

If it looks odd or if there is anything I can improve, please tell me and why so I can learn :D


You've all been great so far.

EDIT: I also liked the idea of a 3d shadow with rounded corners but i dont know how much work would have to go back into the site and make it look good or even where to begin.


Also the site has been online for quite a while (had a cheapo version with a table on there before) and it still doesn't show up in search engines even when i type out the actual name of the site. anyways.. you dont have to answer this one though, just curious.

macwiz
07-17-2008, 11:58 PM
For Google: Submit URL (http://www.google.com/addurl/)

For the border, did you take a look at what I gave you?
Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip)

There is a funny white box at the top of your page.

ascensyon
07-18-2008, 12:43 AM
For Google: Submit URL (http://www.google.com/addurl/)

For the border, did you take a look at what I gave you?
Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip)

There is a funny white box at the top of your page.

can you post a pic of it. as i do not see this funny box :D thanks.

edit: i looked at it but i'm at work i just see 2 black borders, left and right.

macwiz
07-18-2008, 12:53 AM
Sorry, that was my fault. Try again, I mixed up two site definitions and crossed teh URLs for the scripts.
Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip)

Do you like it now?

White box on page:
http://idisk.me.com/macwiz1220-Public/CodingForums/lp_ltd.png

ascensyon
07-18-2008, 01:06 AM
Sorry, that was my fault. Try again, I mixed up two site definitions and crossed teh URLs for the scripts.
Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip)

Do you like it now?

White box on page:
http://idisk.me.com/macwiz1220-Public/CodingForums/lp_ltd.png

weird in IE it looks fine. so how do i adapt it to FF or other browsers.

I checked out the zip file and i like it, how do i adapt this to what i have , or should i wait till i can view this page in both IE and FF before moving forward?

here is what it looks like on my end:

http://img139.imageshack.us/img139/2760/stuffzb2.png

macwiz
07-18-2008, 01:27 AM
First, make sure the page is valid XHTML 1.0 Strict.

Second, work out the kinks in Firefox and Safari, and THEN get it to work in IE. IE is not W3C Compliant, and is known to have issues.


Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip) Comments?

bazz
07-18-2008, 01:48 AM
No, what I'm saying is that if you have:

/images/apple.jpg
and
/html/mac.html

and you want to link to apple.jpg from mac.html, you need

<img src="../images/apple.jpg" />

you can also use, <img src="/images/apple.jpg' /> at elast thats how my site currently works.
As I undertsand it....
'../images/apple.jpg' makes the link relative to the location of your script/page, however, '/images/apple.jpg' makes it relative to the root dir.
both are better for portability than is an absolute url.
bazz

ascensyon
07-18-2008, 01:49 AM
First, make sure the page is valid XHTML 1.0 Strict.

Second, work out the kinks in Firefox and Safari, and THEN get it to work in IE. IE is not W3C Compliant, and is known to have issues.


Rounded Border (http://idisk.me.com/macwiz1220-Public/lp_ltd.zip) Comments?

yes i like what you did. just gotta learn how to do it on my site now.

Also for making sure my site is valid XHTML 1.0 Strict. Is there a site that can guide me throught this? i've tried reading up on this and I am overwhelmed with info, can't make heads or tails of it.

bazz
07-18-2008, 01:51 AM
just go through each error in the validator and whne you are stuck, ask here for help. You will quickly become familiar with what it all means.

bazz

macwiz
07-18-2008, 01:53 AM
His page has CharSet errors.

He has some funny symbols on the page.

All the french accents MUST be turned into character entities to be validated.

ascensyon
07-18-2008, 02:02 AM
His page has CharSet errors.

He has some funny symbols on the page.

All the french accents MUST be turned into character entities to be validated.

But if I put in the real character it looks funny when rendered in my browser afterwards. is there something i should change in my head?

macwiz
07-18-2008, 02:05 AM
Alright, first, do this:
1. Replace your style.css with the one I modified.
2. Move the round_div.css and rounded_div.js files I gave you to your styles directory.
3. Copy the vwd_scripts folder to the same directory as your index.html

For each file (assuming they are all in the same directory relative to the style and vwd_scripts folders:

Add this to the head:


<link rel="stylesheet" type="text/css" href="style/round_div.css" />
<script src="style/rounded_div.js"></script>
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="blackbg,10,10,10,10,0,0";
//-->
</script>

2. After <body> add

<div class="equal2" id="blackbg">
<div class="equal equal2" id="whitebg">

3. Replace your content DIV tag with this:

<div id="content" class="equal equal2">
4. Below your last paragraph, remove
<br><br>
5. Under the footer, add
</div></div>

I am 90&#37; sure this is everything I did. Backup your site, than try this. Tell me when you are done, works on not. I will help you fix it if you need it.

Note this will only work if all your pages follow your index.html layout, as in with a content DIV and all. I will help you adapt if you need. The changes should be minimal.

FOR THE CHARACTERS:

Use character entities, as I said.

Replace those accented letters with:
&LETTERacute;
an accented e would be
&eacute; all lowercase

ascensyon
07-18-2008, 03:44 AM
Alright, first, do this:
1. Replace your style.css with the one I modified.
2. Move the round_div.css and rounded_div.js files I gave you to your styles directory.
3. Copy the vwd_scripts folder to the same directory as your index.html

For each file (assuming they are all in the same directory relative to the style and vwd_scripts folders:

Add this to the head:


<link rel="stylesheet" type="text/css" href="style/round_div.css" />
<script src="style/rounded_div.js"></script>
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="blackbg,10,10,10,10,0,0";
//-->
</script>

2. After <body> add

<div class="equal2" id="blackbg">
<div class="equal equal2" id="whitebg">

3. Replace your content DIV tag with this:

<div id="content" class="equal equal2">
4. Below your last paragraph, remove
<br><br>
5. Under the footer, add
</div></div>

I am 90% sure this is everything I did. Backup your site, than try this. Tell me when you are done, works on not. I will help you fix it if you need it.

Note this will only work if all your pages follow your index.html layout, as in with a content DIV and all. I will help you adapt if you need. The changes should be minimal.

FOR THE CHARACTERS:

Use character entities, as I said.

Replace those accented letters with:
&LETTERacute;
an accented e would be
&eacute; all lowercase

I will start working on the modifications right now, the html files are identical aside from change of content.

For the characters, I am using those codes already.

macwiz
07-18-2008, 03:48 AM
I will start working on the modifications right now, the html files are identical aside from change of content.

For the characters, I am using those codes already.

Fix this first (check all pages):

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lorignalpacking.ca%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

ascensyon
07-18-2008, 04:32 AM
Hi Macwiz,

Thanks for all your help so far.

I've implimented your rounded corners , works great, even changed the colors too and so on.

would it be possible if i had a

<!--
gCurvyCorners[0]="whitebg,10,10,10,10,0,0";
//-->

to create a rounded corners for the white backround as well? I assume the values here should change but i am unsure to what degree.

I am using http://www3.sympatico.ca/claudette.duval/aboutus.html as my testing page for the backround atm. (again it looks normal in IE , i don't know which browser you use, i guess its safari)



i will try out that link toe validate the live site also.

macwiz
07-18-2008, 04:38 AM
Yes, but change it to this:


<!--
gCurvyCorners[1]="whitebg,10,10,10,10,0,0";
//-->


Remember to change the padding on the CSS sheet I gave you for blackbg

Can you do me a favor and give me the JavaScript you use for that slideshow. There were like 5 of them on the page, I didn't know which one was what. Thanks. I appreciate it.

ascensyon
07-18-2008, 09:36 PM
Yes, but change it to this:


<!--
gCurvyCorners[1]="whitebg,10,10,10,10,0,0";
//-->


Remember to change the padding on the CSS sheet I gave you for blackbg

Can you do me a favor and give me the JavaScript you use for that slideshow. There were like 5 of them on the page, I didn't know which one was what. Thanks. I appreciate it.

I will post the information shortly. I am at work now. So i will be back.

thanks.

Apostropartheid
07-18-2008, 09:54 PM
His page has CharSet errors.

He has some funny symbols on the page.

All the french accents MUST be turned into character entities to be validated.
No, they don't. The character literal he's inserted is just in a different encoding. If he put it in the encoding declared by his HTTP header, then it would be valid and HTML entities wouldn't have to be used.

macwiz
07-18-2008, 10:18 PM
No, they don't. The character literal he's inserted is just in a different encoding. If he put it in the encoding declared by his HTTP header, then it would be valid and HTML entities wouldn't have to be used.

Regardless, the characters are still not valid as far as encoding. That is part of W3C Validation, staying within a charset.

Apostropartheid
07-18-2008, 10:35 PM
Regardless, the characters are still not valid as far as encoding. That is part of W3C Validation, staying within a charset.
...Isn't that what I just said?

macwiz
07-18-2008, 10:41 PM
...Isn't that what I just said?

O. Sorry. I didn't realize what you meant...

ascensyon
07-24-2008, 08:13 AM
hi again,

im sorry i didn't get a chance to come back the other night and post that slideshow coding.

and for the charsets. can i just get rid of the UTF-8? and use ascii?


anyways this isn't really my issue at this time.

this is for macwiz:

i embedded your rounded corners code (great idea and i appreciate your help, good work). but for some reason. when i was at work it looked good the height adjusted fine (IE) , i get home, i have IE as well. but the height adjusts but then resets and leaves a whole bunch of content from my "main" div overflowing the bottom part.

check it out , let me know what i did wrong:

here is the whole site lol :thesite.zip (http://www.lorignalpacking.ca/thesite.zip)

here is a sample of what i see:

http://img71.imageshack.us/img71/7943/omgdh6.jpg

ascensyon
07-24-2008, 05:26 PM
a shameless bump



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum