CODEWITHSUNDEEP
htmlcss
Joshxtothe4
Joshxtothe4

Reputation: 4201

making pictures center horizontally in a layer

I have the following code

<html>
<head>
<title>Test</title>
<style type="text/css">

<!--

body,td,th {

    color: #FFFFFF;

}

body {

    background-color: #000000;

}



#Pictures {

    position:absolute;

    width:591px;

    height:214px;

    z-index:1;

    left: 17%;

    top: 30%;

    text-align:center;

}

#Links {



    width:600px;

    height:30px;

    z-index:2;

    top: 184px;

    font-family: "Broadway", Broadway, monospace;

    font-size: 14px;

    color: #FFFFFF;

    text-align: center;



}

.links2 {

    font-family: Broadway;

    color: #FFFFFF;

    text-decoration: none;

}





a:links2, a:visited {

    color: #ffffff;

}



a:hover, a:active {

    color: #333333;

}

#Main {

    position:absolute;

    width:800px;

    height:600px;

    z-index:2;

    left: 15%;

    top: 10%;

    right: 15%;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;



}

#Logo {

    position:absolute;

    float: left;

    width:104px;

    height:100px;

    z-index:2;

}



</style>

</head>



<body>



<div id="Main">

<div id="Pictures">

<div>

<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>

<a href="1.html" class="links2">1</a>

</div>

<div>

<a href="2.html" class="links2"><img src="2.gif" alt="x" width="181" height="173" border="0" align="top" /></a>

<a href="2.html" class="links2">2</a>

</div>

<div>

<a href="3.html" class="links2"><img src="3.gif" alt="3" width="181" height="173" border="0" /></a>

<a href="3.html" class="links2">3</a> 

</div>

</div>

</div>

<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>

</div>

</body>

</html>

Which is displaying the picture layers vertically.

I am trying to make it o the 3 images are aligned horizontally with the text centered underneath them. Why are they defaulting to vertical, and can I change this behavior?

Upvotes: 1

Views: 1721

Answers (3)

alexmeia
alexmeia

Reputation: 5251

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.

Upvotes: 1

Ola Tuvesson
Ola Tuvesson

Reputation: 5221

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!

Upvotes: 1

Phil Jenkins
Phil Jenkins

Reputation: 4426

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;
}

Upvotes: 0

Related Questions