ansaurus

Question

making pictures center horizontally in a layer

Answer 1

+1 A:

I think a display: block; on your links2 class should put the links under the images correctly.

Also, to get the images to line up horizontally, use <span>s instead of <div>s inside the 'Pictures' div, and float them left.

#Pictures span
{
   float: left;
   margin-right: 5px;
}

Phil Jenkins 2008-11-18 10:01:48

It does indeed place the text centered under the images, but does not stop the images from being stacked vertically.

Joshxtothe4 2008-11-18 10:06:09

Sorry! Edited my response accordingly.

Phil Jenkins 2008-11-18 10:07:39

It seems to work! I have replaced all DIV's with : <SPAN style="float: left;> Is there any better way to do that? And how yould you put spacing between them?

Joshxtothe4 2008-11-18 10:12:00

I've added the CSS you'll need in the answer :)

Phil Jenkins 2008-11-18 10:15:57

This work, but in my opinion is not the best way to obtain what you need. Too much markup, and there are no reasons to use span instead of div if you need to give the span the float:left property.

alexmeia 2008-11-18 10:53:25

Agreed - i'm not ashamed to admit my answer is a quick fix at best.

Phil Jenkins 2008-11-18 13:35:24

Answer 2

+2 A:

You don't actually need that much code to achieve what your're after. For example:

<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>

<div id="images">
<a href="1.html" >
    <img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
    One
</a>
<a href="2.html" >
    <img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
    Two
</a>
<a href="3.html" >
    <img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
    Three
</a>
<a href="4.html" >
    <img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
    Four
</a>
</div>

The trick to get the items to align horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as the containers instead of wrapping everything in extra <div>s. I have set the width to 25% (or 24.99% to avoid a rounding error in some browsers) so that they're spread out evenly across the page but you might want a different alignment which is easily done using margins/padding and/or a different width on the containers. Note also that when you set a text colour on the body {} you do not need to specify it again elsewhere apart from for links. Same thing goes for font-family, allthough this is also inherited by links. Good luck with the project!

Ola Tuvesson 2008-11-18 10:30:29

Answer 3

+2 A:

Look at this code and test it: you can do the same thing in a more efficient, semantic and clean way:

Css:

div.imageBox {
  float: left;
  margin-right: 10px;
  }

div.imageBox p {
   text-align: center;
   }

Html:

<div class="imageBox">
  <a href="#">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">1</a></p>
</div>

<div class="imageBox">
  <a href="#">
  <img src="image2.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">2</a></p>
</div>

<div class="imageBox">
  <a href="#">
  <img src="image3.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">3</a></p>
</div>

That's all you need!

If you want to keep your code, there are no reasons to use the attribute align inside the img tag. You can use span instead of div, but in this case is better to keep using div and give them a width:

div#Pictures div

    {
       float: left;
       margin-right: 5px;
    }

This code:

a:links2

has no sense. links2 is a class made by you, not a pseudo-class or a pseudo-element.

alexmeia 2008-11-18 10:35:02

ansaurus

tags:

views:

answers:

making pictures center horizontally in a layer

related questions