2 μικρά CSS προβλήματα

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

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

Απάντηση
ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 31 Ιαν 2008 17:53

Καλησπέρα.

μετρέποντας μια template από table to tabless layout, συνάντησα 2 προβλήματα που δεν έχω βρεί μέχρι τώρα λύση.

1. Θέλω να εφαρμόσω σε μια στήλη με 150px πλάτος, ένα background σαν κι αυτό: Εικόνα

Το ύψος της στήλης είναι μεταβαλλόμενο ανάλογα με το περιεχόμενο της.
Οπότε κάνω την εικόνα 150px width και 30px ύψος , της βάζω το attribute "repeat" σκέτο ώστε να επαναλαμβάνεται καθ' ύψος και πλάτος :

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

div#extra {
background:transparent url(images/bgextra.gif) repeat ;
float:left;
margin-left:-150px;
margin-top:4px;
padding:4px 0px 0px;
text-align:center;
width:150px;
}
και τα αποτελέσματα είναι οικτρά. Η εικόνα επαναλαμβάνεται λανθασμένα, χωρίς να δείχνει συνεχόμενη.
Θα μπορούσα να εφαρμόσω μια εικόνα με μεγάλο height, αλλά δεν θα ήταν ο ενδεδειγμένος τρόπος νομίζω.
Μπορεί κάποιος να μου δείξει τι κάνω λάθος;

2. Μέσα σε UL δεν μπορώ να έχω h1 h2 h3 hν tags. Αν θέλω να έχω τίτλους σε μια λίστα, ποιος είναι ο valid τρόπος ; Απλώς να μεγαλώνω με classes τις γραμματοσειρές των εκάστοτε <li> ;

Ευχαριστώ πολύ εκ των προταίρων.
Γίνονται πραγματάκια

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

2 μικρά CSS προβλήματα

Δημοσίευση από tsiger » 31 Ιαν 2008 20:43

1. Ελεγξες αν το αρχειο εικονας που εχει μπορει να κανει repeat; γιατι εγω το πηρα το εριξα στο Photoshop το εκανα pattern και φυσικα λογο λαθους διαστασεων δεν εμφανιζεται ως pattern αλλα οτι να ναι.

για τσιμπα αυτο
Εικόνα


2. τιτλους σε <li>? για δωσε ενα παραδειγμα τι θες να κανεις.

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 01 Φεβ 2008 07:07

Καλημέρα.
Ούτε με αυτό κάνει. Παρόλαυτα, έριξα ένα 20χ20 αρχείο .gif που χρησιμοποιείται σε άλλο site, κάνει repeat κανονικά, δεν έχει απλώς το πάχος που θέλω στις γραμμές.
Πρέπει δηλαδή να βρώ τις σωστές διαστάσεις ; Αυτό με πειράματα ή εξαρτάται από κάτι;Πρέπει να είναι τετράγονο πχ;

Όσον αφορά τους τίτλους μέσα στη λίστα.
Απλώς όταν έχω

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

<ul>  
   <li> <h4> mpla mpla </h4> </li>
<li> mpla mpla </li>
  </ul>
    
Δεν κάνει valid λέγοντας μου ότι δεν επιτρέπονται h elements μέσα στη λίστα.
Οπότε τι κάνω; Βάζω class στη λίστα και μορφοποιώ αναλόγως ;

Τις καλημέρες μου σε όλους.
Γίνονται πραγματάκια

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

2 μικρά CSS προβλήματα

Δημοσίευση από cherouvim » 01 Φεβ 2008 08:47

ALR έγραψε:Αυτό με πειράματα ή εξαρτάται από κάτι;Πρέπει να είναι τετράγονο πχ;
Ένα επαναλαμβανόμενο pattern μπορεί να έχει ότι διαστάσεις θέλεις.
5x30
40x40
100x25

Δοκίμασε με το offset του photoshop για να δεις αν ταίριαξε η ένωση.

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

2 μικρά CSS προβλήματα

Δημοσίευση από tsiger » 01 Φεβ 2008 11:26

Το pattern που σου εστειλα παιζει κανονικα. Αν θες να βγαλεις pattern πανε εδω:
http://www.stripegenerator.com/index.php?page=index

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 01 Φεβ 2008 15:27

Δεν ξέρω τι κάνω λάθος, το pattern που μου έστειλες tsiger δεν έπαιξε..
Άλλά το stripegenerator μου έκανε τη δουλειά , a thousand thank you!

Όσο για το δεύτερο σκέλος, απλά τρόμπαρα λίγο ( κλασσικά το τελευταίο διάστημα :p ).

Δεν είχα τοποθετήσει - ενώ έτσι νόμιζα - τα <h4> tags μέσα σε <li> , ενώ ήταν μέσα σε ένα <ul>.
Οπτικά το αποτέλεσμα ήταν ίδιο, αλλά δεν έκανε validate.

Ευχαριστώ και πάλι. Θα ενοχλήσω σύντομα ξανά :p
Γίνονται πραγματάκια

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 01 Φεβ 2008 15:36

Καλησπέρα σας ( τι σας είπα ; Θα ξανα ενοχλήσω σύντομα :p )

Όλα καλά, η template λειτουργεί με valid css xhtml , αλλά με 1 warning που ομολογώ πως δεν κατάλαβα ΤΙ-ΠΟ-ΤΑ από ότι λέει και παρακαλώ να διαφωτίσετε την κατάσταση.
Potential Issues

The following missing or conflicting information caused the validator to perform guesswork prior to validation. If the guess or fallback is incorrect, it may make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document.

1.

Warning Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
Μετά από λίγη Google Help διαπίστωσα ότι το Dreamweaver προσθέτει μια BOM Unicode signature ( που δεν έχω ιδέα περί τινος πρόκειται ) η οποία είναι υπεύθυνη για την φιλική παρατήρηση του html validator. Από τα properties της σελίδας λοιπόν ξε-τίκαρα την επιλογή και το πρόβλημα λύθηκε.
Επίσης, θέλω να αλλάξω εργαλείο που γράφω html και css, αλλά δεν έχω βρεί μέχρι στιγμής κάτι που μου αρέσει και έχω δοκιμάσει τα (notepad++ . style master , rapidcss, sothink html editor ).

Καλό απόγευμα σε όλους!
Γίνονται πραγματάκια

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

2 μικρά CSS προβλήματα

Δημοσίευση από cherouvim » 01 Φεβ 2008 15:46


ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 01 Φεβ 2008 15:53

Thanks Cherouvim :)
Γίνονται πραγματάκια

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

2 μικρά CSS προβλήματα

Δημοσίευση από skeftomilos » 01 Φεβ 2008 23:23

Έχει γράψει σχετικά και ο cpulse: Internationalization - Localization (i18n - l10n) (καλό βοήθημα)

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 03 Φεβ 2008 14:19

Πολύ καλό βοήθημα, τα λέει ξεκάθαρα. Να κάνω μια γενική ερώτηση; Είναι λάθος να γράφουμε κείμενο μέσα σε <li> ... </li> χωρίς να του προσδίδουμε ιδιότητα; Πχ είναι παράγραφος: <li> <p> .... </p> </li> . Τι λέτε;
Γίνονται πραγματάκια

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

2 μικρά CSS προβλήματα

Δημοσίευση από skeftomilos » 03 Φεβ 2008 18:41

Από άποψη validation δε νομίζω να είναι λάθος. Τα LI μπορούν να περιέχουν τόσο inline όσο και block elements.

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

2 μικρά CSS προβλήματα

Δημοσίευση από id12586 » 03 Φεβ 2008 21:33

tsiger έγραψε:Το pattern που σου εστειλα παιζει κανονικα. Αν θες να βγαλεις pattern πανε εδω:
http://www.stripegenerator.com/index.php?page=index
Άψογο λινκ! :victory:

Ευχαριστω!
Chris at your Services
ΕικόναSacame de Aqui

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

2 μικρά CSS προβλήματα

Δημοσίευση από ALR » 05 Φεβ 2008 23:20

Καλησπέρα. Θα ήθελα να ενοχλήσω για ακόμη μια φορά με ένα τόσο-δα tiny προβληματάκι. Έχω ένα .png το οποίο δεν παίζει στον ΙΕ7. Είναι το γνωστό transparency problem ; Ο κώδικας είναι ο εξής

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

background&#58;url&#40;"images/ebottom.png"&#41;bottom right no-repeat; 
Η εικόνα έιναι επάνω σε white background, δεν είναι transparent, αλλά αυτό είναι το οπτικό αποτέλεσμα γιατί white είναι το χρώμα του body. Ο IE δεν συνεργάζεται. What ever shall i do?
Γίνονται πραγματάκια

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

2 μικρά CSS προβλήματα

Δημοσίευση από emphasy » 10 Φεβ 2008 21:42

Εννοείς δεν εμφανίζει την εικόνα;;

Απάντηση

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

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

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