zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden icon slidebar nur eine Zeile

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.03.2013, 08:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.01.2007
Ort: Kunming Yunnan China
Beiträge: 19
heinzel befindet sich auf einem aufstrebenden Ast
Standard 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>
Cheers,
Dirk
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.03.2013, 09:29
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.03.2013, 10:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Geändert von fricca (06.03.2013 um 10:49 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2013, 05:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.01.2007
Ort: Kunming Yunnan China
Beiträge: 19
heinzel befindet sich auf einem aufstrebenden Ast
Daumen hoch 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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:22 Uhr.