Basic HTML Help

Hi my web has 3 images at the front , the code to place those images is this :

<div class=“row-fluid”> <div class=“span4”><a href=“http://allocases.myshopify.com/collections/phone”><img src=“https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601” alt="" /></a></div> <div class=“span4”><a href=“http://allocases.myshopify.com/collections/tablet”><img src=“https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588” alt="" /></a></div> <div class=“span4”><a href=“http://allocases.myshopify.com/collections/accsesories”><img src=“https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588” alt="" /></a></div></div>

But, in my web you can see that at the right side , there is a gap , is not simetric, ay ideas on what is wrong ?

Thanx !

images inside div.span4 are aligned to left? maybe aligning the left image to left, center image to center and right image to right?

in the code i posted above , no, there is no “left” there.

do you mean there is probably a file called div.span4 , and i should check there ?

I see you have no idea about webdevelopment whatsoever from your statement ^^
You sure you want to handle a shop when you don’t even know basic CSS?

There’s a stylesheet somewhere, defining the classes span4 and row-fluid.
Those style classes are applied to the divs… obviously.
And you got to check there what span4 actually does. It does not center stuff.

You’re using twitters bootstrap, in case you don’t know.
And aligning stuff there isn’t too easy, especially centered.

You’re using span4 3 times. That’s fine, those are 12 and fit.
However the 3 images are not centered inside the span4 divs.

And please don’t do it inline with a .foo {text-align: center;} that’s horrible practice.

So you either use bootstraps center class additionally to the span4 to center each inside it’s span4 div:


&lt;div class="row-fluid"&gt;
 &lt;div class="span4 pagination-centered"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/phone"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="span4 pagination-centered"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/tablet"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="span4 pagination-centered"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/accsesories"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;

or you distribute them evenly in the row-fluid div…


&lt;div class="row-fluid"&gt;
 &lt;div class="span4 pagination-left"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/phone"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="span4 pagination-centered"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/tablet"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
 &lt;div class="span4 pagination-right"&gt;
  &lt;a href="http://allocases.myshopify.com/collections/accsesories"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/0192/3006/t/3/assets/allo_index_content_01.jpg?3601?3588" alt="" /&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;

Oh, and don’t post code like you did, that’s hard to read and impolite IMO.

Ah. it’s explained already…forget this.