06.03.2013, 08:53
|
|||
|
|||
icon slidebar nur eine Zeile
Hallo,
Ich brauche wiedermal eure Hilfe. Ich programmiere gerade mein erste slideshow. hierher möchte ich in einer flachen , in der Breite und Höhe begrenzten, div viele icons in NUR einer Zeile darstellen , und weil die div begrenzt ist und es sehr viele icons sind soll man horizontal scrollen können. Mein Problem ist, das ich es nicht schaffe, das es nur eine Zeile bleibt. hier ein Auszug aus meinem Fehlversuch: Code:
<style>
#slidebar img
{
float:left;
margin:2px;
vertical-align:middle;
}
</style>
<div id="slidebar" style="height:110px;width:400px;
overflow-x:scroll;overflow-y:hidden;
border-style:solid;border-width:1px;border-color:black; " >
<img src="./pictures/before-after 6 beers rotated-icon.jpg" style="" alt="">
<img src="./pictures/all03-icon.png" style="" alt="">
<img src="./pictures/eyesonly-cut-wide-icon.png" style="" alt="">
<img src="./pictures/KunmingD-oval-01a-icon.png" style="" alt="">
<img src="./pictures/image-50062-galleryV9-ogdh-icon.jpg" style="" alt="">
<img src="./pictures/image-446540-galleryV9-iodm-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
<img src="./pictures/HBrJwrp6_Pxgen_r_700xA-icon.jpg" style="" alt="">
</div>
Dirk 
|
| Sponsored Links |
|
06.03.2013, 09:29
|
||||
|
||||
|
Guten Morgen,
du könntest das Ganze lösen, indem du ein div-Element mit einer festen Breite (Gesamtbreite der Icons) dazwischenschiebst und das übergeordnete div-Element ebenfalls mit einer festen Breite und einem overflow-x:scroll ausstattest. Dieses Beispiel soll das Ganze demonstrieren. Aus Sicht der Usability rate ich allerdings davon ab. Besser ist es, wenn der Besucher alle Icons ungehindert, ohne scrollen zu müssen, betrachten kann - dafür eignet sich eine simple Box relativ gut. Font-Awesome zeigt wie's geht. Mit freundlichen Grüßen, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
|
| Sponsored Links |
|
06.03.2013, 10:46
|
|||
|
|||
|
Bitte keine Multipostings.
http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html icon scrollbar nur eine Zeile http://forum.de.selfhtml.org/?t=212962&m=1455397
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (06.03.2013 um 10:49 Uhr)
|
|
08.03.2013, 05:14
|
|||
|
|||
Danke für die Hilfe & Sorry fürs Multiposting/meine Gedankenlosigkeit
Danke für die Hilfe,
"float:left" raus und "white-space:nowrap;" ins style von der div Es funktioniert! @lottikarotti - das mit den 2 divs ist auf jeden Fall eine Lösung. Danke - das icon carousel ist sehr interessant! Werds mir merken. Und in meiner zweiten Slideshow als Hilfe verwenden. In meiner ersten Slideshow wollte ich nur CSS verwenden. Ich bin noch am CCS und javascript lernen/einarbeiten. meine nächste slideshow will ich dann mit javascript realisieren @fricca auch danke für deine Antwort und den guten Link/Verweis Ich habe mir nicht sehr viel Gedanken gemacht. nur das es eben so schneller zu einer Lösung kommen sollte. Ich werde meine Multipostings auf jeden Fall reduzieren! insbesondere wenn es sich um kleine Problemchen handelt. Bei mir kommt erschwerend/verschlimmernd hinzu, das ich zu langsam antworte! Habe mir zu wenig Gedanken gemacht! Werde mich bessern. Versprochen! Nochmals Danke an alle Leser und Antworter, Dirk
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Neues Karriereportal (Bitte um Feedback) | ThomasE | Site- und Layoutcheck | 23 | 02.01.2012 16:44 |
| Sitecheck für Urlaubsunterkunft in Kroatien | Miso | Site- und Layoutcheck | 11 | 19.10.2008 20:53 |
| Festanstellung bei der Xing AG als Web Developer (HTML/CSS) | NEOX | Offtopic | 10 | 17.07.2008 17:11 |
| Pre-Tag mit overflow: auto - Bug? (IE) | RomanM | CSS | 3 | 26.12.2007 18:21 |
| Warnungen beim Validieren | Uschi | CSS | 2 | 23.09.2005 19:18 |
Linear-Darstellung
