[CSS] <img>'s bei jeder Fenstergröße nebeneinander

**Wuaegner**

Hallo,
Ich hoffe hier mal auf die webdesigner unter uns, habe ein eigentlich einfache Problem wofür ich bis jetzt nur leider noch keine Lösung gefunden habe die im IE und im FF funktioniert.
Ich habe ein Bannerdiv, das zwei Bilder beinhaltet.
Das eine soll immer linksbündig sein und das andere immer am rechten Rand kleben und zwar auch wenn man die Fenstergröße des Browsers nun verkleinert. Jedoch soll sobald das Fenster so klein ist, dass die <img>'s nicht mehr voll nebeneinander passen, einfach unten ein Scrollbalken erscheinen und das zweite <img> soll NICHT in die neue zeile geschmissen werden. Im Prinzip so wie das banner der DP, mit "your're welcome" als rechter Bannergrafik.

<div>
<img>
<img>
</div>

Weiß jemand wie ich das anstelle, dass es sowohl im FF als auch im IE funktioniert?

**phlux**

hmm in dem style von einem bild setzte das float: left in dem anderen auf float:right wenn das nicht hilft musst du dem div container noch eine fixe höhe geben und den overflow auf scroll setzen im div-container

**H4ndy**

Zweite Möglichkeit wäre es, die zwei Bilder in eine Tabelle zu schaufeln.
Ist zwar nicht die schönste Möglichkeit, funktioniert aber

markieren

Code:

			<div>

<table border="0" style="padding:0px;margin:0px;" cellspacing="0" cellpadding="0"><tr>

<td align="left">[img]bla[/img]</td>

<td align="right">[img]blabla[/img]</td>

</tr></table>

</div>

**Wuaegner**

Zitat:

dem div container noch eine fixe höhe geben und den overflow auf scroll setzen im div-container

Fixe Höhe hat er sowieso und Overflow:scroll, dann macht er mir oben beim banner nen Scrollbalken rein, das will ich ja nicht.

@H4ndy:
Das wäre dann die letzte Alternative, wollte es aber ohne tabelle schaffen.

**phlux**

@h4ndy: wo bleibt da der sinn der barrierefreiheit? dann kannst auch gleich noch die div container weglassen

Zitat:

Jedoch soll sobald das Fenster so klein ist, dass die <img>'s nicht mehr voll nebeneinander passen, einfach unten ein Scrollbalken erscheinen und das zweite <img> soll NICHT in die neue zeile geschmissen werden.

du wolltest doch scrollbalken haben?

edit auszug aus selfhtml:

Zitat:

overflow (Elementbereich mit übergroßem Inhalt)

Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit <div>...</div>, für den Sie mit Hilfe der Eigenschaft width eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.
Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>overflow</title>
</head><body>

<div style="width:200px; height:150px; overflow:auto; border:1px solid #840; margin:1em;">
beliebiger Hund: <code>auto</code>

[img]hund.gif[/img]
</div>

<div style="width:200px; height:150px; overflow:hidden; border:1px solid #840; margin:1em;">
abgeschnittener Hund: <code>hidden</code>

[img]hund.gif[/img]
</div>

<div style="width:200px; height:150px; overflow:scroll; border:1px solid #840; margin:1em;">
scrollender Hund: <code>scroll</code>

[img]hund.gif[/img]
</div>

<div style="width:200px; height:150px; overflow:visible; border:1px solid #840; margin:1em;">
sichtbarer Hund: <code>visible</code>

[img]hund.gif[/img]
</div>

</body>
</html>

Erläuterung:

Mit overflow: können Sie bestimmen, wie übergroße innere Elemente behandelt werden. Folgende Angaben sind möglich:

visible = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
hidden = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet.
scroll = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie bei einem eingebetteten Frame-Fenster.
auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

**Wuaegner**

Aber ich will doch keine Scrollbalken am BannerDIV.. sondern wenn dann am BODY der gesamten Seite.

Werde es nun mit der Tabelle machen, es sei denn hier taucht noch eine Idee auf. Danke

**phlux**

du gibst dem hauptcontainer ne feste breite und höhe und setzt dort den overflow auf scroll?

**Wuaegner**

Zitat:

du gibst dem hauptcontainer ne feste breite und höhe und setzt dort den overflow auf scroll?

Dann hat der Hauptcontainer ein Scrollbalken... es soll aber lediglich der vom Browserfenster zu sehen sein.

Die Bannerbilder sollen sich einfach bei Kleinermachen des Fensters immer näher zusammenschieben und sobald es nicht näher geht, sollen sie so bleiben und unten am Bildschirm müsste man dann eben ein wenig nach rechts scrollen um das volle Banner zu sehen.

**fränk0815**

Du könntest

hier mal nachfragen.

Eventuell kommst du dort eher zu einer Lösung.

**Mystic**

Ich würde das linke Image normal und das rechte per position: absolute; positionieren.

[CSS] <img>'s bei jeder Fenstergröße nebeneinander

[CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander

Forumregeln

phlux Registriert seit: 4. Nov 2002 Ort: Witten 1.335 Beiträge Delphi 6 Personal	#2 Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander 7. Feb 2006, 12:56 hmm in dem style von einem bild setzte das float: left in dem anderen auf float:right wenn das nicht hilft musst du dem div container noch eine fixe höhe geben und den overflow auf scroll setzen im div-container Christian "phlux" Arndt
	Zitat

Wuaegner Registriert seit: 8. Feb 2004 406 Beiträge Delphi 6 Enterprise	#6 Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander 7. Feb 2006, 13:12 Aber ich will doch keine Scrollbalken am BannerDIV.. sondern wenn dann am BODY der gesamten Seite. Werde es nun mit der Tabelle machen, es sei denn hier taucht noch eine Idee auf. Danke Wuaegner Gruß Flo Unternehmensberatung
	Zitat

phlux Registriert seit: 4. Nov 2002 Ort: Witten 1.335 Beiträge Delphi 6 Personal	#7 Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander 7. Feb 2006, 13:21 du gibst dem hauptcontainer ne feste breite und höhe und setzt dort den overflow auf scroll? Christian "phlux" Arndt
	Zitat

fränk0815 Registriert seit: 12. Sep 2002 Ort: München 33 Beiträge Delphi 2006 Professional	#9 Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander 7. Feb 2006, 17:42 Du könntest hier mal nachfragen. Eventuell kommst du dort eher zu einer Lösung. Frank Engelbrecht
	Zitat

Mystic Registriert seit: 18. Okt 2003 Ort: Flerzheim 420 Beiträge Turbo Delphi für Win32	#10 Re: [CSS] <img>'s bei jeder Fenstergröße nebeneinander 7. Feb 2006, 18:37 Ich würde das linke Image normal und das rechte per position: absolute; positionieren. Jan Steffens Der Fachwortgenerator - 100% Schwachsinn --- Der UPnP Router Manager - Kommentare erwünscht!
	Zitat