Προσθέτοντας αόρατο περιεχόμενο

[Anastasis 48]

 

Εάν τυχόν δούμε την ιστοσελίδα μας χωρίς περιεχόμενο και χωρίς την χρήση του css τότε θα δούμε κάτι σαν το παρακάτω:
Live demo
Αυτό που θα κάνουμε τώρα είναι να δώσουμε τίτλο στα div μας ο οποίος θα είναι αόρατος όταν γίνεται χρήση των css και ορατός όταν δεν χρησιμοποιούνται.
Προσθέτουμε στο css αρχείο μας τα παρακάτω:

κώδικας:

#retouch h2 {    display: none;    } #funny h2 {    display: none;    } #random h2 {    display: none;    } #content1 h2 {    display: none;    } #content2 h2 {    display: none;    } #header h2 {    display: none;    }

Όλα τα παραπάνω θα ορίσουν ότι το tag <h2></h2> που θα χρησιμοποιηθεί σε καθένα από αυτά τα div θα είναι ορατό στον κώδικα αλλά ΑΟΡΑΤΟ στην διάταξη της ιστοσελίδας.
Στην html σελίδα μας αρκεί να προθέσουμε τα:

κώδικας:

<h2>Ολοκληρωμένο βοήθημα σχεδίασης με CSS</h2>

μέσα στο div header

κώδικας:

<h2>Χρωματική διόρθωση εικόνας</h2>

αμέσως μόλις ανοίγει το div retouch:

κώδικας:

<div id="retouch"><h2>Χρωματική διόρθωση εικόνας</h2>   <img src="retouch.gif" alt="Image Retouch" />   <br />   Μάθετε πως να διορθώνετε<br />   χρωματικά μία εικόνα <br />   με το Photoshop</div>

Με την ίδια λογική προσθέτουμε όλες τις επικεφαλίδες μας

Το τελικό αποτέλεσμα:
Live demo

Το τελικό αποτέλεσμα χωρίς css:
Live demo

Υπάρχουν βέβαια πάρα πολλά πράγματα που μπορούμε να κάνουμε με την χρήση των css και ακόμα περισσότερα με την χρήση της javascript. Στο μέλλον θα δούμε αρκετά από αυτά.
Καλή διασκέδαση.