• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Ebene nur horizontal scrollen?

T

techno

New member
Guten Abend.

Ich hätte da mal eine Frage.

Zunächst sollte ich vielleicht den Codeteil zeigen um den es sich handelt:
Code: 
<style type="text/css">
#bilderband 
{ 
  width:;
  height:100px;
  float:none;
  background-image:no;
  overflow:auto;
  name:bilderband;
}
</style>

Code: 
<tr bgcolor="#333333">
    <td align="center" height="100"  colspan="4"><div align="left" id="bilderband">
      <div align="center">
	  <a href="jugend/u8/A***.jpg" target="mitte"><img src="jugend/u8/thumbs/***147x100.jpg" alt="***" name="***" border="0"></a>
	  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***145x100.jpg" alt="***" name="***" border="0"></a>
	  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***130x100.jpg" alt="***" name="***" border="0"></a>

	  ---Hier folgen weitere Bilder---

	  </div>
    </div>
	</td>
  </tr>

Ich möchte nun, dass die Ebene in der ich die Bilder positioniert habe horizontal scrollbar ist und zwar nur horizontal. Ich möchte quasi dass alle Bilder in der selben Zeile bleiben.

Nur irgendwie bekomme ich das nicht hin.
Kann mir da vielleicht jemand weiterhelfen?
Bin für jeden Tipp dankbar, der mir zur lösung dieses Problems hilft.

Gruß techno.
 
Hmm klappt irgendwie nicht so ganz...

Meintest Du das so?(ich bin ein anfänger also bitte nicht auslachen ;-) )

Code: 
#bilderband 
{ 
  height:100px;
  float:left;
  background-image:no;
  overflow:auto;
  name:bilderband;
}

Code: 
<tr bgcolor="#333333">
    <td align="center" height="100" colspan="4">
	<div align="left" height="100" width="" id="bilderband" overflow="auto" float="left">
      <div align="center" height="100" width="" overflow="auto" float="left">
	  <a href="jugend/u8/***.jpg" target="mitte" float="left"><img src="jugend/u8/thumbs/***147x100.jpg" alt="***" name="***" border="0" float="left"></a>
	  <a href="jugend/u8/***.jpg" target="mitte" float="left"><img src="jugend/u8/thumbs/***145x100.jpg" alt="***" name="***" border="0" float="left"></a>
<div>
    </div>
	</td>
  </tr>


hmm
 
hier mal ein Teil von dem, was Du so formatieren willst:

Code: 
<style type="text/css">
#bilderband { 
  height: 100px;
  text-align: left;
  overflow:auto;
}
#bilderband img {
   border: none;
   float: left;
   height: 100px;
}
#bilderband a {
   float: left;
}
</style>

Code: 
<tr bgcolor="#333333">
<td align="center" height="100" colspan="4">
<div id="bilderband">
  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***147x100.jpg" alt="***"></a>
  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***145x100.jpg" alt="***"></a>
</div>
</td>
</tr>
 
Könntest Du vielleicht auf die Schnelle erläutern wieso "bilderband img" und "bilderband a"???
Verstehe den Sinn nicht so ganz?

Ok, vom Quelltext sieht das ganze auf jeden Fall eleganter aus und ich erspare mir wie es aussieht ne menge copy und paste Arbeit. Danke schonmal dafür ;-).

Der Scrollbalken ist aber immernoch vertikal und nicht horizontal. Sprich der Code sieht besser aus, aber das Prob besteht immernoch... :-(
 
Zuletzt bearbeitet:
Ok hab es kapiert, war nur im ersten Moment ein wenig verwirrt. :-D

Trotzdem scrollt die Ebene nur vertikal...
 
Deinen Tabellenzellen könnten andere CSS-Angaben zugeordnet sein
den a oder img ebenfalls (an anderer Stelle und ebenfalls mit einer id verbunden)

Du musst also schon raus mit Deinem Geheimnis.
 
wenn Du das hast
<link rel="stylesheet" href="mm_sportsclub.css" type="text/css">

brauchst Du das nicht mehr
@import url("css/mm_sportsclub_000.css");

die Dateien sind identisch

gib Deiner Tabellenzelle mit den Spielern darin mal eine id oder class

Code: 
<style type="text/css">
#spieler {
  padding:0;
  height: 100px;
 background-color:#333;
  text-align:center;
}
/*oder  */
.spieler {
  padding:0;
  height: 100px;
  background-color:#333;
  text-align:center;
}
</style>

<tr>
<td colspan="4" id="spieler"><!-- oder: class="spieler" -->
<div id="bilderband">
  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***147x100.jpg" alt="***"></a>
  <a href="jugend/u8/***.jpg" target="mitte"><img src="jugend/u8/thumbs/***145x100.jpg" alt="***"></a>
</div>
</td>
</tr>
und füge Deinen #bildband ein nowrap hinzu
Code: 
#bilderband { 
  height: 100px;
  text-align: left;
  overflow:auto;
white-space:nowrap;
}

wenn's dann klappt, wird Dein Bildband allerdings zu flach sein (Bildhöhe plus Scrollbalkenbreite horizontal = ca. 120px)
Du musst also die 100px-Angaben ca. in 120px-Angaben für die Zelle "spieler" und das div "bildband" abändern,
falls Deine Spieler immer rechts übers Ziel hinausschießen
(der ist von mir, ist der nicht gut
lachwein.gif
)
 
Zuletzt bearbeitet:
LOL.
Ist zwar nicht meine Truppe, aber Trotzdem sind diese Jungs einfach nur spitze.
Ich bin lediglich ein Spieler der Zweiten. Ich habe noch keine Zeit um eine Jugend zu übernehmen.
Schliesslich muss sich ja auch einer um die Seite kümmern. ;-)

Leider klappt es immer noch nicht. Hmm was mach ich falsch???
Ich glaube das wird ne lange Nacht für mich.
 
Ich schau's mir mal detaillierter an, wenn die so gut sind wie Du schreibst, soll'n se ja auch ins rechte Licht gerückt werden. ;)

Melde mich dann, ob ich was habe...
 
Mein Fehler, sorry.

Ich war mir sicher, erst kürzlich etwas gehabt zu haben, was horizontal scrollt (ohne Javascript).
Aber das war die Scrollleiste des body, nicht des div!
Das macht bei diesem flachen div so weit oben keinen Sinn.

das hier funzt mit OB7.5+ und geckos wie etwa FF1.5+, Seamonkey1.0+
Code: 
<style type="text/css">
* html #bilderband {
  width: 768px;
  height: 120px;
}
#bilderband {
  white-space: nowrap;
  overflow: auto;
}
#bilderband img {
  border: none;
  height: 100px;
}
#spieler {
  background-color: #333;
  text-align:center;
}
</style>

Der erste Abschnitt
* html #bilderband {
width: 768px;
height: 120px;
}
ist nur für IE, er braucht eine künstliche Begrenzung der Breite.
Hier gibt es sicherlich noch CSS-Tricks für IE6 wie 7, aber dafür sind andere die Spezis.
 
Ähmm, hab da vielleicht doch ne Lösung:

Code: 
<style type="text/css">
* html #container {
  position: relative;
  left: -50%;
  top: -50%;
}
* html #bilderband {
  position: absolute;
  width: 100%;
  height: 120px;
}
* html #spieler {
  height: 120px;
}
#bilderband {
  white-space: nowrap;
  overflow: auto;
}
#bilderband img {
  border: none;
  height: 100px;
}
#spieler {
  background-color: #333;
  text-align:center;
}
</style>
Code: 
  <td id="spieler" colspan="4">
    <div id="container">
    <div id="bilderband">
      <A href="http://www.tusposaarn.de/jugend/u8/AaronKeffel.jpg" target="mitte"><img src="jugend/u8/thumbs/AaronKeffel147x100.jpg" alt="AaronKeffel"></a>
<!-- [...] -->
    </div>
    </div>
  </td>
In IE7 funzt es, kann das mal bitte jemand in IE6 testen?
(ich traue meinem nicht mehr, seitdem ich IE7 ebenfalls installiert habe.)
Vielleicht Du selbst, techno?
 
Zuletzt bearbeitet:
So, und noch ne Kleinigkeit:

Überlege Dir mal, den Austausch von
<td colspan="2" nowrap><div align="center"><WebAssist_Template_Editable name="SiteName"></WebAssist_Template_Editable></div> <WebAssist_Template_Editable name="ShortDescription"><img src="images/Banner4_009.jpg" width="900" height="103"> </WebAssist_Template_Editable></td>

mit

#banner {
background-image: url("images/Banner4_009.jpg");
background-repeat: no-repeat;
height: 103px;
}

und

<td colspan="2" id="banner"> </td>

dann haben auch 800x600-Bildschirme keine horizontale Scrolleiste am unteren Bildschirmrand.
 
Moin.
Danke für die Tipps. Werde sie heute noch bestimmt austesten und mich heute Abend wieder melden und berichten wie es denn geklappt hat ;-).

Die Idee mit dem Banner werde ich direkt mal ausprobieren sollte es so aussehen wie ich es mir vorstelle, dann wartet gewaltig viel Arbeit auf mich ;-)

Vielen vielen Dank für Deine/Eure Mühe!!!
 
So hab die Sachen jetzt eingebaut und ich bin begeistert!!!
Das ist mal ne absolut geile Lösung sieht sogar im Quellcode sehr elegant aus *freu*

Tja, da werde ich die anderen htmls der Homepage überarbeiten müssen. hihi

DankeDanköDangge!!!

Das mit dem container und den divs find ich super.

Eine Frage habe ich da aber trotzdem noch: was hat das mit "*html #bla" auf sich? Wie ist das zu verstehen?
 
techno schrieb:
Eine Frage habe ich da aber trotzdem noch: was hat das mit "*html #bla" auf sich? Wie ist das zu verstehen?
Zum Vergrößern anklicken....

Das ist ein sogenannter CSS-Hack und damit eine Browserweiche, man umgeht eigentlich gültige CSS-Regeln.
MS behauptet, mit IE7 sei das nicht mehr nötig... haha.

Das Schema: Selektor {Eigenschaft:Wert}

Wenn nun der erste Selektor html lautet, kann sich keiner mehr drumherum befinden.
Erinnere Dich:
#bilderband img {...} meint alle img in #bilderband
* wiederum steht für alle HTML-Elemente

* html ... {...} macht also eigentlich keinen Sinn, weshalb sich andere Browser (als IE) auch nicht drum kümmern, denn was soll um html herum sein?

techno schrieb:
DankeDanköDangge!!!
Zum Vergrößern anklicken....

Bitte,Büttö, bidde ;)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben