Img padding

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

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

Απάντηση
Άβαταρ μέλους
Dazed_and_confused
Δημοσιεύσεις: 743
Εγγραφή: 29 Νοέμ 2003 19:38
Τοποθεσία: Χίος, Θεσσαλονίκη
Επικοινωνία:

Img padding

Δημοσίευση από Dazed_and_confused » 30 Οκτ 2005 11:56

καλημέρα guyz, έχω μια απορία με το padding των images στον IE

προσπαθώ να βάλω ένα πλαισιάκι γύρω από μια εικόνα βάζοντας στο style της border και padding.

ενώ στον firefox φαίνεται κανονικά, στον IE φαίνεται μόνο το border.

καμία ιδέα?

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

Img padding

Δημοσίευση από patriot » 30 Οκτ 2005 21:01

Δεν γίνεται. Είναι bug του explorer. Και εγώ ήθελα αλλά.... Ίσως με την παλιά και κλασική html (vspace="0" και hspace="0") μπορείς να κάνεις κάτι αν θες... ίσως αφού έχεις μηδενίσει στο css το padding?
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Img padding

Δημοσίευση από cherouvim » 30 Οκτ 2005 23:44

harise mas ligo apo ton html kai css kodika na doume pos tha ginei... kai etimasou na mpeis sto kosmo tou kakou CSS support apo ton IE.

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

Img padding

Δημοσίευση από patriot » 30 Οκτ 2005 23:54

Xωρίς divs/ids, classes ή styles=""?

Άβαταρ μέλους
Dazed_and_confused
Δημοσιεύσεις: 743
Εγγραφή: 29 Νοέμ 2003 19:38
Τοποθεσία: Χίος, Θεσσαλονίκη
Επικοινωνία:

Img padding

Δημοσίευση από Dazed_and_confused » 31 Οκτ 2005 00:15

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

.bimg { border:1px solid #788FA5; border-color: #788FA5; padding: 3px;}

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

<img src=link class=bimg>
κάθε βοήθεια ευπρόσδεκτη :)

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

Img padding

Δημοσίευση από patriot » 31 Οκτ 2005 00:33

Dazed_and_confused έγραψε:

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

.bimg &#123; border&#58;1px solid #788FA5; border-color&#58; #788FA5; padding&#58; 3px;&#125;
Το border color γιατί το έχεις δυο φορές; Κατά λάθος ή εμένα κάτι μου διαφεύγει;

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

Img padding

Δημοσίευση από cherouvim » 31 Οκτ 2005 09:04

Tha hriastei na tilikseis to img sou me ena div pou tha paiksei to rolo tou border me padding. Tha prepei na tou kaneis kai float (left i right) gia na mazepsei to border kai na min exei width:100%

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

<style type='text/css'>
.border &#123; 
	border&#58;1px solid #788FA5;
	padding&#58; 3px;
	float&#58; left;
&#125;
</style>


<div class='border'>
 <img src="dazed.jpg" />
</div>
Εικόνα

Enoeitai oti mporeis na tilikseis to img me polla divs gia na dimiourgiseis syntheta borders me polla hromata, paddings kai line-weights. Exe ypopsi omos oti etsi arhizeis na gemizeis to HTML sou me tags pou paizoun rolo mono stin emfanisi, kai afto einai kako.

Ta pragmata tha itane ontos pio apla an o IE mporouse na rendarei to padding sto img tag.

Άβαταρ μέλους
marmelaki
Δημοσιεύσεις: 26
Εγγραφή: 29 Οκτ 2005 22:59
Επικοινωνία:

Img padding

Δημοσίευση από marmelaki » 31 Οκτ 2005 12:06

Εναλλακτικα θα μπορουσες να βαλεις το image σαν background στο εν λογω div, αν το χρησιμοποιεις μονο ως graphical element (εδω υποθετω οτι το μεγεθος του image ειναι 200x200 pixels:

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

<style type="text/css"> 
.border &#123;
            border&#58;1px solid #788FA5;
            padding&#58;3px;
            background&#58;url&#40;dazed.jpg&#41; #fff no-repeat;
            width&#58;200px;
            height&#58;200px;
            &#125; 
</style> 


<div class="border"></div>

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

Img padding

Δημοσίευση από patriot » 31 Οκτ 2005 16:19

Cherouvim
cherouvim έγραψε:Tha hriastei bla bla....
Σημ: Απλά έκοψα το κείμενο για να μην τρώει τσάμπα χώρο...

Ο τρόπος είναι πολύ απλός αλλά έχω μια απορία. Πριν έγραψα αν μπορεί να γίνει αυτό χωρίς divs/ids, classes ή styles="". Το δικό σου όμως έχει σχεδόν από όλα. Χωρίς αυτά μπορείς να το κάνεις; Με την εξής ιδέα ρωτάω:

Τα style (style="style edo") όταν μετά θα θέλει να το αλλάξει θα πρέπει να το κάνει ένα ένα (μέσα στον html κώδικα)

Τα divs - μιας και κάθε div μπορεί να χρησιμοποιηθεί μόνο μια φορά- το ίδιο. Μόνο που αντί να τα αλλάζει μέσα στον html κώδικα θα το κάνει μέσα στον css κώδικα.

Έτσι μένει μόνο το class το οποίο όμως στον δικό σου τρόπο θα δουλεύει χάρη σε ένα div. Εγώ εννοούσα χωρίς όλα αυτά. Εννοούσα να δουλεύει μια και καλή. Μήπως μπορείς να το κάνεις έτσι; Προσωπικά θα με εξυπηρετούσες (και εγώ είχα ψάξει κάποτε... ηλίθιε explorer! :evil: )

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

Img padding

Δημοσίευση από cherouvim » 31 Οκτ 2005 19:10

patriot: style="" enoeis inline style? an nai tote protino na ta apofevgeis giati megalonoun ton html kodika sou horis logo. Oso gia to extra div pou hrisimopoihsa to ksero oti einai kakos tropos alla dystihos (kai opos proanefere o original poster aftou tou thread) o IE den mas kanei ti hari na rendarei sosta to padding pano sto img tag.

Mia alli (server side) lysi einai kata to upload tou image (pithanos mesa apo to agapimeno sou CMS) na exeis ena script na kanei render to image pano se ena neo canvas me to border embeded, etsi oste na katalikseis se ena image file pou exei ensomatomeno to border. Fysika oi epiplokes mporei na einai kathos to arxeio tha ksanasympiestei kai an milame gia JPEG tote sigoura tha ehoume emfani parasita.

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

Img padding

Δημοσίευση από skeftomilos » 01 Νοέμ 2005 01:14

Εντάξει βρε παιδιά, μην κατηγορούμε τον γεράκο τον IE για ένα τόσο δα quirkάκι. Όχι τίποτα άλλο αλλά σε όποιον δεν αρέσει αυτός ο browser ας δοκιμάσει λίγο να στήσει σελίδα στον NN4, και μετά να δείτε που θα λέει IE και πάλι IE! :P
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Img padding

Δημοσίευση από patriot » 01 Νοέμ 2005 05:32

cherouvim έγραψε:patriot: style="" enoeis inline style? an nai tote protino na ta apofevgeis giati megalonoun ton html kodika sou horis logo.
Ναι αυτό εννοούσα. Είδες τι σπαστικό που είναι; Όχι μόνο μεγαλώνουν τον κώδικα αλλά είναι και μπελάς. Μόνο σε έσχατη ανάγκη...
Oso gia to extra div pou hrisimopoihsa to ksero oti einai kakos tropos alla dystihos (kai opos proanefere o original poster aftou tou thread) o IE den mas kanei ti hari na rendarei sosta to padding pano sto img tag.
:evil: :evil: Γι' αυτό είπα εξαρχής ότι δεν υπάρχει τρόπος... μη πολύ κουραστικός τουλάχιστον...

--------------------------------------------------------------------------------------

Skeftomilos
Εντάξει βρε παιδιά, μην κατηγορούμε τον γεράκο τον IE για ένα τόσο δα quirkάκι. Όχι τίποτα άλλο αλλά σε όποιον δεν αρέσει αυτός ο browser ας δοκιμάσει λίγο να στήσει σελίδα στον NN4, και μετά να δείτε που θα λέει IE και πάλι IE!
Δεν μπορείς να φανταστείς πόσο λάθος κάνεις. Εγώ όχι μόνο έμαθα με βάση τον N4+ (έτυχε γιατί τότε μόνο αυτό υπήρχε) αλλά εντελώς κατά τύχη (αυτό και αν θα πει σύμπτωση, να σκεφτούμε το ίδιο πρόγραμμα σήμερα) σήμερα τον άνοιξα μετά από ούτε θυμάμαι πόσα χρόνια και επειδή τον είχα μάθει καλά (από ότι φαίνεται :P ) γι' αυτό μου φάνηκαν όλα πολύ εύκολα!! Και μάντεψε ποιο ήταν το μοναδικό μου πρόβλημα :evil: :doh:


Πάρε παράδειγμα. Σήμερα για να βάλουμε ένα table στο κέντρο (μιας και το <center></center> καταργήθηκε) πρέπει να κάνουμε το εξής

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

table&#123;margin-right&#58;auto; margin-left&#58;auto&#125;
Αλλά τι σύμπτωση!! Αυτό πιάνει μόνο σε mozilla και opera! Ειδικά για explorer πρέπει να βάλουμε ένα έξτρα div:

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

#center_this_stupid_explorer&#123;text-align&#58;center;&#125;

και μέσα στο κείμενο&#58;
<div id="center_this_stupid_explorer">
<table><tr><td>περιεχόμενο</td></tr></table></div>
Για το netscape 4.7 (αν φυσικά θέλουμε να το λάβουμε υπόψην που ίσως σου φανεί παράξενο αλλά υπάρχει μια μερίδα χρηστών που Θεός ξέρει για ποιο λόγο τον χρησιμοποιεί ακόμα προφανώς σε κάποιες τελείως κουφές περιπτώσεις) δεν έχουμε παρά να βάλουμε το κλασσικό:

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

<center></center>
Σε λογικό λοιπόν συμπέρασμα θα έπρεπε να κάνουμε όοοοολο αυτό.

Και έρχεται τώρα το εξής ερώτημα: Πώς θα κάνω τον composer (που βλέπει ότι div θέλει.. ΑΝ θέλει) να βλέπει το table στο κέντρο αφού το συγκεκριμένο div δεν το βλέπει έστω και αν ο Navigator το βλέπει; Και όχι μόνο αυτό αλλά όταν βάζεις <center> (ΑΝ θελήσουμε να το λάβουμε υπόψην μας) το <center> ΔΕΝ πιάνει εξαιτίας του div; Εδώ σε θέλω!

Για να βλέπουν λοιπόν (GOD!!!) όλοι το ίδιο (mozilla, opera, explorer, netscape 4.7 συν Composer 4.7) πρέπει να βάλουμε ΟΟΟΟΟΛΛΑΑΑ αυτά με την εξής σειρά!


Στο style το γνωστό
table{margin-right:auto; margin-left:auto}
και μέσα στο body ΠΡΩΤΑ το <center> για COMPOSER (ο Navigator θα το έβλεπε έτσι και αλλιώς) και μετά το div του ie!!

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

<center>
<div id="center_this_stupid_explorer">
Και δεν μας έφταναν όλα αυτά (κυρίως θέμα αυτοσυγκέντρωσης.. πόσα μυαλά μπορεί να έχει ο καθένας; Προσωπικά έχω αρχίσει να απελπίζομαι με το design παρόλο που είναι μια αγαπημένη ασχολία μου) να έχουμε και την "τελειότητα" του explorer!!!


Να σκεφτείς ότι ο Netscape composer (4.7) δεν βλέπει όλων των ειδών τα div παρά μονάχα με κάποια κόλπα τα οποία ήταν θέμα χρόνου να τα γράψω και ειδικά για το netscape (που όχι μόνο είναι το αγαπημένο μου πρόγραμμα αλλά αντιπάθησα εξαρχής (προ περίπου 12ετίας) τον explorer) θα το έκανα! ΑΛΛΑ ΓΙΑ ΤΟΝ EXPLORER ΟΧΙ! Γιατί άλλο να έχεις ένα πρόγραμμα απαρχαιωμένο και να είναι φυσικό να μην ταιριάζει με τα σημερινά δεδομένα και άλλο η "τελειότητα" της μεγαλύτερης εταιρίας (κατά την γνώμη της μόνο) που κοκορεύεται για την ποιότητα τον προιόντων της χάρη στους πολλούς χρήστες που έχει "με τον κόπο της". Μιλάμε αν ένα πρόγραμμα που το έχω άχτι είναι κάποιο, αυτό είναι ο explorer. Άσε δε που τώρα που είδα τα νέες ανανεώσεις που έκαναν στον explorer 7 (κάπου είδα την ανακοίνωση που έλεγε όλα τα νέα features του) απογοητεύτηκα εντελώς, γιατί εντελώς κατά τύχη πολύ πρόσφατα (μόλις προχτές για την ακρίβεια) είχα δει σε ένα blog ΤΟΥΛΑΧΙΣΤΟΝ 15 αναγνωρισμένα bugs ενώ στην νέα ανακοίνωση της microsoft είχαν φτιάξει μόνο τα 3 ή 4!!!!! (Για Css μιλάμε πάντα). Να χαρώ εγώ ανανέωση!! Ναι, ναι ξέρω.. είναι beta1 ακόμα. Το beta2 που θα βγει σε ....2 δεκαετίες (σύμφωνα με τα προηγούμενα δεδομένα δηλ όσο έκανε να βγει ο 7!!) μπορεί να έχει και μερικές διορθώσεις ακόμα... Μόνο που τότε θα έχουν βγει Css 10!!!

Σόρρυ για το μεγάλο ποστ... Απλα έβγαλα το άχτι μου. Πότε σκοπεύει είπαμε να έρθει κατά εδώ ο Βασιλάκης; Μην το πείτε σε κανένα αλλά λέω να αγοράσω λίγο κώνιο (ή ότι βρω..όλα ευπρόσδεκτα) για χατήρι του. Αρκεί να έρθει προς Ελλάδα! (Αμήν και πότε!! Θα έρθει δεν θα έρθει; :evil: :cop: Δεν θα κάθεται για πάντα στο μέγαρο του...)

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

Img padding

Δημοσίευση από skeftomilos » 02 Νοέμ 2005 01:30

Όχι βρε δεν καταργήθηκε το <center>, απλά είναι deprecated. Όποιος θέλει μπορεί ελεύθερα να βάζει όσα <center> και <table align="center"> νομίζει, και θα έχει συνεπή εμφάνιση της σελίδας του σε όλους τους browsers, από τους NN4, IE4 και έπειτα. Αλληλούια! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Img padding

Δημοσίευση από patriot » 02 Νοέμ 2005 04:37

Ναι το ξέρω ότι απλά έγινε deprecate αλλά αυτό σημαίνει ότι στην μελλοντική έκδοση των browsers οι browsers δεν θα το βλέπουν. Δηλ ΘΑ ΠΡΕΠΕΙ ΝΑ ΦΤΙΑΞΕΙΣ ΟΛΑ ΤΑ <center> ΑΠΟ ΤΗΝ ΑΡΧΗ!!!!
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

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

Img padding

Δημοσίευση από skeftomilos » 03 Νοέμ 2005 01:25

Χμ, δεν κόβω και το δάχτυλό μου αλλά πολύ χλωμό το βλέπω να χαθεί ποτέ η υποστήριξη των browsers για έγκυρα HTML tags και attributes. Ακόμα και το <CENTER> που δεν περιλαμβάνεται στην HTML τυποποίηση θα συνεχίσει πιστεύω να υποστηρίζεται για όσο θα υπάρχει η HTML. Αυτό που μπορεί να συμβεί είναι να αρχίσει ο κόσμος μαζικά να φτιάχνει sites σε κάποια πολύ strict εκδοχή της XHTML, απαλλαγμένη από τα μιάσματα του παρελθόντος. Αλλά ούτε κι αυτό το βλέπω πολύ πιθανό! :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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