Tabelleninhalt automatisch mitscrollen

D

djendless

Grünschnabel
Hallo
ich habe eine Tabelle mit 2 Spalten. In der linken ist ein recht Hohes iframe.
In der rechten sind ein paar wenige Banner.
Scrollt man nun die die Seite runter sind die kleinen Banner schnell aus dem Sichtfeld.
Kennt Jemand eine Lösung damit die Banner immer mitscrollen, also immer sichtbar sind?

Beispiel-Code:
HTML: 
<table width="100%" border="0">
 <tr>
 <td width="79%"><iframe scrolling="no" frameborder="0" src="xxxxx" height="2015" width="960"></iframe></td>

 <td width="20%" align="left" valign="top"><p><a href="xxxxx" target="_blank"><img src="xxxxx" width="120" height="60" border="0"></a>

 <a href="xxxxx" target="_blank"><img src="xxxxx" width="120" height="60" border="0"></a></td>
  </tr>
</table>
 
Javascript geht zwar, ist aber dank CSS unnötig. Die Grafiken absolut zu positionieren und zu fixieren ist schneller und ressourcensparender. Fixieren bedeutet hier, dass es "mitscrollt" weil es eben an der Stelle des Bildschirms fixiert ist. Die restlichen Elemente bewegen sich schließlich beim Scrollen oben aus dem sichtbaren Bereich heraus.
 
Hallo
ich habe mich nun mal für die css-variante entschieden. Irgendwie konnte ich mich noch nicht so richtig damit anfreunden aber heutzutage kommt man wohl nicht mehr drum herum.

Ich habe nun folgenden Code:
HTML: 
<style type="text/css">

body {
	background-image: url(page_background_top.jpg);
	background-attachment:fixed;
}
.rechts{
		width:20%;
		border-left:0px solid #000000;
		float:right;
		
        position:fixed;

	}
	
.links{
		width:80%;
	}

</style>
</head>
<body>

<div class="rechts">
<p><a href="http://www.xxxxxx" target="_blank"><img src="http://xxxxxx" width="120" height="60" border="0"></a></p>
 <p><a href="http://xxxxxx" target="_blank"><img src="http://xxxxxx" width="120" height="60" border="0" ></a></p>
</div>

<div class="links">
<iframe scrolling="no" frameborder="0" src="http://xxxxxx" height="2015" width="960"></iframe>
</div>




</body>

Das Problem ist nun folgendes.
Im IE 7 sind die Banner schön rechts wo sie sein sollten. Scrollen aber mit und sind somit nicht fixiert.
Im Firefox und Google Chrome sind sie zwar fixiert, allerdings sind sie ganz links oben und somit über dem iframe.

Was nun? Css scheint mir nun doch nicht mehr so ideal wenn es bei allen Browsern richtig angezeigt werden soll.
 
Dass die position:fixed-Deklaration bei dir im IE7 nicht funktioniert, lässt nur den Rückschluß zu, dass du ohne oder mit dem falschem Doctype das HTML-Dokument nicht im standardkonformen Modus übergibst, denn im "Quirksmode" verhält sich hier der IE7 wie seine Vorgänger aus dem letzten Jahrhundert, die den position-Wert fixed überhaupt nicht unterstützen.

Mein eingangs empfohlener Link beschäftigt sich übrigens mit einem CSS-Workaround für diese IE-Versionen ;)

Zum rechten Block empfehle ich dir, anstelle von float:right mit der right-Eigenschaft seine Startposition von rechts festzulegen.

Wenn du diese "Konzeptfehler" korrigierst, wirst du sehen, wozu CSS browserübergreifend imstande ist :-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück