html/css bilder in eine reihe bekommen

[werbebanner]

Huhu, kann mir jemand sagen wie ich 4 Bilder nebeneinander bekomme welche alle den selben Abstand zueinander haben? Die äußeren beiden sollten den gleichen Abstand nach ausen haben. Und alles sollte dynamisch sein. Also sich an den jeweiligen Bildschirm anpassen.

Hier eine kleine Veranschaulichung was ich genau meine:
[align=center] [/align]
(Alle buchstaben sollten den selben Abstand haben (in % statt pixxel denk ich mal? - dynamisch)

Also das funktioniert aufjednefall irgendwie mit div's, soviel weiß ich Weiß allerdings nicht was ich da als position nehmen muss (relative, absolute, static), und dann was richtig ist, fload, padding, margin.

Mach das ganze mit Dreamweaver cs6. Kenn mich aber mit den grundlegenden Dingen eig. soweit aus. Ist nur etwas lange her. Danke für eure Hilfe schonmal


PS: am liebsten ohne tabelle. aber wenn es nur mit tabelle geht..würde mich auch interessieren wie. bekomm es nämlich so auch nicht hin. bekomme es nicht hin das sich die tabelle bzw. die bilder dynamisch zum bildschirm anpasst.

[DeluxeDose]

<style type="text/css">
      <!--
       #all{width:100%;}
       #img{float:left;
       width:25%;  100% durch anzahl der Bilder
       text-align:center; setzt die Bilder in die Mitte des Divs
       }
       img{height:100px;}
      //-->
</style>


<div id="all">
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
</div>

So würde ich es auf die schnelle machen, da kannst dir halt den all Container hin schieben wie du magst und die Bilder werden an den all angepasst.
Die position von all kommt ganz auf die Webseite an ob relative oder absolute. Mit margin könnte man noch die Außenabstände von img ändern aber is ja kein muss.

[werbebanner]

danke. werde es gleichmal testen

Irgendwie funktioniert das nicht richtig. Also es funktioniert teilweise. Aufjedenfall bessre als es bei mir war. Aber die bilder werden leider total reduziert...die höhe wird irgendwie verkleinert sodass sie total verschowommen wirken. und ich hätte gerne eins stopp drin wenn man das bild verkleinert. So wie es jetzt ist...überlappen die bilder sobald man das fenster kleiner zieht.

edit:// hab da smit der höhe der bilder hinbekommen: Einfach img{height:100px;} gelöscht.

Nunnurnoch das, das sich die bilder übereinanderschieben wenn man das fenster verlkeinert. Kann man das irgendwie deaktivieren bzw. ein stopp rein machen. Das zwischen jedem Bild aufjedneflall z.b 10px dazwischenbleiben? Also ein mindestabstand den die bilder neben sich haben müssen. dachte eig. das geht mit margin. aber dann verschieben sich die ganzen bilder wieder :/

push

[kissein]

Originally Posted by DeluxeDose

<style type="text/css">
      <!--
       #all{width:100%;}
       #img{float:left;
       width:25%;  100% durch anzahl der Bilder
       text-align:center; setzt die Bilder in die Mitte des Divs
       }
       img{height:100px;}
      //-->
</style>


<div id="all">
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
      <div id="img"><img src="logo.png"></div>
</div>

....

ID Selektor muss unique sein. Wenn eine Definition mehrfach verwendet werden soll -> class="img"

Nunnurnoch das, das sich die bilder übereinanderschieben wenn man das fenster verlkeinert.

Blockelemente daraus machen -> display:inline-block/block je nach aufbau.

Das zwischen jedem Bild aufjedneflall z.b 10px dazwischenbleiben

ein margin für den bild umgebenden container setzen

[Failwell]

Float ist für Anfänger immer relativ schwer zu verstehen.

Als Alternative gibts auch die CSS Eigenschaft display: inline-block;
Wenn du die einem img Tag zuweist, und die Elemente nicht zu breit sind, werden sie in einer Zeile angezeigt. Abstände zwischen den Elementen kann man wie gewohnt mit margin und padding erzeugen.

[werbebanner]

ok danke. Werde es gleich versuchen. Hatte den Befehl: display: inline-block;, gestern schon drin, aber hat irgendwie nichts verändert. Muss dann wahrscheinlich float rausmachen?

und das mit padding und margin ist komisch. Wenn ich z.b 10px einstell, verschiebt sich das letzte bild in die nächste teile weil dann irgendwie zu wenig platz in der ersten reihe ist :/