✔ Bilder floaten nicht?

nordi

nordi

Erfahrenes Mitglied
Hallo,

ich habe ein kleines Problem mit einer Bildergalerie. Ich will einzelne Bilder in einem langen DIV-Container (#casa) floaten lassen, aber leider klappt das nicht so wie gedacht. Ich finde den Fehler aber nicht!

Hier der Code:

HTML: 
#casa {
	position:absolute;
	background-color:#FFF;
	left:250px;
	display:none;
	clear:both;
}

#casa img {
	float:left;
}

Hier ist die Seite: http://www.stokedesign.de/kunden/hejkal/
Klickt bitte auf den Link "Casa Malaparte" Die Bilder sollen so dargestellt werden wie bei "project1" oder "project2". Da sind die Bilder aber ein einem Bild zusammengefasst und nicht einzeln. Ich bin mir nicht sicher, aber irgendwo ist da der Fehlerteufel drinnen! Bin sehr dankbar für Tipps!
 
In diesem Modell werden die Elemente nicht am Zeilenende der umschliessenden Box umgebrochen:

HTML: 
<body>
     <div class="scrollBox">
          <ul>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
              <li><img src="" alt="" /></li>
          </ul>
     </div>
</body>
CSS: 
div.scrollBox {
position:relative;
height:300px;
width:100%;
border:1px solid #b5bfca;
overflow:hidden;
overflow-x:scroll;
white-space:nowrap;
}
div.scrollBox ul {
position:absolute;
top:15px;
list-style:none;
white-space:nowrap;
}
div.scrollBox ul li {
display:inline;
}
 
Hey, sorry - aber wie kann ich das übertragen? Soll ich die Bilder bei mir auch als <li> positionieren?
 
Kannst dich ja daran versuchen, das CSS ohne Listenelement (<ul><li></li></ul>) funktionstüchtig in deinen Code zu übertragen ;-)
 
Zuletzt bearbeitet:
Hi, hab es probiert ;) Im Safari und Chrome klappt es - aber FF und Opera machen Probleme? Woran kann das liegen?
 
Hey, ich hab Mac - da listet der die Fotos alle untereinander auf.. er soll aber einen langen Containter aufbauen, wo alle Fotos nebeneinander angezeigt werden soll. Man soll bei diesem Container dann horizontal scrollen müssen. Hab mir gerade von einem Freund sagen lassen, dass er im FF und IE unter Windows die Fotos auch untereinander auflistet?! Ich versteh die Welt nicht mehr mit diesem browserspezifischen CSS-Käse ;)
 
Wie gesagt, mit meinem empfohlenen Code tritt das Problem des Bilderumbruchs in keinem Browser auf - auch nicht aus deinem Freundeskreis der dazugekommene IE.

Repräsentativ der FF-Schnappschuß für die Browserwelt unter WinXP:

ff.png

Was im Mac-Universum mit diesem funktionstüchtigen CSS (nicht) geboten ist, kann ich mangels dieses OS nicht nachvollziehen / überprüfen, und somit hier auch keine Ratschläge aussprechen ;-)
 
Zuletzt bearbeitet:
nordi hat gesagt.:
Ich will einzelne Bilder in einem langen DIV-Container (#casa) floaten lassen, aber leider klappt das nicht so wie gedacht. Ich finde den Fehler aber nicht!

Hier der Code:

HTML: 
#casa img {
	float:left;
}
Zum Vergrößern anklicken....
Da du dich wohl mit meinem Vorschlag nicht anfreunden willst, und in den vergangenen fünf Stunden offensichtlich auch nicht den Versuch angegangen bist, die CSS-Lösung ohne das <ul>-Listenelement in deinen existierenden HTML-Code zu projezieren, helf' ich dir für die bevorstehende Nachtschicht auf die Sprünge, das "heruntergebrochene" CSS, das browserübergreifend unter WinXP die gewünschten Dienste verrichtet, in den "Mac"-Browsern zu testen :rolleyes:

CSS: 
#casa { /* Ergänzung für Selektor "#casa" */
        overflow:hidden;
        overflow-x:scroll;
        white-space:nowrap;
}
#casa img { /* Änderung für Selektor "#casa img" */
	    display:inline; /* Denkbarer alternativer display-Wert wäre hier "inline-block" */
        /* Achtung: Ältere Versionen der diversen Browser interpretieren "inline-block" nicht korrekt */ 
        /* Folge: Die Elemente werden von ihnen nicht, wie in der CSS-Spezifikation definiert, im Textfluß nebeneinander, sondern wie Blockelemente absatzmäßig untereinander ausgerichtet!  */
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück