Ετικέτες Web 2.0. Πως??

Ακόμη ένα how-to! Χωρίς πολλά-πολλά ξέρουν όλοι γιατί μιλάω.
Ήθελα να βάλω ένα στην σελίδα του syrtaropisou και το έψαξα. Πως το κάνουμε?

Ο κώδικας

Ξεκινώντας, δημιουργούμε ένα div στο έγγραφο (.html) που θέλουμε να βάλουμε το badge. Δεν παίζει ρόλο η θέση μέσα στο έγγραφο, απλά προσοχή μην το βάλεις μέσα σε κάποιο άλλο div και μετά δεν μπορείς να το τοποθετήσεις εκεί που θες! Λογικά θα θες να το βάλεις μέσα στο div του header (εκεί πάνε αυτά τα σηματάκια συνήθως).
Για παράδειγμα:

<div id="header">
	<div id="logo">
		<h1>Παράδειγμα<//h1>
		<h2>..για τοποθέτηση Web 2.0 Badge!<//h2>
	</div>
</div>

Φυσικά αυτό είναι ένα απλό παράδειγμα. Οι ιδιότητες του «header» και «logo» είναι στο CSS της σελίδας. Δεν τις δίνω εδώ γιατί δεν χρειάζονται εδώ.

Να πως θα *πρέπει* φαίνεται μετά την τοποθέτηση του div στον κώδικα:

<div id="header">
	<div id="logo">
		<h1>Παράδειγμα<//h1>
		<h2>..για τοποθέτηση Web 2.0 Badge!<//h2>
	</div>
	<div id="badge" style="display: block; position: absolute;
	top: 350px; left: 700px;" alt="My Web 2.0 Badge rulz">
		<img src="http://www.example.com/web2badge.png" />
	</div>
</div>

Τις συντεταγμένες (top: 350px; left: 700px;) δυστυχώς δεν μπορώ να σε βοηθήσω να τις βρεις. Δοκίμαζε διάφορες τιμές και όταν πλησιάζει εκεί που θες άρχισε να μειώνεις ή να αυξάνεις λίγο τις τιμές. Απλά θυμήσου ότι το σημείο (0,0) είναι πάνω αριστερά της σελίδας και ότι άμα μπεί σε άλλο div τότε τοποθετείται με βάση το parent (η αρχή των συντεταγμένων του θα είναι η πάνω αριστερή γωνία του parent) Εύκολο ε?

Που μπορώ να βρω τέτοια σηματάκια??

Υπάρχουν αρκετά site με έτοιμα Web 2.0 Badges. Υπάρχουν και κάποια με online generator. Δίνεις το κείμενο και στο φτιάχνει επί τόπου. Μερικά είναι (τυχαία κυρίως επιλογή):

  • Web 2.0 Badges | Εδώ βρήκα για το syrtaropiso και χρησιμοποίησα.
  • Fresh Badge | Για όσους δεν τα πολυπάνε καλά με το Photoshop..
  • www.google.com | Free porn! 😛

Ένας webmaster που σέβεται τον εαυτό του (εάν θέλει να τον σέβονται και οι άλλοι) ΠΡΕΠΕΙ να δίνει τα απαραίτητα credits! 😉
Thanks go to Stratos(.me) για το post του. Αν δεν το είχε κάνει μπορεί να μην είχα φτιάξει και το σηματάκι στη δική μου σελίδα (αποτέλεσε κίνητρο 😛 )! Βοήθησε και στο CSS βέβαια 😉

Με τον κώδικα αυτό μπορείς να τοποθετήσεις ότι θες μέσα σε μια σελίδα. Εδώ στο blog έβαλα της διαφημίσεις με αυτόν τον τρόπο (πάνω δεξιά) 😉

Καλη επιτυχία αν και δεν είναι τίποτα το τραγικά δύσκολο 😉

6 σχόλια στο “Ετικέτες Web 2.0. Πως??”

  1. φιλε Γιωργο σε ευχαριστω για το credit…! Οντως ειναι μια καλη χαζομαρα αυτο το web 2 badge 😛 εμενα επειδη δεν επεφτε καλα και βαριομουν να το φτιαξω το εβγαλα 🙂 anyway thx again!

  2. Κάνε αυτό που είπα, βάλ’ το μέσα σε ένα άλλο div! Έτσι θα βασίζεται στις συντεταγμένες του parent και δεν θα έχεις πρόβλημα με τις διάφορες αναλύσεις 😉

  3. Μα συντεταγμένες είναι, δεν είναι διαστάσεις..
    Άλλο οι διαστάσεις, π.χ. αυτή η εικόνα είναι 320×240 και άλλο ξεκινάει από το (320,240). Διαστάσεις – συντεταγμένες! Εάν έχεις κάποια άλλη λέξη να προτείνεις πες, αυτή μου έρχεται στο μυαλό εμένα πάντως 😛

  4. Μπράβο GiannouGi, συνέχισε έτσι να μαθαίνουμε και οι μεγαλύτεροι από τους μικρότερους…Μην ξεχνάς και σε τι εποχή βρίσκεσαι όμως (καταλαβαίνεις έτσι?)

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *