zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drei Bilder mit etwas Abstand nebeneinander anordnen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.02.2012, 16:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 241
web334 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.02.2012, 17:56
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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">
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2012, 11:28
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2012, 16:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 241
web334 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bilder mit Beschriftung anordnen snaps CSS 4 15.03.2011 21:06
3 Bilder in einem DIV anordnen (links, mittig, rechts) plegox CSS 5 29.04.2010 19:28
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 15:08
Bilder mit jeweils einem Untertitel folgend anordnen... Baron CSS 8 01.10.2007 23:51
Bilder und Text anordnen - Probleme mit Opera soulson7 CSS 1 11.07.2005 20:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:36 Uhr.