Μυστήριο με float και λίστες

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

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

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Μυστήριο με float και λίστες

Δημοσίευση από skeftomilos » 05 Φεβ 2006 06:15

CSS σταυρόλεξο για δύσκολους λύτες. Η παρακάτω σελίδα έχει ένα floated div αριστερά και μια λίστα ως κύριο περιεχόμενο. Το floated στοιχείο σπρώχνει τη λίστα δεξιά, αλλά όχι όσο χρειάζεται για να φαίνονται και οι μπίλιες!

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

<html>
  <head>
    <title>CSS-List-Float-Issue</title>
    <style type="text/css">
      #sidebar &#123;
        width&#58; 200px;
        float&#58; left;
        background-color&#58; #dfdfdf; 
        opacity&#58; 0.75;
        filter&#58; alpha&#40;opacity=75&#41;;
      &#125;
    </style>
  </head>
  <body>
    <h2>CSS-List-Float-Issue</h2>
    <div id="sidebar">
      Alpha<br>
      Beta<br>
      Gamma<br>
      Delta<br>
    </div>
    <h4>First Three Numbers</h3>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
    <h4>Next Three Numbers</h4>
    <ol>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
  </body>
</html>
Εικόνα

Καμιά ιδέα;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από cherouvim » 05 Φεβ 2006 08:05

margin-right: 2em; sto #sidebar

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Μυστήριο με float και λίστες

Δημοσίευση από skeftomilos » 05 Φεβ 2006 16:49

Δε μας κάνει! Αυτό μαζί με τη λίστα σπρώχνει δεξιά και το κοινό κείμενο, την κεφαλίδα h4 στη συγκεκριμένη περίπτωση. :(
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από ThyClub » 05 Φεβ 2006 17:03

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

<html>
  <head>
    <title>CSS-List-Float-Issue</title>
    <style type="text/css">
      #sidebar &#123;
        width&#58; 200px;
        float&#58; left;

        background-color&#58; #dfdfdf;
        opacity&#58; 0.75;
        filter&#58; alpha&#40;opacity=75&#41;;
      &#125;
     ol,h4&#123;
padding-left&#58;200px;
&#125;
    </style>
??

Άβαταρ μέλους
shadow
Script Master
Δημοσιεύσεις: 606
Εγγραφή: 14 Απρ 2005 18:30

Μυστήριο με float και λίστες

Δημοσίευση από shadow » 05 Φεβ 2006 17:35

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

 ol&#123;list-style-position&#58;inside;&#125;
αλλά θα χάσεις τη στοίχιση εαν το στοιχείο της λίστας κανει wrap
Close your eyes
For your eyes will only tell the truth and the truth isnt what you want to see
In the dark, is it easy to pretend that the truth is it ought to be.
Programmers are programmers because they like to code

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27616
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από cordis » 05 Φεβ 2006 18:21

κάτι τέτοιο;

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

<html>
  <head>
    <title>CSS-List-Float-Issue</title>
    <style type="text/css">
      #sidebar &#123;
        width&#58; 200px;
        float&#58; left;
        background-color&#58; #dfdfdf;
        opacity&#58; 0.75;
        filter&#58; alpha&#40;opacity=75&#41;;
      &#125;
      #content  &#123;
        width&#58; 100%;
       &#125;
    </style>
  </head>
  <body>
    <h2>CSS-List-Float-Issue</h2>
    <div id="sidebar">
      Alpha<br>
      Beta<br>
      Gamma<br>
      Delta<br>
    </div>
    <div id="content">
    <h4>First Three Numbers</h3>
    </h4>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
    <h4>Next Three Numbers</h4>
    <ol>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
    </div>

  </body>
</html>
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Μυστήριο με float και λίστες

Δημοσίευση από patriot » 05 Φεβ 2006 18:52

Συγνώμη αλλά γιατί προσπαθείς να σπρώξεις την λίστα προς τα δεξιά (με margin-right στο #sidebar) αντί να σπρώξεις το κουτί προς τα αριστερά (με margin-left:10px; στην λίστα). Αν το σπρώξεις (το κουτί) στα αριστερά μιας και είναι ήδη τέρμα δεν θα πάει πουθενά. Η λίστα όμως θα απομακρυνθεί όσο θες εσύ...
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από milianos » 05 Φεβ 2006 19:11

Η αλήθεια είναι οτι δεν πολυκατάλαβα τι ζητάμε :lol: :lol:
Εδω μια εκδοχή και απο εμένα :D

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

<html> 
  <head> 
    <title>CSS-List-Float-Issue</title> 
    <style type="text/css">
    h2 &#123;
    font-size&#58; 1.5em;
    margin&#58; 0 0 0.7em; padding&#58; 0.3em;
    text-align&#58; center;
    background-color&#58; #DDF0FF;
    border&#58; 0px ridge silver;
  &#125;
 
      div#sidebar &#123; 
        width&#58; 12em; 
        float&#58; left;
        margin&#58; 0 0 1.0em; padding&#58; 0.75em; 
        background-color&#58; #dfdfdf;
        filter&#58; alpha&#40;opacity=75, finishopacity=0, style=1&#41;; /*only microsoft*/
      &#125;
    div#lista &#123;
    font-size&#58; 0.9em;
    float&#58; left; width&#58; 12em;
    background-color&#58; #fff; border&#58; 0px dashed silver;
   &#125;
   div#lista h4 &#123;
    font-size&#58; 1.0em;
    margin&#58; 0.2em 0.5em;
   &#125;
    </style> 
  </head> 
  <body> 
    <h2>CSS-List-Float-Issue</h2> 
    <div id="sidebar"> 
      Alpha<br> 
      Beta<br> 
      Gamma<br> 
      Delta<br> 
    </div>
    <div id="lista"> 
    <h4>First Three Numbers</h4> 
    <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
    </ol>
    </div>
    <div id="lista"> 
    <h4>Next Three Numbers</h4> 
    <ol> 
      <li>Four</li> 
      <li>Five</li> 
      <li>Six</li> 
    </ol>
    </div> 
  </body> 
</html>
Τελευταία επεξεργασία από το μέλος milianos την 05 Φεβ 2006 21:22, έχει επεξεργασθεί 2 φορές συνολικά.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Μυστήριο με float και λίστες

Δημοσίευση από patriot » 05 Φεβ 2006 19:41

Skeftomilos
Τι την θες και εσύ το bullet; Πέταξε το με ένα "list-style-type:none" να ησυχάσεις.... :kaloe: :kaloe:


milianos
milianos έγραψε:Η αλήθεια είναι οτι δεν πολυκατάλαβα τι ζητάμε :lol: :lol:
Εδω μια εκδοχή και απο εμένα :D

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

bla bla....
Εν ολίγοις: προσπαθούμε να φαίνεται το bullet των "First Three Numbers". Δηλ να μην είναι τόσο κοντά η λίστα τους με το #sidebar ώστε το sidebar να καλύπτει το bullet.

Πολύ απλή εμφανισιακή εκδοχή. Και χρήσιμη. Υπάρχει όμως ένα μικρό πράγμα που παρατήρησα στον κώδικα σου. Στο h2 λες: margin: 0 0 0.7em. Το W3 λέει ότι το 0 (μηδέν) ΔΕΝ ΠΡΕΠΕΙ να είναι μόνο του. Πρέπει να έχει και μία μονάδα μετρήσεως δίπλα του όποια και αν είναι αυτή (em, %, px κ.τ.λ) παρόλο που το μηδέν είναι... μήδεν και δεν σημαίνει τίποτα. Ενώ έτσι όπως το έγραψες εσύ δεν έχει. Δεν κατάλαβα γιατί. Απλά δεν το ήξερες αυτό ή έτσι όπως το έγραψες εννοείς ότι όλα είναι em μιας και em είναι το τελευταίο; Δηλ σημαίνει ότι άμα το τελευταίο είναι κάτι (οτιδήποτε) αυτό ισχύει και για τα επόμενα; Είναι δηλ μήπως κανένας css κανόνας αυτός;

ΥΓ: Tip για το safari με βάση το αποπάνω shortcut με τα margins: Κάπου διάβασα ότι ή τα margins ή τα borders (δυστυχώς δεν θυμάμαι σε ποιο από τα δύο) πρέπει να γράφονται ολόκληρα (π.χ: margin:0px στην καλύτερη περίπτωση αν όχι margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; και τα αντίστοιχα με τα borders) για να μην δημιουργείτε bug στο Safari μιας και safari έχει πρόβλημα με τα shortcuts. Άρα το αποπάνω που έγραψες θα είχε πρόβλημα. (Ναι είναι σπαστικό το ξέρω....). Ευτυχώς από την άλλη ειναι το μοναδικό shortcut πρόβλημα του safari μέχρι στιγμής (ή τουλάχιστον μέχρι όσο έχω εγώ διαβάσει)
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από milianos » 05 Φεβ 2006 20:12

patriot έγραψε:Πολύ απλή εμφανισιακή εκδοχή. Και χρήσιμη. Υπάρχει όμως ένα μικρό πράγμα που παρατήρησα στον κώδικα σου. Στο h2 λες: margin: 0 0 0.7em. Το W3 λέει ότι το 0 (μηδέν) ΔΕΝ ΠΡΕΠΕΙ να είναι μόνο του. Πρέπει να έχει και μία μονάδα μετρήσεως δίπλα του όποια και αν είναι αυτή (em, %, px κ.τ.λ) παρόλο που το μηδέν είναι... μήδεν και δεν σημαίνει τίποτα. Ενώ έτσι όπως το έγραψες εσύ δεν έχει. Δεν κατάλαβα γιατί. Απλά δεν το ήξερες αυτό ή έτσι όπως το έγραψες εννοείς ότι όλα είναι em μιας και em είναι το τελευταίο; Δηλ σημαίνει ότι άμα το τελευταίο είναι κάτι (οτιδήποτε) αυτό ισχύει και για τα επόμενα; Είναι δηλ μήπως κανένας css κανόνας αυτός;
Νομίζω στην καθημερινή πρακτική μπορούμε να δίνουμε αυτές τις τιμές και κατ'αυτόν τον τρόπο, δεν υπάρχει πρόβλημα συμβατότητας.
Appendix A. A sample style sheet for HTML 4.0

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Μυστήριο με float και λίστες

Δημοσίευση από skeftomilos » 06 Φεβ 2006 01:56

Ευχαριστώ για τις απαντήσεις. Δυστυχώς δεν έχει δοθεί ακόμα ικανοποιητική λύση. Το επιθυμητό αποτέλεσμα δε διαφέρει από το προβληματικό παρά στη θέση των στοιχείων 1 και 2 της λίστας. Δηλαδή είναι το παρακάτω (με λίγο PhotoPaint):

Εικόνα

Μπορεί ως επιλογή design να μη φαίνεται ιδιαίτερα κομψή αλλά έχει το πλεονέκτημα ότι δεν αφήνει κενό και ανεκμετάλλευτο το χώρο κάτω από τη side bar. Το περιεχόμενο είναι άφθονο και ξεπερνά σε ύψος την sidebar, και θέλουμε τότε να αναδιπλώνεται από κάτω της.

ThyClub, Cordis, η λύση που προτείνετε λύνει το πρόβλημα αλλά αλλοιώνει τον τρόπο παρουσίασης.

Shadow, και η δική σου λύση λύνει κάπως το πρόβλημα αλλά αλλοιώνει με άλλο τρόπο την παρουσίαση. Όταν το περιεχόμενο ενός list-item αναδιπλωθεί θα συμβεί η παρακάτω ανεπιθύμητη στοίχιση:

Εικόνα

Cherouvim, Milianos, εδώ σας θέλω, στα δύσκολα! :P

Patriot αν είναι να βγάλουμε τα bullets και να βάλουμε images τότε τι σόι CSS-μάστορες του γλυκού νερού είμαστε; :lol:
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από cherouvim » 06 Φεβ 2006 07:52

Einai profanes oti h ylopoihsh tis listas dimiourgei to provlima mias kai sto aplo arhiko layout ta bullets vriskontai se kseni periohi. To na kanei re-implement ti lista me background image kai text-indent i per-li margin den einai toso kaki idea (patriot).

Otan vreis ti lysi pes mas.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από cherouvim » 06 Φεβ 2006 07:56


Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Μυστήριο με float και λίστες

Δημοσίευση από milianos » 06 Φεβ 2006 13:06

Ενα άλυτο πρόβλημα??

Οπως φαίνεται για να τοποθετηθεί μια λίστα δεξιά απο ενα float : left Element πρέπει αυτή να μπεί μέσα σε ένα <div> Element και μάλιστα να συνοδεύεται με την συμπληρωματική ιδιότητα display:table και για τους παλαιότερους Browser την ένδειξη <!--[if IE]><table><tr><td><![endif]->

Δηλαδή για να μην εξαφανίζονται οι κουκίδες η οι αριθμοί της λίστας, θα πρέπει αυτή να θεωρεί την δεξιά πλευρά του floatenden στοιχείου ως δική της αριστερή πλευρά και τέτοιες ιδιότητες έχουν οι πίνακες (Tables).

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

    <div style="display&#58;table">
	<!--&#91;if IE&#93;><table><tr><td><!&#91;endif&#93;-->
			<h4>First Three Numbers</h4>
			<ol>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
			</ol>
	<!--&#91;if IE&#93;></td></tr></table><!&#91;endif&#93;-->			
    </div>
Συνημμένα
Snap2.gif
Snap2.gif (3.57 KiB) Προβλήθηκε 2570 φορές

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

Μυστήριο με float και λίστες

Δημοσίευση από panosru » 10 Φεβ 2006 16:56

skeytomile malon brika thn eykairia na se bohthiso kai go! :P

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

<html>
  <head>
    <title>CSS-List-Float-Issue</title>
    <style type="text/css">
      #sidebar &#123;
        width&#58; 200px;
        float&#58; left;
        background-color&#58; #dfdfdf;
        opacity&#58; 0.75;
        filter&#58; alpha&#40;opacity=75&#41;;
      &#125;
	  .ftn  &#123; 
	  	list-style-position&#58;inside; 
	  &#125;
    </style>
  </head>
  <body>
    <h2>CSS-List-Float-Issue</h2>
    <div id="sidebar">
      Alpha<br>
      Beta<br>
      Gamma<br>
      Delta<br>
    </div>
    <h4>First Three Numbers</h4>
    <ol class="ftn">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
    <h4>Next Three Numbers</h4>
    <ol>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ol>
  </body>
</html>
elpizo na einai ayto ayto pou zhtas :roll:

Απάντηση

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

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

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