Πρόβλημα Με Table Background.

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Πρόβλημα Με Table Background.

Δημοσίευση από ManosWdd » 24 Ιούλ 2005 15:29

Καλησπέρα, ξεκίνησα πριν λίγη ώρα να κάνω μία σελίδα, δεν λέω το θέμα ακόμη(το κρατάω για έκπληξη :wink: αν και θα το καταλάβετε από το screenshot). 'Εχω κάνει το εξής, στο κυρίως table έχω βάλει για background ένα γήπεδο του tennis με image background. Απλά μέχρι εδώ. Μέσα σε αυτό το μεγάλο table έχω βάλει όλα τα άλλα, blocks κτλ κτλ. Αυτό που συμβαίνει είναι το εξής, έχω βάλει και ένα background σε κάθε block το οποίο είναι 15x15 και είναι πράσινο transparent για να είναι το κείμενο ευανάγνωστο.

Το πρόβλημα είναι το εξής αν και το bavkground των blocks είναι trasparent δεν φαίνεται τίποτα από το πίσω background(γήπεδο tennis). Αυτό θέλω να επιτύχω... Δείτε το screenshot για να καταλάβετε. Στην μία περίπτωση είναι trasnparent και τα blocks και στην άλλη είναι κανονικά το 15*15 που έφτιαξα εγώ.

Εικόνα

Έχω φάει όλο το internet αλλά δεν βρήκα ακόμη τίποτα, εντελώς τίποτα!!! Ευχαριστώ εκ των προτέρων...
Εικόνα

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα Με Table Background.

Δημοσίευση από fafos » 24 Ιούλ 2005 16:56

Auto dystyxos gia tora einai ligo dyskolo.
Mporeis na soseis to background ton blocks se png alla se full colors. Se firefox kai opera ola kala.. alla ston explorer deixnei ena galazopo background to opoio xalaei thn olh eikona.. apo ton explorer 7 den tha yparxei auto to provlhma alla mexri na valoun oloi explorer7 fekse mou kai glystrisa.. :D

Sou stelno 2 deigmata na deis thn diafora..
Συνημμένα
screens.zip
(87.54 KiB) Μεταφορτώθηκε 149 φορές

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Πρόβλημα Με Table Background.

Δημοσίευση από ManosWdd » 24 Ιούλ 2005 19:01

Τελικά έκανα αυτό που είπε ο φίλος Fafos(Thanks Fafos!!) και δούλεψε αλλά μόνο στον firefox. Αν έχει σκεφτεί κανείς άλλο τρόπο plz ας μου πει.

Δείτε το αποτέλεσμα:
Εικόνα
Εικόνα

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Πρόβλημα Με Table Background.

Δημοσίευση από Cmg__ » 25 Ιούλ 2005 03:12

poly wreo ayto poy vlepw pantws!

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Πρόβλημα Με Table Background.

Δημοσίευση από ManosWdd » 25 Ιούλ 2005 06:39

Ευχαριστώ πολύ..! Σύντομα θα είναι online...
Ηταν κρίμα να μην υπάρχει ένα site για την Λένα...(όχι την Παπαρίζου, την ΔΑΝΙΗΛΙΔΟΥ)!!!
Εικόνα

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

Πρόβλημα Με Table Background.

Δημοσίευση από skeftomilos » 25 Ιούλ 2005 09:57

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

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

Πρόβλημα Με Table Background.

Δημοσίευση από cherouvim » 25 Ιούλ 2005 10:30

Αγαπητέ ManosWdd

Υπάρχουν 2 καλές αλλά μη εφικτές λύσεις (λόγω IE).
1. Χρήση PNG με alpha channel.
2. Χρήση του CSS1 property background-attachment: fixed για να πετύχεις το effect που περιγράφεται εδώ.

Σήμερα όμως (το 2005 που ο IE δεν μας κάνει τη χάρη να εφαρμόσει standards που έχουν ορισθεί το 1999) η λύση είναι να χρησιμοποιήσεις ένα 50χ50 GIF το με το 1-bit transparency του θα το κάνεις σαν σήτα, σαν ένα grid όπου το ένα pixel θα είναι ON στο χρώμα που θες, και το άλλο θα είναι τρύπιο (χεχε). Μπορείς άφοβα να κλέψεις τα εξής αρχεία από την ιστοσελίδα μου για να καταλάβεις τι ενοώ.

http://www.cherouvim.com/gui/images/bg1.gif
http://www.cherouvim.com/gui/images/bg2.gif
http://www.cherouvim.com/gui/images/bg3.gif

Χρησιμοποίησε αυτά. Με Photoshop πατάς CTRL+U για να αλλάξεις το χρώμα της εικόνας με Hue/Saturation controls. Έχε υπόψιν ότι αυτή η τεχνική κάνει καλύτερο blending σε υψηλές αναλύσεις και μόνο όταν το χρώμα του gif είναι ελαφρός διαφορετικό από το background.

Η διαστάσεις του GIF θα μπορούσαν να είναι 2x2 αλλά μερικοί browsers αργούν πολύ να το κάνουν render αυτό λόγο του υπερβολικού repeat.

Have fun

p.s ένα άλλο live example που έχω φτιάξει μπορείς να δεις εδώ.

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Πρόβλημα Με Table Background.

Δημοσίευση από ManosWdd » 25 Ιούλ 2005 16:28

Παιδιά χίλα συγνώμη και πάλι αλλά έχω ένα ακόμη προβληματάκι... Στο css file έχω μέσα τον εξής "κώδικα"

a:link{color: #FFFFFF; text-decoration: none;}
a:hover{color: #FEBF3D; text-decoration: none;}
a:visited{color: #FFFFFF; text-decoration: none;}

Αλλά το hover δεν ποιάνει καθόλου σε αντίθεση με τα άλλα 2. Τι να κάνω.... ?!!?!

Ψάχνω και ψάχνω αλλά τίποτα... Ευτυχώς που είναι και το fs...
Εικόνα

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

Πρόβλημα Με Table Background.

Δημοσίευση από shadow » 25 Ιούλ 2005 17:04

Παίζει ρόλο η σειρά με την οποία γράφεις το css για τα links. To σωστό είναι:

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

a:link{color: #FFFFFF; text-decoration: none;}
a:visited{color: #FFFFFF; text-decoration: none;} 
a:hover{color: #FEBF3D; text-decoration: none;}
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

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

Πρόβλημα Με Table Background.

Δημοσίευση από skeftomilos » 26 Ιούλ 2005 08:58

cherouvim έγραψε:Υπάρχουν 2 καλές αλλά μη εφικτές λύσεις (λόγω IE).
1. Χρήση PNG με alpha channel.
2. Χρήση του CSS1 property background-attachment: fixed
Για το δεύτερο και οι άλλοι browsers έχουν προβλήματα. Π.χ. ο Firefox εμφανίζει εντονότατο scrolling issue όταν υπάρχει fixed background.

Όσον αφορά το πρώτο είναι εφικτό. Ο IE υποστηρίζει alpha transparency αλλά με το δικό του τρόπο (ως συνήθως!). Με λίγα λόγια θέλει το AlphaImageLoader filter:

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

<html>
  <head>
    <title>IE-Alpha-Transparency</title>
    <style type="text/css">
      div#test &#123;
        filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;src='car.png', sizingMethod='scale'&#41;;
        background-color&#58; yellow;
      &#125;
    </style>
  </head>
  <body>
    <h2>IE-Alpha-Transparency</h2>
    <div id="test">Κείμενο</div>
  </body>
</html>
Σε αυτό το παράδειγμα το div#test θα αποκτήσει ως background το car.png, ανάμεικτο με κίτρινο όπου το alpha channel επιτρέπει. Η παράμετρος sizingMethod μπορεί να πάρει τιμές crop, image και scale. Μετά βέβαια πρέπει να προστεθεί και το...

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

background-image&#58; url&#40;car.png&#41;
...για τους standard browsers, αλλά με τρόπο που να μην το βλέπει ο IE.

Αν θέλουμε αντί για background να έχουμε PNGs ως src σε img, υπάρχει ένα μικρό και ωραίο κομμάτι JavaScript που κάνει αυτόματα ό,τι χρειάζεται:

- PNG in Windows IE: The Solution

Όμως μην ξεχνάμε ότι επειδή τα semi-transparent PNG είναι 32bit και όχι paletted έχουν σημαντικά αυξημένο μεγεθος (bytes), και επομένως γενικά δεν είναι πολύ κατάλληλα για το web.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

ManosWdd
Δημοσιεύσεις: 288
Εγγραφή: 17 Ιουν 2004 01:48
Τοποθεσία: Θεσσαλονίκη, Ελλάδα.

Πρόβλημα Με Table Background.

Δημοσίευση από ManosWdd » 27 Ιούλ 2005 05:28

Χίλια ευχαριστώ παιδιά...
Ακόμη δεν το τελείωσα γιατί μου βγήκε μία πρόχειρη δουλειά αλλά μέχρι την Παρασκευή ίσως το τελειώσω!!
Εικόνα

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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