✔ Portfolio mit horizontaler Scrollbar

Augustiner

Augustiner

Grünschnabel
Hallo zusammen,
ich bin derzeit dabei mir ein kleines Portfolio für einen potentiellen Praktikumsplatz mittels cargocollective zu erstellen.

Der eigentliche Content wird wie folgt eingebunden:
http://www.grabup.com/uploads/950ad7c7b77311c749554b5d569af1ea.jpg

Ich möchte die Arbeiten allerdings nicht untereinander präsentieren, sondern nebeneinander mit einem Frame (?), z.B. so (sry, grad kein besseres Beispiel gefunden). Die Bilder sollen über Flickr eingebunden werden; das erspart mir die Bilder erst bei cargocollective hochladen wollen.

Hat hier jemand eine Ahnung, wie ich sowas anstelle?
 
Hi,

hier ein kleines Beispiel:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-04-29">

<title>tutorials.de | demo_Augustiner</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#scrollBox {
position:relative;
overflow:hidden;
overflow-x:scroll;
height:220px;
width:100%;
border-top:1px solid #000;
border-bottom:1px solid #000;
white-space:nowrap;
}
#scrollBox ul {
position:absolute;
list-style:none;
white-space:nowrap;
}
#scrollBox ul li {
display:inline;
}
-->
</style>

</head>
<body>

<div id="scrollBox">
     <ul>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
         <li><img src="[Grafik-URI]" alt="" width="400" height="200"></li>
     </ul>
</div>

</body>
</html>


mfg Maik
 
Danke. Aber leider scrollt da jetzt nichts. :(

Code: 
<div id="scrollBox">
     <ul>
         <li><img src="http://farm4.static.flickr.com/3644/3484822350_85372b9411.jpg"></li>
         <li><img src="http://www.tutorials.de/forum/css/html/html/..."></li>
         <li><img src="http://farm4.static.flickr.com/3306/3481124604_f5d85ba829.jpg"></li>
         <li><img src="http://farm4.static.flickr.com/3609/3476405289_3b99a5bc47.jpg"></li>
     </ul>
http://www.grabup.com/uploads/18b3bf9688f6167676d5f535abcb3d3c.jpg

Und noch 2 Sachen:
a) würd ich gern die schwarze Linie oben weghaben .. und ..
b) hätte ich gerne ein paar mehr px Platz zwischen Scrollbar und Bildern, b
http://www.grabup.com/uploads/b043215d1e30a3d3b6369cbf75738d88.jpg

Bzw. wie definiere ich im Allgemeinen die Größe, bzw. die Abstände zwischen den einzelnen Bildern?
 
Wenn da nichts scrollt, sind entgegen meinem Beispiel zu wenig Bilder vorhanden, deren Gesamtbreite die Breite der umschliessenden Box überschreitet ;)

Du kannst aber auch die von mir frei gewählte Breite für #scrollBox entsprechend verringern - z.B. width:350px.

@ a) Entferne die border-Deklarationen für #scrollBox.

@ b) Erhöhe den height-Wert für #scrollBox nach deinen Vorstellungen.

Und zur letzten Frage bzgl. der Abstände zwischen den Bildern:
CSS: 
#scrollBox ul li img {
margin-left:20px;
}

mfg Maik
 
Ok, wenn ich die width auf 200px runtermache scrollt das jetzt wohl. Allerdings wird nur ein Bild angezeigt. :( Wie kann ich das lösen?
 
Ist es nicht logisch, dass wenn der Viewport in der Breite auf 200px runterskaliert wird, darin zunächst nur ein Bild zu sehen ist, und die übrigen durch das Scrollen im Viewport erscheinen?

mfg Maik
 
Dann poste mal den Link zu deiner Seite anstelle des Screenshots, aus dem sich die Ursache nicht ablesen lässt, denn in meinem Beispiel tauchen derartige Probleme überhaupt nicht auf.

mfg Maik
 
Darf man fragen, wohin du den HTML-Quellcode der Scrollbox ausgelagert hast, denn im Seitenquelltext ist er nicht auffindbar.

In den Grafikinformationen zur Seite wird auch nur dieses eine Bild aus der Scrollbox aufgelistet.

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

Neue Beiträge

Zurück