Anzeige

IMG-Tag

IMG-Tag | PSD-Tutorials.de

Erstellt von redbull2906, 26.05.2009.

  1. redbull2906

    redbull2906 Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2007
    Beiträge:
    170
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Illustrator
    Kameratyp:
    Nikon D60 & Nikon D7000
    IMG-Tag
    Hallo Leute,

    habe mir gerade eine Java-Slideshow aus einem anderen Thread angesehen - soweit so gut.
    Wie schaff ich es denn das meine <img>-Tags nicht untereinander sonder nebeneinander angeordnet sind? Welche CSS anweisung wäre dafür geeignet? hab es mit display:inline probiert - aber negativ

    Danke
     
    #1      
  2. Fanatic

    Fanatic Aktives Mitglied

    Dabei seit:
    27.09.2005
    Beiträge:
    370
    Geschlecht:
    männlich
    Ort:
    Haiming/Tirol/Österreich
    Software:
    Adobe CS3 Master Collection / MS VS 2005 Prof. / Cinema 4D R10 Production Bundle
    Kameratyp:
    Canon EOS 400D
    IMG-Tag
    AW: IMG-Tag

    "float" heißt das stichwort....
     
    #2      
  3. redbull2906

    redbull2906 Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2007
    Beiträge:
    170
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Illustrator
    Kameratyp:
    Nikon D60 & Nikon D7000
    IMG-Tag
    AW: IMG-Tag

    Jap, an <float> hatte ich auch gedacht aber wollt auch net so wirklich
     
    #3      
  4. jojoho

    jojoho C4D Benutzer

    Dabei seit:
    04.08.2007
    Beiträge:
    100
    Geschlecht:
    männlich
    Ort:
    Süddeutschland
    Software:
    C4D R10, PSD CS3
    Kameratyp:
    DSLR: Canon EOS 400D
    IMG-Tag
    AW: IMG-Tag

    Wie hast dus denn gemacht? einfach mal ein style="float:left;" in die imgs
     
    #4      
  5. redbull2906

    redbull2906 Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2007
    Beiträge:
    170
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Illustrator
    Kameratyp:
    Nikon D60 & Nikon D7000
    IMG-Tag
    AW: IMG-Tag

    Hier mal mein Code bis jetzt
    HTML:
    1. <style type="text/css">
    2. #galery{width:850px;}
    3. #show{overflow:hidden;}
    4. .lft{float:left;}
    5. .rht{float:right;}
    6. .pic{float:left;}
    7. var scrollStep=1;
    8. var timer;
    9.  
    10. function scrollDivLeft(){
    11.   clearTimeout(timer);
    12.   d=document.getElementById('show');
    13.   d.scrollLeft+=scrollStep;
    14.   timer=setTimeout("scrollDivLeft()",10);
    15. }
    16.  
    17. function scrollDivRight(){
    18.   clearTimeout(timer);
    19.   d=document.getElementById('show');
    20.   d.scrollLeft-=scrollStep;
    21.   timer=setTimeout("scrollDivRight()",10);
    22. }
    23.  
    24. function stopMe(){
    25.   clearTimeout(timer);
    26. }
    27. <div id="galery">
    28. <img class="lft" src="arrow_lft.jpg" onmouseover="javascript:scrollDivLeft();" onmouseout="stopMe()"/>
    29. <img class="rht" src="arrow_rht.jpg" onmouseover="javascript:scrollDivRight();" onmouseout="stopMe()"/>
    30. <div id="show">
    31. <img class="pic" src="fussballer.jpg" />
    32. <img class="pic" src="fussballer.jpg" />
    33. </div>
    34. </div>
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    IMG-Tag
    AW: IMG-Tag

    da imgs inline elemente ind, werden sie auch nebeneinander angezeigt, wenn sie nicht durch ein br umgebrochen werden, und im umhüllenden Element genug platz ist.
     
    #6      
  7. redbull2906

    redbull2906 Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2007
    Beiträge:
    170
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Illustrator
    Kameratyp:
    Nikon D60 & Nikon D7000
    IMG-Tag
    AW: IMG-Tag

    soweit klar - da aber mehr als 2 Bilder da rein kommen und ich das ja mim java per onmouse durchlaufen will ist mir jetzt net ganz klar wie ich das umsetzen soll
     
    #7      
  8. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    IMG-Tag
    AW: IMG-Tag

    Gib mal dem div 'ne feste Größe und nowrap - Bsp.:

    Code (Text):
    1. #show{height:150px; width:500px; white-space:nowrap; overflow:hidden;}
     
    #8      
  9. redbull2906

    redbull2906 Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2007
    Beiträge:
    170
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Illustrator
    Kameratyp:
    Nikon D60 & Nikon D7000
    IMG-Tag
    AW: IMG-Tag

    thanks a lot - das war es!
    Vielen vielen Dank

    Die funktionsweise von "White-space" kannte ich bis dato noch nicht - les mich da mal durch - nur so lernt man
     
    #9      
  10. FotoJuli

    FotoJuli starter

    Dabei seit:
    19.05.2009
    Beiträge:
    434
    Geschlecht:
    weiblich
    Ort:
    Leipzig
    Software:
    PS CS 3
    Kameratyp:
    D SLR Canon EOS 60D
    IMG-Tag
    AW: IMG-Tag

    gut das ich gerade dieses thema gefunden habe! diese frage hat mir heute auch jemand gestellt ich konnte sie bis jetzt nicht beantworten dabei lag es auf der hand!

    danke
     
    #10      
  11. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    IMG-Tag
    AW: IMG-Tag

    Mit verlaub hat die white-space & overflow notation hier nichts verloren.
     
    #11      
  12. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    IMG-Tag
    AW: IMG-Tag

    Was soll das denn? Gib 'ne Alternative oder wenn du keine hast: verkneif dir den Kommentar. Der ist echt so unnötig wie ein Kropf. Nur weil auf dem Shampoo "for Woman" steht darf ich es jetzt nicht benutzen, wo ich doch kein anderes zur Hand hab? Oder anders, nur weil SELFHTML schreibt :"wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll" heißt das doch noch lang nicht, dass ich das für andere außer Textumbrüche nicht verwenden kann. In anderen Quellen steht nur Zeilenumbruch, warum sollt ich es nicht auch dafür verwenden? Und ja, auch Bilder stehen in einer Zeile, siehst du spätestens dann, wenn du Text und Bilder ohne extra-Formatierung "mischst".
     
    #12      
  13. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    IMG-Tag
    AW: IMG-Tag

    och ich hab schon eine nur bin ich davon ausgegangen, dass der TE diese nicht haben moechte, da er mit der gebrachten Loesung zufrieden zu sein scheint. Das sollte mehr ein Hinweis fuer dich selber sein.

    Zu der geforderten Loesung:
    Das zweite Bild(mit den Pfeilen, vermute ich) einfach unter den Container mit den Bildern schieben, danach ein clearendes Element oder ueber selfclearing-methode als letztes Element innerhalb des Galery-Containers und den beiden Bildern(mit den Pfeilen) und dem Inhaltscontainer der Galeriebilder ein float nach links mitgeben und die Sache ist geritzt ohne feste angaben fuer den Inhaltscontainer.

    Ich hab hier nur Probleme bei der festen Breiten -bzw. Hoehenangabe gesehen .. nichts worueber man jetzt die Integritaet von selfHTML und Konsorten ankratzen muesste, weil ich selber eh wenig dort vorbeischau und nicht genau weiss, was dort ueber gewisse Elemente notiert ist.
     
    #13      
x
×
×