Clever Geek Handbook

Create images 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>

Displays the layers of the image vertically.

I am trying to do this. The 3 images are horizontally aligned with the text below them. Why are they not vertical by default, and can I change this behavior?

+1


source to share


3 answers


I think display: block;

your class links2

should put links below images correctly.

Also, to keep the images aligned horizontally, use the 'Pictures' div <span>

instead <div>

inside and place them to the left.



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


source


You don't really need code like this to achieve what you want. 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 for aligning items horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as containers instead of wrapping everything in additional <div> s. I set the width to 25% (or 24.99% to avoid rounding error in some browsers) so that they are evenly distributed throughout the page, but you may need a different alignment that is easy to do using margins / padding and / or a different width on containers. Also note that when you set the text color on the {} body, you do not need to specify it again elsewhere other than links. The same goes for the font family, although this is also inherited by links. Good luck with your project!

+1


source


Take a look at this code and test it: you can do the same in a more efficient, semantic and cleaner 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 is no reason to use attribute alignment inside the img tag. You can use span instead of div, but in this case it is better to use divs and give them width:

div#Pictures div

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

This code:

a:links2

doesn't make sense. links2 is a class made by you, not a pseudo class or pseudo element.

+1


source






More articles:


All Articles