mehrere bilder quadratisch anordnen - problem

html.de-Forum HTML, XHTML & CSS
1

hey hey,

ich bin’s mal wieder :confused:
zu aller erst, ja, ich habe schon gegoogelt. allerdings habe ich nicht das gefunden wonach ich suche.

und zwar würde ich gerne auf einer seite von mir mehrere bilder (haben alle die selbe größe 70x70 px) quadratisch anordnen. ungefähr so : http://s5.directupload.net/images/100802/ag4zvixf.jpg

die bilder sollen am ende verlinkungen werden, was auch kein problem ist. es hapert lediglich an der anordnung.
ich habe es zuerst per floatbefehl versucht und den bildern eigene classe’s zugewiesen, die dann via css an die richtige stelle gerückt. allerdings hatte ich dann das problem das die verlinkungen dubioserweise über eine ganze horizontale bildlinie gingen obwohl zwischen den bildern ja „nichts“ sein dürfte.

ich wollte jetzt einfach mal fragen wie man sowas am besten per css anordnet da ich auch noch am anfang stehe was diesen html und css kram angeht :confused:

gruß,
haiqu

2

Hallo haiqu,
da du keinen Code gepostet hast, kann ich nur raten.
weise den Links die Eigenschaft display: block und float: left zu, außerdem solltest du die Breite fest vorgeben, dann dürfte es keine Probleme geben.

<!doctype html>
<html>
<head>
<style type="text/css">

body {
 background: #444;
}

.link {
 display: block;
 float: left;
 margin: 10px;
}

.breite {
 width: 300px;
}

</style>
</head>
<body>
<div class="breite">

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>
<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>

<a class="link" href="#"><img src="http://www.html.de/images/htmlde.png" 

alt="" height="70" width="70"></a>


</div>

</body></html>
3

super, danke für die schnelle antwort! werd das gleich mal ausprobieren! :]

4

so, ich bin leider die letzten tage nicht dazu gekommen das mal zu probieren, aber nun hab ich zeit und stehe leider wieder vor einem problem.

der oben gezeigte code funktioniert zwar, allerdings wenn ich die breite des div’s definiere, die eine andere ist als das hintergrundbild des div’s hat, ist es ja logisch das dort was „abgeschnitten“ wird, was ich natürlich nicht möchte :confused:

zudem schaff ich es auch nicht, diese bilder, mittig zu positionieren.
um das mal verständlicher zu machen hab ich mal ein kleines bild angefertigt:

http://s5.directupload.net/images/100804/afhmszi2.jpg

ich würde halt gerne, diese bilder in den roten kasten bekommen.
problem ist wie gesagt das sobalt ich die breite (die von dem roten kasten) dem div gebe, wird das div zugewiesene hintergrundbild abgeschnitten.

vielleicht kann mir da nochmal jemand helfen?:confused:

edit:nach längerem rumprobieren hab ich nun das geschafft was ich wollte indem ich einfach in den div container der das hintergrundbild hat, einfach noch einen div containter gesteckt habe, indem dann die verlinkungen sind. und diesen habe ich dann per css an die richtige stelle gerückt.

allerdings denke ich das dies nicht unbedingt die klügste methode ist.
bin also weiterhin dankbar für andere vorschläge :]

5

Wenn du Hintergrundbilder mittig Positionieren willst benötigst du die CSS Eigenschaft background-position.
Der Code müsste also so ausschauen:

div.breite{ background-position:center center;}

6

mach doch sonst einen extra div und definier ihn so, das er genau die größe des roten kastens hat, setz ihn auf transparent und leg die links da rein!