When making a web page with HTML, what is the basic codes for...

Question

I can't figure out how to place a link (picture link) next to a regular picture.

The top of the page is a picture, then below is the link. I am trying to make the link right next to the picture. When I type <div align="left"> it doesn't work. How can I get both to be on the same line. I noticed pictures in a row...like 3..they're on the same line, , but when your trying to make 2 different kind of items on the same line it doesn't work the same.

Answer 1

http://www.w3schools.com/HTML/

http://www.2createawebsite.com/build/htm...

http://www.plus2net.com/html_tutorial/si...

http://www.html.net/tutorials/html/

Answer 2

Here&#039;s an example of how to get, for example, three pictures next to each other with some margins on either side of them...

The HTML

---------------

&lt;div id=&quot;content&quot;&gt;

  &lt;div class=&quot;pic&quot;&gt;

    &lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;myIMG.jpg&quot; /&gt; &lt;/a&gt;

  &lt;/div&gt;

  &lt;div class=&quot;pic&quot;&gt;

    &lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;myIMG.jpg&quot; /&gt; &lt;/a&gt;

  &lt;/div&gt;

  &lt;div class=&quot;pic&quot;&gt;

    &lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;myIMG.jpg&quot; /&gt; &lt;/a&gt;

  &lt;/div&gt;

&lt;/div&gt;

The CSS

----------------

#content {

border: 1px solid red;

width: 430px;

padding: 10px;

}

.pic {

border: 1px solid red;

width: 125px;

display: inline;

text-align:center;

margin: 0px 5px 0px 5px;

padding: 3px;

}

.pic img a {

border: none;

}

This will give you a box, with 3 boxes inside. The 3 boxes inside are displayed in a line next to each other and have hyperlinked images in them. You can place whatever you like in these boxes, or style them however you choose.

Note that I placed a red border around each element to show you how each element is layed out. Feel free, like I said, to style however you wish.

=)

Edit:

-------------

I changed the div id of &quot;pic&quot; to div class &quot;pic&quot;. You can only reference an ID once in valid HTML....therefore, it is better to use class instead.

Answer 3

&lt;table border=&quot;0&quot;&gt;

&lt;tr valign=&quot;bottom&quot;&gt;

&lt;td&gt;&lt;img src=&quot;IMG_FILE&quot;&gt;&lt;/td&gt;

&lt;td&gt;&lt;a href=&quot;URL&quot;&gt;name of link&lt;/a&gt;&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

This will place the link next to the image, both aligned at the bottom of the table, ie. the link will be in line with the bottom edge of the image.

If you want the image and the link to be aligned on top (ie. link aligned with top edge of the image), change valign=&quot;bottom&quot; to valign=&quot;top&quot;

Answer 4

Never, ever, ever, EVER use tables for laying out a web page.  Only the lazy do that.  Use table tags only to present tabular data.  DIVs and CSS will do a much better presentation for your page(s).

&lt;div style=&quot;width: 388px; height: 262px; margin: 0 auto;&quot;&gt;

&lt;img src=&quot;image1.gif&quot; style=&quot;width: 128px; height: 131px;&quot; alt=&quot;&quot; /&gt;&lt;a href=&quot;URL path&quot; title=&quot;Mouseover Description&quot;&gt;&lt;img src=&quot;image2.gif&quot; style=&quot;width: 128px; height: 131px;&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;img src=&quot;image3.gif&quot; style=&quot;width: 128px; height: 131px;&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;

Style and change as you need.  Just be sure to set DIV width to include all images and any borders (left and right) you use.

Checked in browsers and works.

Ron

Answer 5

You can do this: &lt;a href=&quot;websiteurl&quot;&gt;&lt;img src=&quot;imageurl&quot;&gt;&lt;/a&gt; to make the image into a link, or do this: &lt;img src=&quot;imageurl&quot;&gt; then put this: &lt;a href=&quot;websiteurl&quot;&gt;text&lt;/a&gt;.

Answer 6

You need to float your elements.

&lt;div style=&quot;float: left;&quot;&gt;

or

div {

float: left;

}

Answer 7

You can try to use a table to lay out the thing the way you want, and hide the table border so it doesn&#039;t &quot;look&quot; like its a table. People do this all the time.

&lt;table border=&#039;0&#039;&gt;

&lt;tr&gt;

       &lt;td&gt;&lt;img src=&#039;YOUR_NON_LINKED_IMAGE_HERE.jpg&#039; /&gt;&lt;/td&gt;

       &lt;td&gt;&lt;a href=&#039;LINK_GOES_HERE.html&#039;&gt;THE LINK TEXT&lt;/a&gt;&lt;/td&gt;

       &lt;td&gt;&lt;img src=&#039;ANOTHER_IMAGE_GOES_HERE.jpg&#039; /&gt;&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

Hope that helps

Answer 8

A div is a block-level element. It will always appear on its own line unless you override this behavior with a stylesheet.

Do you need to put your link inside a div element for some reason? If not, don&#039;t bother.