HTML Element

Community Forums/General Help/HTML Element

JoshK

(Posted 2011) [#1]

I want to make a series of boxes with text above an image. Each box must have the same exact code, so I can't do something like create a 3x3 table. What HTML element can I use that will align the text and image, and auto-arrange each box depending on the width of the page? If I made a table for each one, each new table would start on a new line, which I don't want:

Here's what I am trying:

<span>
<div style="width:280px;" align="center">
<a href="http://www.google.com">The Zone</a>
</div>
<div style="width:280px;">
<img width=280px height=140px src="http://i4.ytimg.com/vi/ZAunjLrWtdU/0.jpg">
</div>
</span>

<span>
<div style="width:280px;" align="center">
<a href="http://www.google.com">The Zone</a>
</div>
<div style="width:280px;">
<img width=280px height=140px src="http://i4.ytimg.com/vi/ZAunjLrWtdU/0.jpg">
</div>
</span>

<span>
<div style="width:280px;" align="center">
<a href="http://www.google.com">The Zone</a>
</div>
<div style="width:280px;">
<img width=280px height=140px src="http://i4.ytimg.com/vi/ZAunjLrWtdU/0.jpg">
</div>
</span>

<span>
<div style="width:280px;" align="center">
<a href="http://www.google.com">The Zone</a>
</div>
<div style="width:280px;">
<img width=280px height=140px src="http://i4.ytimg.com/vi/ZAunjLrWtdU/0.jpg">
</div>
</span>

<span>
<div style="width:280px;" align="center">
<a href="http://www.google.com">The Zone</a>
</div>
<div style="width:280px;">
<img width=280px height=140px src="http://i4.ytimg.com/vi/ZAunjLrWtdU/0.jpg">
</div>
</span>

Last edited 2011

JoshK

(Posted 2011) [#2]

The display:inline property would work, except it only works with FF.

Last edited 2011

AdamRedwoods

(Posted 2011) [#3]

From the hip:

DIV each text/image combo and then SPAN (or DIV) each row with style = "display:inline;"

JoshK

(Posted 2011) [#4]

There is no such thing as a row. You get the same code for each box.

Kryzon

(Posted 2011) [#5]

Display:inline is a very basic property, it works with several browsers (reference).

It seems the best way to go about this is having an Unordered List (<ul>). It can be customized to several styles.

http://www.cssplay.co.uk/menu/lightbox.html - scroll down for the source. What sets the amount of pictures per row is the size of the container.
If you increase the size of the container for the pictures, the rows will get larger because they can fit more photos (I used Opera DragonFly for that and I recommend it for website building or reverse-engineering).

Last edited 2011