Nested Sortables - Style with CSS

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

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

Απάντηση
kapoios001
Δημοσιεύσεις: 403
Εγγραφή: 17 Φεβ 2011 12:26

Nested Sortables - Style with CSS

Δημοσίευση από kapoios001 » 24 Ιουν 2011 14:10

Γεια σας,

Χρησιμοποιώ το http://code.google.com/p/nestedsortable ... umentation για να κάνω με jQuery ένα Sortable list που θα αποτελείται από ul και li items.

Το πρόβλημά μου είναι στο CSS. Το CSS μου είναι αυτό:

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

/* sortable */
.helper {border:1px dashed red;}
.categories .category ul {margin-left:10px;font-color:red;}
.categories .category li {background:transparent url("img/node2.gif") 0 0 no-repeat; padding:2px 0px 2px 0px; margin:0px; cursor:move; padding-left:8px}
.categories.level0 li {padding-left:20px;background:transparent url("img/level0.png") 0 2px no-repeat}
.categories .category li {background:transparent url("img/level0.png") 0 0 no-repeat}
.categories .category ul li {background:transparent url("img/level1.png") 0 0 no-repeat}
.categories .category ul ul li {background:transparent url("img/level2.png") 0 0 no-repeat}
.categories .category ul ul ul li {background:transparent url("img/level3.png") 0 0 no-repeat}
.categories .category ul ul ul ul li {background:transparent url("img/level4.png") 0 0 no-repeat}
.categories .category ul ul ul ul ul li {background:transparent url("img/level5.png") 0 0 no-repeat}
.categories .category span.name {border-bottom:1px solid #ccc; display:block; padding-bottom:5px; padding-left:15px; font-size:14px }
.categories .category ul span.name {font-size:11px }
.categories .category ul span.name b {font-weight:normal}
li {list-style:none;}
Και ο κώδικας που παράγετε από το script είναι αυτού του τύπου:

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

<ul id="categories" class="categories level0">
	<li class="category">
		<div class='sort-handle'><span class="name"><b>Folder 1</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 2</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>Folder 1</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 1</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 2</b></span></div>
	</li>
</ul>
To αποτέλεσμα είναι στην εικόνα 1 (εμφανίζονται οι σωστοί αριθμοί ανάλογα με το level που τα μετακινώ).

Ενώ αν βάλω κι άλλα ul μέσα στο

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

<ul id="categories" class="categories level0">
δεν μου εμφανίζει σωστά τους αριθμούς μπροστά (εικόνα 2).

Π.χ. αυτό δεν το εμφανίζει σωστά:

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


<ul id="categories" class="categories level0">
	<li class="category">
		<div class='sort-handle'><span class="name"><b>Folder 1</b></span></div>
	</li>

	<ul class="categories">
        <li class="category">
            <div class='sort-handle'><span class="name"><b>File 1.2</b></span></div>
        </li>

	<ul class="categories">
        <li class="category">
            <div class='sort-handle'><span class="name"><b>File 1.3</b></span></div>
        </li>
	</ul>


	</ul>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 2</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>Folder 1</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 1</b></span></div>
	</li>

	<li class="category">
		<div class='sort-handle'><span class="name"><b>File 2</b></span></div>
	</li>
</ul>
Σίγουρα είναι κάτι με το CSS που πρέπει να αλλάξω. Έχω κάνει πολλές δοκιμές αλλά δεν κατάφερα κάτι ακόμα.

Παρακαλώ δώστε μου τα φώτα σας.

Ευχαριστώ εκ των προταίρων.
Συνημμένα
eikona1.png
Εικόνα 1
(16.28 KiB) Μεταφορτώθηκε 237 φορές
eikona2.png
Εικόνα 2
(17.35 KiB) Μεταφορτώθηκε 238 φορές

Απάντηση

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

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

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