prog: Zwei float right, einer mit, einer ohne clear right

SELF-Forum

Zwei float right, einer mit, einer ohne clear right

prog
– Informationen zu den Bewertungsregeln

Hallo,
ich möchte ungefähr folgendes realisieren:

+---------------------------+
|text text text  +----+ +-+ |
|text text text  |Bild| |N| |
|text text text  +----+ |a| |
|text text text  +----+ |v| |
|text text text  |Bild| |i| |
|text text text  +----+ |b| |
|text text text  +----+ |o| |
|text text text  |Bild| |x| |
|text text text  +----+ +-+ |
|text text text text +----+ |
|text text text text |Bild| |
|text text text text +----+ |
|text text text text +----+ |
|text text text text |Bild| |
|text text text text +----+ |
+---------------------------+

Die Navigationsbox soll also nach rechts gefloatet werden und die Bilder
sollen zwar durch ihr float:right; links neben der Navigationsbox landen,
aber sich im Falle mehrer Bilder untereinander anordnen. (clear:right;)
Gibt es eine Möglichkeit dieses Verhalten zu erzeugen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zwei float right, einer mit, einer ohne clear right

    Edgar Ehritt
    – Informationen zu den Bewertungsregeln

    Hallo Prog,

    Gibt es eine Möglichkeit dieses Verhalten zu erzeugen?

    es ist nicht mit CSS alleine Möglich, prinzipiell ist jedoch nie etwas wirklich unmöglich ;)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<style type="text/css">
~~~~~~css
  
#menu   {float:right;background:red}  
.fi     {width:100px; height:30px;border:solid 1px green;display:inline-block}  
#bilder {text-align:right;float:right}  
#anhang {display:none;float:right;clear:right}

    </style>  
<script type="text/javascript">
~~~~~~javascript
  
	function dl(){  
		var anhang =document.getElementById('anhang');  
		var bilder =document.getElementById('bilder');  
		var imglist=bilder.getElementsByTagName('img');  
		var brlist =bilder.getElementsByTagName('br');  
		var n,m;  
		var p      =imglist.item(i).offsetLeft;  
		for(var i=0;i<imglist.length;i++){  
			n=imglist.item(i);  
			if(p!=n.offsetLeft){  
				while(i!=imglist.length){  
					n=imglist.item(i);  
					m=brlist.item(i);  
					anhang.appendChild(n.cloneNode(true));  
					bilder.removeChild(n);  
					bilder.removeChild(m);  
					anhang.appendChild(document.createElement('br'));  
				}  
				break;  
			}  
		}  
		if(anhang.hasChildNodes()){  
			anhang.style.display='block';  
		}  
	}

    </script>  
</head>  
<body onload="dl()">  
<div id="bilder">  
	<ul id="menu">  
		<li>link 1</li>  
		<li>link 2</li>  
		<li>link 3</li>  
		<li>link 4</li>  
		<li>link 5</li>  
	</ul>  
	<img src="test" class="fi" alt="1"/><br/>  
	<img src="test" class="fi" alt="2"/><br/>  
	<img src="test" class="fi" alt="3"/><br/>  
	<img src="test" class="fi" alt="4"/><br/>  
	<img src="test" class="fi" alt="5"/><br/>  
	<img src="test" class="fi" alt="6"/><br/>  
	<img src="test" class="fi" alt="7"/><br/>  
	<img src="test" class="fi" alt="8"/><br/>  
	<img src="test" class="fi" alt="9"/><br/>  
	<img src="test" class="fi" alt="10"/><br/>  
	<img src="test" class="fi" alt="11"/><br/>  
	<img src="test" class="fi" alt="12"/><br/>  
</div>  
<div id="anhang"></div>  
<p>text text ...</p>  
</body>  
</html>

    Sollten jedoch die Bilder nicht gleichgroß sein, wird es nicht funktionieren. Ggf. zurückmelden.

    Gruß aus Berlin!
    eddi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln