XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Drei Bilder mit etwas Abstand nebeneinander anordnen (http://xhtmlforum.de/showthread.php?t=66808)

web334 04.02.2012 16:22

Drei Bilder mit etwas Abstand nebeneinander anordnen
 
ich möchte drei Bilder mit etwas Abstand zueinander nebeneinander anordnen, aber leider funktioniert das noch nicht.
Alle drei Bilder befinden sich in einem div. Jedes der Bilder sollte eine Breite von 33.2 Prozent haben. Und der Abstand der Bilder sollte zum Beispiel 11px betragen. Dabei ist es mir egal ob das mit margin oder mit padding gelöst wird. Ich habe zwar schon beides probiert, aber ohne Erfolg.
Wäre wirklich super, wenn mir jemand weiterhelfen könnte.
Mein Beispiel ist hier zu finden http://bit.ly/w8A8K4

Manfred62 04.02.2012 17:56

das widerspricht sich. Was genau soll raus kommen?
Nimm mal img aus dem CSS raus.
Zitat:

img {
height: auto;
max-width: 100%;
width: auto;
}

<img width="68" height="35" alt="" src="1.jpg">

Manfred62 05.02.2012 11:28

hier eine einfache Variante
HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
* {padding: 0; margin: 0;}

body {
 background: #fff;
 padding: 30px;
}

#banner3 {
 width: 100%;
 max-width: 900px;
 background: #7e8726;
  margin: 0 auto;
}

.tri {
 float: left;
 width: 33.3%;
}

.tri img {
 width: 93%;
 margin: 11px 3%;
 border: 1px solid #ccc;
}

.clear {
 clear: both;
}
</style>
</head>
<body>

<div id="banner3">
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="clear"></div>
</div>

</body>
</html>


web334 05.02.2012 16:09

Recht herzlichen Dank für deine Antwort. Diese habe mich auf eine andere Lösung gebracht. Und zwar folgende:
Code:

#banner3 {
        width: 100%;
        max-width: 900px;
        border: 0;
        margin-bottom: 26px;
        background: #7e8726;
}
.tri {
        position: relative;
        width: 33.33%;
        margin: 0;
        padding: 0;
        float: left;
        text-align: center;
}
.tri img {
        max-width: 90%;
        vertical-align: bottom;
        border: 1px solid #CCC;
        box-shadow: 5px 5px 5px #666;
}

sorry für die schlechte Beschreibung.
Ein schönes Wochenende euch allen noch.


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:49 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019