✔ Horizontaler Scroll mit Overflow

legio_x

legio_x

Mitglied
Bin schonmal gespannt auf eure Hilfe. Mach das zwar nicht zum ersten Mal, doch hab grad nen richtigen blackout. Ich möchte die <ul> in einer festen Größe. Innerhalb der <ul> sollen Bilder HORIZONTAL angeordnet werden. Da iss schon das erste problem bei meinem Code, er bricht andauernd um. Durch diese horizontalen Bidler soll mit der X-Scrollbar waagerecht durchgescrollt werden (y-Scrollbar nicht visible). Könnt ihr mir helfen?


HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css"> 
ul {
    overflow: scroll;
    overflow-y: hidden;
    height: 400px;
    width: 800px;
    border: 1px solid #000;
}

li {
    border: 1px solid #000;
    float: left;
    width: 500px;
}
</style>

</head>

<body >
  <ul>
    <li><img src="Sonnenuntergang_031.jpg" width="500px"/></li>
    <li><img src="Sonnenuntergang_031.jpg" width="500px"/></li>
  </ul>
</body>
</html>
 
Hi,

das wäre mein Vorschlag zur Umsetzung des Konzepts:

Code: 
<div id="scrollBox">
     <ul>
         <li><img src="Sonnenuntergang_031.jpg" width="500" /></li>
         <li><img src="Sonnenuntergang_031.jpg" width="500" /></li>
     </ul>
</div>
Code: 
div#scrollBox {
overflow:auto;
overflow-y:hidden;
width:800px;
height:400px;
border:1px solid #000;
}

div#scrollBox ul {
width:1004px;
height:400px;
margin:0;
padding:0;
}

div#scrollBox li {
display:inline;
}

div#scrollBox li img {
float:left;
border:1px solid #000;
}
mfg Maik
 
Genau das ist es. Ein einziges Problem verbleibt aber immer noch: im IE6 rutschen die Bilder wieder untereinander.
 
Wenn ich das HTML-Dokument dem IE6 im standardkonformen Darstellungsmodus übergebe, richtet er die Bilder nebeneinander aus.

mfg Maik
 
Ah, jetzt seh ich, wo das Problem liegt. Du rechnest mit festen größen bei der Weite der ul (1004px). ich möchte aber dynamisch Bilder unterschiedlicher Größen dort hineinladen lassen, sodass ich keine feste Weite vergeben kann. Habs auch schon mit auto und 100% probiert...:eek:( Klappt net!

Die Bilder erscheinen untereinander, sobald die fetse weite herausgenommen wird.
 
Das Konzept funktioniert leider nur, wenn die Bilder in einem Element eingebettet sind, dessen Breite größer, als die der Scrollbox ist.

mfg Maik
 
Meine letzte Aussage war nicht nur auf meinen gestrigen Vorschlag bezogen, sondern grundsätzlich gemeint.

Eventuell solltest du dann mit Hilfe eines Scripts die Grafikbreiten ermitteln, und die Summe an das Listenelement übergeben - [phpf]getimagesize[/phpf] dürfte hierbei hilfreich sein.

mfg Maik
 
Falls das Thema hier noch zur Debatte steht, ich hab sowas Ähnliches mal gesehen, da war das folgendermaßen gemacht...

(ich hoffe du kannst nachvollziehen, wie es gemacht ist?!)

HTML: 
.slidernav {
background: url(../slidernav/slider_bg.jpg) repeat-x left bottom;
overflow: hidden;
position: relative;
margin: 0 0 10px 0;
height: 100px;
width: 721px;
border-top: 2px solid #fff;
border-bottom:  5px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
white-space:nowrap;overflow-x:scroll;
}
        
.slidernav UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
        
.slidernav UL LI {
display: inline;
}

Genau zu diesem Code da oben habe ich aber selbst noch eine Frage:
Wenn man das validieren möchte, heißt es "overflow: none" darf nicht sein (also bei ".slidernav UL")... was darf man da dann schreiben, damit es unverändert weiterhin funktioniert... overflow:hidden (?) oder entspräche das irgendeiner anderen Funktionsweise?

Freue mich über Tipps, weil ich doch unbedingt wollte, dass es valide ist.
 
Fantasmo hat gesagt.:
Genau zu diesem Code da oben habe ich aber selbst noch eine Frage:
Wenn man das validieren möchte, heißt es "overflow: none" darf nicht sein (also bei ".slidernav UL")... was darf man da dann schreiben, damit es unverändert weiterhin funktioniert... overflow:hidden (?) oder entspräche das irgendeiner anderen Funktionsweise?

Freue mich über Tipps, weil ich doch unbedingt wollte, dass es valide ist.
Zum Vergrößern anklicken....
Hi,

für die overflow-Eigenschaft sind folgende Werte vorgesehen:
  • visible
  • hidden
  • scroll
  • auto
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

Da offensichtlich das Beispiel mit einem nicht-regulären Eigenschaftswert funktioniert, ist davon auszugehen, dass diese overflow-Deklaration nicht benötigt wird, da der Browser sie in dieser Form überhaupt nicht zu interpretieren weiß.

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

Neue Beiträge

Zurück