1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

HTML Help please text is hard against image...

Discussion in 'Web Development' started by sjh4200, Jun 9, 2009.

  1. sjh4200

    sjh4200 New Member

    Hello
    Just joined looks great.

    I downloaded the Media template and copied the code in the right hand
    "Media Coverage"

    column (for the image and text) into the column on the left

    "Visit Us"


    but when I did the text runs up hard against the image?

    this is the code I am talking about <h3>Sports </h3>
    <img src="images/pic_2.jpg" width="103" height="79" alt="Pic 2" class="left" />
    <p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
    <p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>

    I am pretty new to all this design but am using dreamweaver to edit the template.

    Am viewing in Firefox

    Help much appreciated.

    Stephen
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    You will need to brush-up on your coding http://www.w3schools.com/ The style sheet tells the browser how things are layed out, the html describes what.
    Take a look at the line
    now look at this one
    The hspace and vspace properties can be used with align to set the distance between the image and the surrounding text.
    hspace and vspace sets the white space around an image, in the above it is set to 4 pixels.
    align is used for alignment relative to the space the image is assigned
    try this code which changes align
    image 1 = align left
    image 2 = align middle
     

    Attached Files:

    • left.jpg
      left.jpg
      File size:
      14.8 KB
      Views:
      372
    • mid.jpg
      mid.jpg
      File size:
      15.1 KB
      Views:
      405
  3. sjh4200

    sjh4200 New Member

    Thanks

    Nice One Thanks

    Is it possible to add a link to this image.... images/header.jpg as I find a lot of people want to click on pictures. Normally images show the option to add a link in my Dreamweaver but I guess this is part of a bigger div holder so not sure where to go next?

    Thanka

    Stephen
     
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    yes you can add a link to a graphic. It can be done with dreamweaver or any other editor, it's all in your understanding of the html code not the css code.
    an example of code from my webpage
    the first part of the code this is the link, open it in it's own page
    the second part is my graphic the link is hooked to
    wrap the whole thing with the <a foobar code </a> and you got yourself a clickable graphic.
     
  5. sjh4200

    sjh4200 New Member

    thanks but now this is crewing?

    Thanks again, but now the first question I had is screwing?

    I wanted to put a series (about 10) of short intros with images in the "visit" div (MEDIA) and copied from the "right" div and edited as you suggested and had success with 1 only <p /p> but when I add more underneath some of them align on the right had side og the "vist" div?

    I tried hard breaks but still ?

    here is the code I am working on...

    <div id="visit">
    <h2>ABC Best Treatments...</h2>
    <p>Here are the latest researched ABC Treatmets including special offers and discounts codes.</p>


    <img src="images/pic_2.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
    <p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
    </span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
    <p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p>
    <p class="more">
    </p>
    <img src="images/pic_3.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
    <p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
    </span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
    <p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p>
    THIS IS THE ONE THAT IS ALIGNING RIGHT

    <img src="images/pic_4.jpg" border="0" width="60" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
    <p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
    </span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
    <p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p>
    </div>


    Thanks


    Stephen
     
  6. sjh4200

    sjh4200 New Member

    image link understood but where is image?

    Understand the image link info you gave me but am searching for the image in the html code?

    I know that the image is called images/header.jpg beacase I have changed the image to another but where is the html code that I can put the ahref before?

    Thanks

    P.S. That was a really great header image you supplied!
    When I click on the image I get this part of the code
     
  7. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    I can not duplicate your problem, here is the code, I just copied it in.
    Code:
    [COLOR=red]<!-- start code -->[/COLOR]
    [SIZE=1][B]<div[/B] id=[B]"visit">[/B] [/SIZE]
    [SIZE=1][B]<h2>[/B]ABC Best Treatments...[B]</h2>[/B][/SIZE]
    [SIZE=1][B]<p>[/B]Here are the latest researched ABC Treatmets including special offers and discounts codes.[B]</p>[/B][/SIZE]
     
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_2.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
    [SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
    [SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
    [SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
    [SIZE=1][B]<p[/B] class=[B]"more">[/B][/SIZE]
    [SIZE=1][B]</p>[/B][/SIZE]
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
    [SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
    [SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
    [SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B][SIZE=1] THIS IS THE ONE THAT IS ALIGNING RIGHT[/SIZE]
     
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"60"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
    [SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
    [SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
    [SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
     
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_2.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
    [SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
    [SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
    [SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
    [SIZE=1][B]<p[/B] class=[B]"more">[/B][/SIZE]
    [SIZE=1][B]</p>[/B][/SIZE]
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
    [SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
    [SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
    [SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
     
    [SIZE=1][B]</div>[/B][/SIZE]
    [COLOR=red]<!-- end code -->[/COLOR]
    [SIZE=1][B]<div[/B] id=[B]"subs">[/B][/SIZE]
    [SIZE=1][B]<div[/B] id=[B]"subs-left">[/B][/SIZE]
    
     

    Attached Files:

  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Answer to "where is the code" -
    Think about what you just said. You can not find the image in the html code, that means you are looking in the index.html file. You found the header image in the images directory and changed it. That's 2 out of 3 ??? When you downloaded the template and un-zipped it you found those two items plus the style.css file (the one you have not looked in) we do not count the psd file if there is one, that's another story.

    When viewed in the browser you can see the header.jpg ( the girl on the top left), the menu and other things on top, so we know when viewing the code in the index.html file it should be one of the first things we see.
    Code:
    [B][SIZE=1]<body>  <![COLOR=red]-- start of code -->[/COLOR][/SIZE][/B]
     
    [SIZE=1][B]<div[/B] id=[B]"[COLOR=darkgreen]wrapper[/COLOR]">[/B][/SIZE]
    [SIZE=1][B]<h1>[/B]...The [B]<strong>[/B]Worldwide[B]</strong>[/B] Media...[B]</h1>[/B][/SIZE]
    [SIZE=1][B]<div[/B] id=[B]"[COLOR=darkgreen]top-nav[/COLOR]">[/B][/SIZE]
    [SIZE=1][B]<ul>[/B][/SIZE]
    [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]faq[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B][SIZE=1] | [B]</li>[/B][/SIZE]
    [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]site maps[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li>[/SIZE][/B]
    [SIZE=1][B]</ul>[/B] [/SIZE]
    
    But all that is there is 2 division and 2 links, so this gives us an idea where to look in the style.css file. All the wrapper gives is what it names states (wrap around everything with) so it's not here.
    Code:
    #wrapper {
     text-align: left;
     margin: auto;
     width: 728px;
      position: relative;
    }
    The next division "top-nav" shows what we are looking for.
    Code:
    #top-nav {
      position: absolute;
      top: 15px;
      left: 414px;
      width: 266px;
      height: 269px;
     background: #6D7481 bottom left url([COLOR=green]images/header.jpg[/COLOR]) no-repeat;
    }
    Since we can not put the html code in the style sheet to make a link, what if we comment the graphic out of the style sheet and call the graphic from the index.html instead. Let's put our line of code right after the "top-nav" division.
    Code:
    [SIZE=1][B]<div[/B] id=[B]"wrapper">[/B][/SIZE]
    [SIZE=1][B]<h1>[/B]...The [B]<strong>[/B]Worldwide[B]</strong>[/B] Media...[B]</h1>[/B][/SIZE]
    [SIZE=1][B]<div[/B] id=[B]"[COLOR=green]top-nav[/COLOR]"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.wilmargraphite.net/[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"[/SIZE][/B][SIZE=1] title=[B]"corp web"[/B] target=[B]"_blank"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/header.jpg"[/B] border=[B]"0"[/B] width=[B]"266"[/B] height=[B]"269"[/B] alt=[B]""[/B] align=[B]"baseline"></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B]
    [SIZE=1][B]<ul>[/B][/SIZE]
    
    That didn't work, picture is to tall and we moved our 2 links down below the graphic.
    Un-comment the the graphic in the style sheet and let's try putting our line of code after the links in the index.html file.
    Code:
    [B][SIZE=1]<ul> [COLOR=red]<-- start of links code -->[/COLOR][/SIZE][/B]
    [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]faq[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B][SIZE=1] | [B]</li>[/B][/SIZE]
    [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]site maps[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li>[/SIZE][/B]
    [SIZE=1][B]</ul>[/B] [COLOR=red]<!-- end of links -->[/COLOR][/SIZE]
    [SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.wilmargraphite.net/[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"[/SIZE][/B][SIZE=1] title=[B]"corp web"[/B] target=[B]"_blank"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/header.jpg"[/B] border=[B]"0"[/B] width=[B]"266"[/B] height=[B]"237"[/B] alt=[B]""[/B] align=[B]"baseline"></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B]
    [SIZE=1][B]</div>[/B][/SIZE]
    
    That worked but for some reason the graphic is to long and drops below the navigation, so we will have to adjust the height in the code we put in the index.html file. A height of 237 pixels looks right.

    Now we could have made a spacer graphic (something that just takes up space) to replace the one in the css file which would be of the same size but matching the background color or even other coding methods, but this did what we wanted it to.

    Remember in a css file objects follow a flow, they take up space, if you remove one, then the one below moves in to take it's place ( at least in the way this template is coded).

    Also put into your mind a template is like a floorplan of a house (fixed), if you walk inside you would see all walls, now put a graphic in a floorplan and that is like putting in a window which you can look out of. You can put grapics in both the css and html files.

    Now that you are understanding it - please try to help someone else on the forum and be sure to list your website in the Wesite Review section.
    If you do others will give you great feed back.
    I think that about covers it.
    David
     

    Attached Files:

  9. sjh4200

    sjh4200 New Member

    Thanks

    Thanks

    Will do

    S