CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

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

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από manolism » 08 Ιαν 2007 10:45

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

Εάν τυχόν δούμε την ιστοσελίδα μας χωρίς περιεχόμενο και χωρίς την χρήση του 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. Στο μέλλον θα δούμε αρκετά από αυτά.
Καλή διασκέδαση.

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

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από ThyClub » 08 Ιαν 2007 10:53

Άψογος lunar !!!

Άβαταρ μέλους
zekia
Δημοσιεύσεις: 146
Εγγραφή: 04 Μάιος 2004 16:38
Τοποθεσία: thessaloniki

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από zekia » 30 Μάιος 2008 00:23

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

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από manolism » 30 Μάιος 2008 11:30

Το κρυφό περιεχόμενο συνήθως χρησιμοποιείται όταν θέλουμε να προσδιορίσουμε ορατά κείμενα από τις μηχανές αναζήτησης αλλά αόρατα από τους χρήστες.

Αποτέλεσμα ο χρήστης βλέπει μία εικόνα αλλά η μηχανή αναζήτησης μία επικεφαλίδα <h1>, <h2> κλπ

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

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από cordis » 31 Μάιος 2008 01:12

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

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

CSS Μάθημα 4ο Προσθέτοντας αόρατο περιεχόμενο

Δημοσίευση από fusion » 24 Αύγ 2008 04:18

Σε τι διαφερει αυτη η τεχνικη, απο το να δωσεις ενα text-indent:-9999px στην επικεφαλιδα που θελεις?

Απάντηση

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

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

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