Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 46
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image not showing once live on server

    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:


  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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:
    Code:
    body {border: 3px solid black;}
    To apply a border on just the sides:
    Code:
    body {border-left: 3px solid black; border-right: 3px solid black;}
    You may also want to consider using the
    Code:
    padding:Xpx;
    property to put some space between the border and content.
    Last edited by macwiz; 07-17-2008 at 03:20 AM.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    have you uploaded the images too?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Snap!!
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by ascensyon; 07-17-2008 at 03:52 AM.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    The image is not there:

    Image should be here

    You have a DIV with everything in it?
    Code:
    <div id="content">
    Try applying the border to that.

    In the CSS I gave you, change the body to div#content
    Last edited by macwiz; 07-17-2008 at 03:58 AM.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    Code:
    /images/image.gif
    instead of
    Code:
    ../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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by ascensyon View Post
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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/...

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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.

  • #12
    New Coder
    Join Date
    Jul 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #13
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    New Coder
    Join Date
    Jul 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by macwiz View Post
    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 . i used the following in my content div for my border atm.

    border: 1px solid black;


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •