ugrás a tartalomhoz

vízszintes scroll

aakosska · 2008. Május. 12. (H), 01.29
sziasztok
hogy oldható meg, hogy egymás mellé rakott 10 db képet (css: owerflow: scroll, display: block) stb. által ne függőlegesen, hanem vízszintesen scrollozza.
köszi
Ákos
 
1

overflow-x ?

a.d.a.m · 2008. Május. 12. (H), 12.21
szia,

esetleg az overflow-x css tulajdonságot próbáltad már?

A témáról többet olvashatsz itt, példákat találsz itt. Sajnos ezek angol nyelvű oldalak, de ha rákeresel biztos lesz magyar leírás is.

a.d.a.m
2

ez az

aakosska · 2008. Május. 19. (H), 10.34
köszi szépen, ezt kerestem!!
3

mégse megy

aakosska · 2008. Május. 21. (Sze), 00.45
helló
ez az overflow-x, y szépen megcsinálja a kis dobozt, de sehogy sem tudom elérni, hogy a képek egymás mellett jelenjenek meg, hiába van ott a dobozka, ők megtörnek a sor végén, és új sort kezdenek, vagy egymás alá kerülnek
köszi
4

Így probáltad már?

Ustak · 2008. Május. 21. (Sze), 08.45
<div class="kulso">
<div class="belso">
<img src="1.jpg" /><img src="2.jpg"><...../>
</div>
</div>

.kulso {
position:relative;
width:(amennyi képet akarsz egyszerre láttatni +margin a képnek)px;
height: (amekkoraakepmagassag+bottom-top-margin-paddingja a kepnek +20px a scrollbarnak)px;
overflow:scroll;
padding:0;
text-align:center;
z-index:2 //ie miatt kell csunya ie!
}

.kulso .belso {
position:relative;
width:amennyi az osszeskeped hossza)px
z-index:1;
}

.kulso .belso img {
float:left;
}

Valami ilyesmi, tehát magyarul a külsö kisebb divbe van a belső nagyobb div, ami a képeket foglalja magába, mintha egy nagyobb déglalapot tologatnál a kisebb téglalap belsejében.
Remélem működik :-)
6

Sajnos nekem így nem műxik,

elchy · 2009. Jan. 26. (H), 01.14
Sajnos nekem így nem műxik, mindenképpen megtörik valamiért a sorvég. Amit hasonlót találtam imigyen néz ki:
  1. <div class="textwidget">  
  2. <marquee direction="left"   
  3. width="362"   
  4. height="73"   
  5. onmouseover="this.stop()"   
  6. scrollamount="4"   
  7. onmouseout="this.start()"    
  8. align="left">  
  9. <img src="pic.jpg">  
  10. <img src="pic.jpg">  
  11. <img src="pic.jpg">  
  12. <img src="pic.jpg">  
  13. </marquee></div>  
tudom nem egészen az ami a probléma mindenesetre hathatós alternatiíva
7

:?

fchris82 · 2009. Jan. 26. (H), 02.29
Én csináltam már ilyet. A megoldás pofon egyszerű:
  1. ul#images {  
  2.     list-stylenone;  
  3.     height165px;  
  4.     width600px;  
  5.     overflow-x: scroll;  
  6.     overflow-y: hide;  
  7.     white-spacenowrap;  
  8. }  
  9.   
  10. ul#images li {  
  11.     displayinline;  
  12.     margin0 5px;  
  13. }  
A HTML fájlt pedig így kell megcsinálni:
  1. <ul id="images">  
  2.   <li><img src="vmi1.jpg" /></li>  
  3.   <li><img src="vmi2.jpg" /></li>  
  4.   ...  
  5. </ul>  
Ha az oldalon nem csak egyetlen ilyen van, akkor érdemes ID helyett CLASSt használni.
5

nem korszeru?

toro · 2008. Május. 21. (Sze), 09.20
esetleg csendben kerdezem: table?

egyszeruen a kod nem hosszabb, viszont nem kell hozza irni 10 oldal css-t
nem kell mindig forditva ulni a lora