# mehrere Bilder um ein Bild herum



## PaKo19 (6. Januar 2013)

Guten Abend,

und zwar versuche ich ein großes Bild in der Mitte und kleinere Bilder um das große Bild herum zu machen. Das große Bild habe ich in der Mitte hinbekommen
das kleine Bild was um das herum sein soll hab ich auch bekommen aber wenn ich versuche ein drittes Bild zu machen was rechts neben dem großen Bild sein soll
und über dem kleinen Bild schaff ich nicht. Es ist rechts neben dem kleinen Bild. Mein Befehl lautet

```
<html>
<head>
<title>Freizeit</title>
</head>

<body bgcolor="#CBAFAF">
  <h1> Freizeit </h1>
<a href="home.html"> home </a>

<div align="center">
<img src ="Bilder/galatasaray.jpeg" align="center"  height="50%" width="30%" hspace="0" vspace="0" />
<img src ="Bilder/cls.jpg" align="center"  height="20%" width="15%" hspace="0" vspace="0" />
<img src ="Bilder/20.jpg" align="center"  height="20%" width="15%" hspace="0" vspace="0" />
</div>

</body>
</html>
```

hab es geschafft dass das 3 Bild höher ist als das 2 bild aber es hat immer noch einen großen Abstand vom Bild in der Mitte


----------



## ikosaeder (7. Januar 2013)

Du solltest besser CSS verwenden.
Verwendete Suchbegriffe:'bilder positionieren css'
Liefert als ersten Treffer:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm
Leider nicht ganz aktuell, aber für dich ein guter Einstieg, wie man mit CSS Elemente in einer Website positionieren kann.


----------



## djheke (7. Januar 2013)

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
 <head>
   
   <title>positionieren</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta http-equiv="Content-Style-Type" content="text/css"/>   

<style type="text/css">

* {
 margin:0;
 padding:0;
}

#gal {
 margin:30px;
 width:400px;
 border:1px solid #aaa;
 float:left;
}

img {
 width:100px;
 display:block;
 float:left;
}

</style>

</head>
<body>

<div id="gal">
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
  <img src="bild1.jpg" />

  <img src="bild1.jpg"style="width:200px;height:150px;" /> <!-- Das 6. Bild vergrößert -->
  <img src="bild1.jpg" style="margin:75px 0 0 -300px;"/> <!-- Das 7. Bild verschoben -->

  <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
 <img src="bild1.jpg" />
</div>
</body>
</html>
```

So geht's mit 13 Bildern.


----------

