www.webdeveloper.com
Results 1 to 5 of 5

Thread: specifying border style (onset)

  1. #1
    Join Date
    Jun 2009
    Posts
    15

    Question specifying border style (onset)

    First of all I am new to this, that said I inserted a picture and I want to apply a border the style is onset here is the code for my picture:

    <a href"http://www.chiff.com/science/tsunami-pictures.htm"><img src="C:\Documents and Settings\Administrator\Desktop\my web page\TIDAL WAVE PICS\tsunami_wave_coming_time_to_run.jpg"width="35&#37;"style="float:right"alt="Tsunami Pictures"></a>

    I know it's a bit big but I'm sure there is a way to make it smaller. If you don't mind can you also tell me how I can make the code smaller?
    Last edited by guimaraes; 10-05-2009 at 05:44 PM.

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    You code is pointing to an image on your "C:" drive. You need to upload the image to a web server and change the "src" of the img tag if you want it to work anywhere other than your personal PC.

    There is also some syntax errors in what you posted. You:
    • Left off the "=" sign from your "a", anchor tag.
    • Did not leave a space between the ending quote marks and the "width", "style", and "alt" attributes of the img tag.


    One way to shorten you code is if your HTML page is stored in the same folder or close to your image then you do not need to use the full path name to the image, just the path relative to where the web page is.

    If your web page is stored here: C:\Documents and Settings\Administrator\Desktop\my web page\

    Then all you need to say in the img tag is: src="TIDAL WAVE PICS\tsunami_wave_coming_time_to_run.jpg"

    (except on a web server the the back slash will be a forward slash)

    So - I'll assume that you uploaded the HTML file to a folder on web server located with this name: http://www.testtesttest.com/guimaraes/ and your image to a web folder with a name like this: http://www.testtesttest.com/guimaraes/TIDAL WAVE PICS/

    Code:
    <a href="http://www.chiff.com/science/tsunami-pictures.htm">
       <img src="TIDAL WAVE PICS/tsunami_wave_coming_time_to_run.jpg" style="float:right; border:1px outset black;width:35%" alt="Tsunami Pictures">
    </a>
    If you want to make it shorter you can move the "style" out from the img tag and define it as a class in a style tag. Place this between the HEAD tags of your page
    Code:
    <style type="text/css">
    	.imgStyle {
    		border:1px outset black;
    		float:right;
    		width:35%;
    	}
    </style>
    Then change the code to use the class you defined
    Code:
    <a href="http://www.chiff.com/science/tsunami-pictures.htm">
       <img src="TIDAL WAVE PICS/tsunami_wave_coming_time_to_run.jpg" class="imgStyle" alt="Tsunami Pictures">
    </a>
    P.S. For convience and to prevent typo's you may also want to use shorter file names for you images in the future.

  3. #3
    Join Date
    Jun 2009
    Posts
    15

    Thumbs up Thanks

    Thanks for the tip it worked. By any chance do you know how to place a box around text?

  4. #4
    Join Date
    Oct 2009
    Posts
    21
    @slaughter : you're awesome, i thought there're less mod, people like you . thanks ^^
    @guimaraes: where's your text

  5. #5
    Join Date
    Jun 2009
    Posts
    15

    text

    Sorry, here is the text

    While the 2004 Indian Ocean tsunami is strong in most recent memory, Japan is always at the forefront in discussions about the history of tsunamis, having been recorded there as early as 684 A.D.

    I want one of those grey boxes like you see on some web sites at the side of the page with text in it.

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