Design Frage - Anordnung der Bilder

[Carmen]

Hallo,

Nein, HTML solltest du dazu nicht umbauen müssen.

wenn ich mein HTML aber nicht ändere bzw. weitere Klassen vergeben, dann sieht es so aus http://friseursalon.bplaced.net/ ist nicht das verhalten wie auf meinem Bild :/

Mein HTML Aufbau

  
      <div class="content">  
        <h2>Der Friseur</h2>  
        <p class="teaser">Wir sind Friseure aus Leidenschaft. Für Ihre Schönheit.</p>  
        <div class="personalImage" style="background-image: url(img/salon/01.jpg)">  
          <p class="personalName">Test Name 1</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/02.jpg)">  
          <p class="personalName">Test Name 2</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
        <div class="personalImage" style="background-image: url(img/salon/03.jpg)">  
          <p class="personalName">Test Name 3</p>  
        </div>  
      </div>  

In der ersten Reihe sollen drei Bilder sein und darunter dann eben 2 aber etwas nach rechts versetzt.

Und hier noch das passende CSS

  
	min-height:100%  
}  
  
.personalImage {  
	border: 5px solid rgb(210, 181, 91);  
	border-radius: 50%;  
	box-shadow: 0 0 0 0.313em rgba(210, 181, 91, 0.3) inset;  
	width: 13.750em;  
	height: 13.750em;  
	transition: all 0.5s ease-in-out 0s;  
	margin: 2em 8em 1.875em 0;  
	display:inline-block;  
	cursor:pointer;  
}  
  
.personalImage:last-child {  
	margin: 2em 0em 1.875em 0;  
}  
  
.personalImage:first-child {  
	margin: 2em 8em 1.875em 2em;  
}  
  
.personalImage:hover {  
	box-shadow: 0 0 0 6.875em rgba(255,255,255, 0.9) inset;  
}  
  
.personalImage .personalName {  
	text-align: center;  
	padding-top: 80px;  
	opacity: 0;  
	font-weight:bold;  
	transition: all 0.8s ease-in-out 0s;  
}  
  
.personalImage:hover .personalName {  
	opacity: 1;  
}  

Ich würde den unteren beiden Bildern eine weitere Klasse geben dass die eben ein Abstand nach links bekommen und somit weiter nach rechts rutschen.