Scroll Div Horizontally

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Scroll Div Horizontally

Δημοσίευση από dionisis71 » 17 Οκτ 2015 20:28

Καλησπέρα,

Προσπαθω να φτιάξω ένα div το οποίο θα κάνει scroll οριζόντια. Ο παρακάτω κώδικας δουλεύει όσο το #photos div έχει συγκεκριμένο width. Θα προτιμούσα το πλάτος του να είναι auto για να μπορούν να μπουν περισσότερες φωτογραφίες αλλά δυστυχώς όταν το αλλάζω σε auto δεν παίζει και δεν μπορώ να καταλάβω γιατί.

ευχαριστώ

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body&#123;
&#125;
#photos&#123;
    height&#58;530px;
    width&#58;100%;
    padding&#58;10px 0;
    background-color&#58;#fafafa;
    overflow&#58;auto;
	overflow-y&#58; hidden;
	<!-- white-space&#58; nowrap; -->
 &#125;
#photos div &#123;
    width&#58;2564px;
    padding&#58;0 10px;
 &#125;
img.photo&#123;
    border&#58;5px solid #fff;
    float&#58;left;
    display&#58;inline;
    margin-right&#58;10px;
 &#125;
</style>

</head>
<body>

<div id="photos">
<div>
<img src="http&#58;//cos.h-cdn.co/assets/cm/14/25/539f9f8887071_-_cos-bikini-ready-beauty-0511-4-de.jpg" class="photo" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" class="photo" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" class="photo" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" class="photo" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" class="photo" alt="">

</div>
</div>

</body>
</html>
[/code]

sibas
Honorary Member
Δημοσιεύσεις: 1851
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Scroll Div Horizontally

Δημοσίευση από sibas » 18 Οκτ 2015 12:57

υπάρχουν τουλάχιστον 2 τρόποι, ο ένας είναι να προσθέσεις τιμές width και height στις εικονές ώστε να "σπρώξει" το 100% για να λειτουργήσει (αλλά δεν λειτουργεί 100% σε όλους τους broswer),
ο άλλος είναι με την βοήθεια javascript, ένας απλός τρόπος με jquery είναι ο παρακάτω

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body&#123;
&#125;
#photos&#123;
    height&#58;530px;
    width&#58;100%;
    padding&#58;10px 0;
    background-color&#58;#fafafa;
    overflow&#58;auto;
    overflow-y&#58; hidden;

 &#125;
#holder &#123;
    width&#58;100%;
    padding&#58;10px;
 &#125;
img&#123;
	float&#58;left;
	border&#58;5px solid #ccc;
	margin-right&#58;10px;
&#125;
</style>

</head>
<body>
<div id="photos">
<div id="holder">
<img src="http&#58;//cos.h-cdn.co/assets/cm/14/25/539f9f8887071_-_cos-bikini-ready-beauty-0511-4-de.jpg"  alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" alt="">
<img src="http&#58;//cos.h-cdn.co/assets/cm/14/25/539f9f8887071_-_cos-bikini-ready-beauty-0511-4-de.jpg"  alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" alt="">
<img src="http&#58;//cos.h-cdn.co/assets/cm/14/25/539f9f8887071_-_cos-bikini-ready-beauty-0511-4-de.jpg"  alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" alt="">
<img src="http&#58;//cos.h-cdn.co/assets/cm/14/25/539f9f8887071_-_cos-bikini-ready-beauty-0511-4-de.jpg"  alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="http&#58;//docs.gimp.org/el/images/tutorials/quickie-jpeg-070.jpg" alt="">
<img src="https&#58;//www.cs.utah.edu/~mflatt/bumpy/jpegs/silverfish.jpg" alt="">
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
jQuery&#40;document&#41;.ready&#40;function&#40;$&#41;&#123;
var totalwidth = 0;
 $&#40;"#holder img"&#41;.each&#40;function&#40;&#41; &#123;
       totalwidth += $&#40;this&#41;.width&#40;&#41;+20; // το +20 χρειάζεται για το απαραίτητο space
	    $&#40;"#holder"&#41;.css&#40;'width', totalwidth  + 'px'&#41;;
  &#125;&#41;;
&#125;&#41;;
</script>
</body>
</html>
δεν είναι ολοκληρωμένη λύση θα πρέπει να το "δουλέψεις" για να είναι σωστό.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Scroll Div Horizontally

Δημοσίευση από dionisis71 » 18 Οκτ 2015 16:28

Σε ευχαριστώ για το post σου.. Η αλήθεια είναι ότι όσα παραδείγματα εχω δει προτείνουν λύση με javascript.

Δοκίμασα το παράδειγμα σου με κινητό και παίζει μια χαρά αντιθέτως όμως, στον υπολογιστή δεν δείχνει όλες τις φωτογραφίες. Αυτό εννοείς λέγοντας ότι δεν είναι ολοκληρωμένη λύση για όλους τους browsers;

Δοκιμασα με chrome και IE11

sibas
Honorary Member
Δημοσιεύσεις: 1851
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Scroll Div Horizontally

Δημοσίευση από sibas » 19 Οκτ 2015 10:50

δείχνει και στο pc κανονικά, απλά θα πρέπει να κάνεις refresh (την πρώτη φορά) και αυτό είναι το πρόβλημα που πρέπει να λύσεις.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες