www.webdeveloper.com
Results 1 to 8 of 8

Thread: Display the full image not the alt

  1. #1
    Join Date
    Sep 2010
    Posts
    65

    Display the full image not the alt

    I can not get the image to display.
    HTML Code:
    <div id="heading">
        <style>
             #movingbox {position:fixed; top:30%; right:40%; height:40%; width:20%; overflow:scroll; z-index: 50; background-color:lime;}
         </style>
    </div>
     <div id="movingbox">
         <a href="http://mysite.com/htmlphp/movingboxes/Arundel.htm">
         <img src="../htmlphp/movingboxes/images/Arundel_Castle.jpg" width="100px" height="100px" alt="Arundel Castle" />
         </a>
         //I have other pictures that also do not show
     </div>
    The jpg picture resides in "/htmlphp/movingboxes/images" of the server. I tried putting just Arundel_Castle.jpg with no path and moving the jpg file to the htm folder instead of in the image folder but that did not work either.
    Last edited by Philosophaie; 06-04-2014 at 05:54 PM.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,405
    To start off with, <style> ... </style> (if used) MUST be placed between <head> and </head> not between <body> and </body>.

    Next, "../" is unnecessary, ditch it. Then say if you still have a problem...

    Note: If there is more than one DIV "movingbox" in a page then it must be declared and used as a CLASS, not an ID. I.e. In the CSS, instead of #movingbox put .movingbox.
    in the HTML, instead of id="movingbox" put class="movingbox"
    Last edited by jedaisoul; 06-05-2014 at 09:04 AM.

  3. #3
    Join Date
    Jun 2014
    Posts
    27
    Quote Originally Posted by jedaisoul View Post
    To start off with, <style> ... </style> (if used) MUST be placed between <head> and </head> not between <body> and </body>.

    Next, "../" is unnecessary, ditch it. Then say if you still have a problem...

    Note: If there is more than one DIV "movingbox" in a page then it must be declared and used as a CLASS, not an ID. I.e. In the CSS, instead of #movingbox put .movingbox.
    in the HTML, instead of id="movingbox" put class="movingbox"
    Did it necessary to put style in head, i don't think so. You can place anywhere like the scripts?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,405
    Quote Originally Posted by shophiarajan47 View Post
    Did it necessary to put style in head, i don't think so. You can place anywhere like the scripts?
    Inline style can be included in the body, but the syntax, and the scope, is different:

    Embedded style sheet (in head):

    <head>
    <style> ... </style> is global to the web page.
    </head>

    Inline style (in body):

    <body>
    <div style="... "> is specific to that DIV.
    </body>

    Note: Embedding style sheets in the body is an HTML5 proposal which as far as I am aware, is not supported by most browsers. It also seems to me to be quite unnecessary, and I hope will get quietly dropped.
    Last edited by jedaisoul; 06-05-2014 at 05:18 PM.

  5. #5
    Join Date
    May 2014
    Posts
    834
    Quote Originally Posted by jedaisoul View Post
    Note: Embedding style sheets in the body is an HTML5 proposal which as far as I am aware, is not supported by most browsers. It also seems to me to be quite unnecessary, and I hope will get quietly dropped.
    While I take it further, and do not think there's a legitimate reason for STYLE to exist as a tag, and as a rule of thumb services little legitimate reason to exist as an attribute either as there are only one or two cases (like using width to convey data, like in a graph) where it serves a purpose other than developer ineptitude and/or ignorance.

    As a tag, it's just rubbish that has no business being used in the first place. As an attribute on a element, it's sloppy coding in all but the rarest of cases. Generally speaking working with what something looks like in the markup is completely missing the reason we even HAVE CSS in the first place, or the entire reason HTML even came into being.

    But yeah, lose the ../, that's called up-tree linking and in most cases is indicative of having a flawed directory structure. Your directories should be planned out so that all links go "down-tree" -- aka into subdirectories from the caller, instead of 'up tree' into parent directories. It's just easier to keep track of that way and much more portable across hosting and directory locations.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,704
    Quote Originally Posted by deathshadow View Post
    While I take it further, and do not think there's a legitimate reason for STYLE to exist as a tag, and as a rule of thumb services little legitimate reason to exist as an attribute either as there are only one or two cases (like using width to convey data, like in a graph) where it serves a purpose other than developer ineptitude and/or ignorance.

    As a tag, it's just rubbish that has no business being used in the first place. As an attribute on a element, it's sloppy coding in all but the rarest of cases. Generally speaking working with what something looks like in the markup is completely missing the reason we even HAVE CSS in the first place, or the entire reason HTML even came into being.

    But yeah, lose the ../, that's called up-tree linking and in most cases is indicative of having a flawed directory structure. Your directories should be planned out so that all links go "down-tree" -- aka into subdirectories from the caller, instead of 'up tree' into parent directories. It's just easier to keep track of that way and much more portable across hosting and directory locations.
    As an attribute, I have used it on one occasion--I was demonstrating named colours, and in the entire collection of webpages, only those elements had that styling. Then I used such backgrounds elsewhere and moved everything to a stylesheet.

    As for internal stylesheets--I've found them handy when I've got an external main stylesheet, but need a few tweaks on that one page.

  7. #7
    Join Date
    May 2014
    Posts
    30
    you just trying this code

    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div id="heading">
    <style>
    #movingbox {position:fixed; top:30%; right:40%; height:40%; width:20%; overflow:scroll; z-index: 50; background-color:lime;}
    </style>
    </div>
    <div id="movingbox">
    <a href="http://mysite.com/htmlphp/movingboxes/Arundel.htm">
    <img src="images/3_SEM_960_400.png" width="100px" height="100px" alt="Arundel Castle" />
    </a>
    //I have other pictures that also do not show
    </div>
    </body>
    </html>



    you dont use the full path of image.
    just take a path where from your index file can stored.

    And also this code is working good.

  8. #8
    Join Date
    Jun 2014
    Posts
    9
    The display of image is not good.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles