0

First I want to warn you, I am pretty new to HTML so forgive me in advance if I am asking stupid questions ! I have started this class where we need to create our own website and they teach us how to create a simple images gallery but only horizontally. However, in order to create a better design for my website, I'd like to create an image gallery but vertically. How can I do? I have seen few answers elsewhere but we haven't learnt any complicated stuffs yet so I did not understand a thing ! Here is what I wrote on my HTML document:

<head>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<script src="http://media.mq.edu.au/mas240/js/gallery.js"></script>

</head>

<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

Here is what I wrote on my CSS document:

.gallery {
float: center;
margin-top: 30px;
margin-bottom: 20px;
border: 5px solid black;
border-radius: 15px;
}
jon snow
  • 3,062
  • 1
  • 19
  • 31
Lisa
  • 9
  • 1
  • 3

1 Answers1

1

There is no such property as float: center; use display: block if you want to have them display vertically.

Like so:

.gallery {
    display: block;
    margin-top: 30px;
    margin-bottom: 20px;
    border: 5px solid black;
    border-radius: 15px;
    text-align: right;
}
<section>

<img src="images/th-dancestudio2.jpg" class="gallery" href="images/dancestudio2.jpg" />

<img src="images/th-dancestudio3.jpg" class="gallery" href="images/dancestudio3.jpg" />

<img src="images/th-dancestudio4.jpg" class="gallery" href="images/dancestudio4.jpg" />

<img src="images/th-dancestudio5.jpg" class="gallery" href="images/dancestudio5.jpg" />

</section>

If you want the images centered or aligned to the right just use the text-align property

odedta
  • 2,430
  • 4
  • 24
  • 51
  • Thank you it worked ! However it stays in the middle of the page. If I am not able to use float which property do I have to use to position the gallery to the left or right of the page? – Lisa Jun 01 '15 at 12:11
  • `float: left;` or `float: right;` or `text-align: left;` or `text-align: right;` – odedta Jun 01 '15 at 12:11
  • If I use `float:left;` it puts back the gallery horizontally and `tex-align: left` doesn't do anything :/ – Lisa Jun 01 '15 at 12:14
  • I have revised my answer. – odedta Jun 01 '15 at 12:22
  • Thanks again but by using the `text-align` property the gallery becomes horizontal again :/ – Lisa Jun 01 '15 at 12:24
  • Look at my answer, I've added `text-align: right;` and the images are aligned to the right. You must have some other code messing with this I suppose. – odedta Jun 01 '15 at 12:26
  • Yeah that's what I was thinking too ! I'll go through everything and check ! Thank you again for your help ! – Lisa Jun 01 '15 at 12:36
  • Cheers! if this answer is good please accept it and vote up, thanks. – odedta Jun 01 '15 at 12:42