Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
Anastasis
-
Content Count
304 -
Joined
-
Last visited
-
Days Won
2 -
Feedback
N/A
Everything posted by Anastasis
-
Εάν τυχόν δούμε την ιστοσελίδα μας χωρίς περιεχόμενο και χωρίς την χρήση του 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. Στο μέλλον θα δούμε αρκετά από αυτά. Καλή διασκέδαση.
-
Να ένα tutorial που θα χρειαστεί σε πολλούς (και σε μένα). Όποιος έχει χρόνο και κουράγιο να το κάνει θα βοηθήσει πολύ κόσμο πιστεύω. Έστω ότι έχω αυτή τη μορφή των "blocks" για το site που σχεδιάζω : Ας πούμε ότι τα δυο πάνω τετράγωνα θα περιέχουν περιεχόμενο στο site μου. Το ένα θα είναι αριστερά και το άλλο το μικρότερο δεξιά... Έστω τώρα ότι κόβω ας πούμε το πρώτο το μεγάλο τετράγωνο όπως την εικόνα που φαίνεται κάτω (αυτή με τα βελάκια), οπότε έχω 9 ξεχωριστές πλέον εικόνες που αν τις βάλω σωστά θα φτιάξουν το τετράγωνο που θέλω. Πως θα φτιάξω αυτό το τετράγωνο με CSS έτσι ώστε να αυξομειώνεται το ύψος του αναλόγως την ανάλυση του επισκέπτη χωρίς να χαλάει το σχέδιο; Με tables γινόταν απλά τοποθετώντας ως background εικόνες με ποσοστιαίο ( % ) width τα κομμάτια 2 και 8 και απλώς ως bg με το σωστό πλάτος τα κομμάτια 4 και 6. Κάτι τέτοιο δηλαδή (στα πολύ γρήγορα.. χωράει διάφορες βελτιώσεις): http://www.avadaz.com/table/sample_with_tables.html Αν μικρύνουμε το παράθυρο του browser μικραίνει και το τετραγωνάκι μας... γιατί του έχω βάλει ένα 80% πλάτος... Αυτό λοιπόν πως το κάνεις με CSS αφού έχεις κόψει τα κομμάτια σου και όταν θα χρειαστείς και δίπλα και μια στήλη με άλλα παρόμοια blocks; Φαντάζομαι κάτι σαν: <div class="content"> <div class="aristeri_stili">Ώπου εδώ μπαίνει ο κώδικας για το block 1</div><div class="dexia_stili">Block 2</div> </div> Σίγουρα θα υπάρχουν τίποτε ξένα tutorials, αλλά Ελληνικό δεν έχω ξαναδεί ... έχει κανείς το κουράγιο να το γράψει; Για όσους θέλουν να κάνουν κάτι τέτοιο αλλά με tables όπως το παράδειγμα που έδωσ, παραθέτω και τον HTML κώδικα: κώδικας: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Playing...</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <br /> <table id="sample_top" width="80%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td><img src="images/sample_with_tables_01.gif" width="33" height="25" alt=""></td> <td background="images/sample_with_tables_02.gif" width="100%"><img src="images/spacer.gif" width="1" height="25" alt=""></td> <td><img src="images/sample_with_tables_03.gif" width="28" height="25" alt=""></td> </tr> </table> <table id="sample_middle" width="80%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td background="images/sample_with_tables_04.gif"><img src="images/spacer.gif" width="33" height="1" alt=""></td> <td background="images/sample_with_tables_05.gif" align="center" width="100%"><br /> <br /> <br /> Εδώ το καλό περιεχόμενο... <br /> φρέσκο πράγμα που σαλεύει...<br /> και τον μάστορα γυρεύει...<br /> <br /> <br /> Αν το κόψεις και καλύτερα γίνετε και με ένα table... <br /> τώρα το έσφαξα στα γρήγορα για δείγμα οπότε το σπάω σε 3 tables. <br /> <br /> <br /> <br /> <br /> </td> <td background="images/sample_with_tables_06.gif"><img src="images/spacer.gif" width="28" height="1" alt=""></td> </tr> </table> <table id="sample_bottom" width="80%" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td><img src="images/sample_with_tables_07.gif" width="33" height="31" alt=""></td> <td background="images/sample_with_tables_08.gif" width="100%"><img src="images/spacer.gif" width="1" height="31" alt=""></td> <td><img src="images/sample_with_tables_09.gif" width="28" height="31" alt=""></td> </tr> </table> </body> </html>
-
Σε αυτό εδώ το post θα περιγράψω πως μπορούμε να βάλουμε στην σελίδα μας κουτιά με ότι περιεχόμενο θέλουμε τα οποία θα έχουν στρογγυλεμένες άκρες χρησιμοποιώντας css. Θα χρησιμοποιήσουμε ένα εξωτερικό <div> με 4 "corner" divs μέσα σε αυτό. Στο html αρχείο μας μέσα στο <body> θα βάλουμε τον παρακάτω κώδικα: κώδικας: <div class="cornerBox"> <div class="corner TL"></div> <div class="corner TR"></div> <div class="corner BL"></div> <div class="corner BR"></div> <div class="cornerBoxInner"> <p>Εδώ θα γράψουμε το περιεχόμενο που θα εμφανίζεται μέσα στο κουτί ή θα καλέσουμε κάποια εικόνα που θέλουμε κ.λ.π.</p> </div> </div> Στη συνέχεια θα βάλουμε τον παρακάτω κώδικα στο css αρχείο μας: κώδικας: .cornerBox { position: relative; background: #cfcfcf; width: 100%; } .corner { position: absolute; width: 10px; height: 10px; background: url('corners.gif') no-repeat; font-size: 0%; } .cornerBoxInner { padding: 10px; } .TL { top: 0; left: 0; background-position: 0 0; } .TR { top: 0; right: 0; background-position: -10px 0; } .BL { bottom: 0; left: 0; background-position: 0 -10px; } .BR { bottom: 0; right: 0; background-position: -10px -10px; } Μπορούμε όπως βλέπουμε να ορίσουμε κάποιο χρώμα στο background, να αλλάξουμε τις διαστάσεις κ.λ.π. Στο συγκεκριμένο παράδειγμα χρησιμοποιούμε για background την εικόνα corners.gif την οποία θα επισυνάψω παρακάτω. Ελπίζω το πρώτο μου μικρό tutorial να φανεί χρήσιμο και να μπει στην λίστα με τα tutorials με css. Παρακαλώ αν νομίζετε ότι χρειάζεται κάποια διόρθωση να μου το πείτε. corners.gif Description: Αυτή είναι η εικόνα η οποία χρησιμοποιούμε στο συγκεκριμένο παράδειγμα. Filesize: 166 Bytes Viewed: 3706 Time(s)
-
Θέλετε να βγαίνει μόνο οριζόντια μπάρα ή μόνο κάθετη ή ακόμα και καμία από τις δύο ? μπορείτε να χρησιμοποιείσετε τον κώδικα : Μέσα στο <body> κώδικας: <body style="WHATEVER STYLE: YOU CHOOSE;"> Ο Κώδικας για για μόνο την κάθετη μπάρα : κώδικας: style="overflow-x:hidden; overflow-y:scroll;" Ο Κώδικας για για μόνο την οριζόντια μπάρα : κώδικας: style="overflow-x:scroll; overflow-y:hidden;" Ο Κώδικας για να κάνετε και τις δύο μπάρες να εξαφανιστούν : κώδικας: style="overflow-x:hidden; overflow-y:hidden;" ή κώδικας: style="overflow: hidden;" Σε περίπτωση που θέλετε να το κάνετε μόνο με HTML, χρησιμοποείτε τον κώδικα : κώδικας: <body scroll="no">
-
Σε αυτό το μάθημα θα δώσουμε την επιλογή στον χρήστη πατώντας ένα link που θα βρίσκεται στο header μας να πηγαίνει αυτομάτως στο περιεχόμενο της σελίδας μας αγνοώντας το header και το menu. Θα χρειαστείτε την παρακάτω εικόνα: Εικόνα 1 Στο css αρχείο μας γράφουμε τα παρακάτω: κώδικας: div.skip a{ width:110px; height:17px; background-image:url(skip.gif); float:right; margin:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff; text-align:right; padding:3px 1px 1px 1px; margin-top:2px; margin-right:100px; text-decoration:none; } div.skip a:hover{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#0099FF; text-decoration:none; } Τι σημαίνουν οι επιλογές αυτές τις έχουμε εξηγήσει σε προηγούμενα μαθήματα Στο html αρχείο μας και μέσα στο div header γράφουμε: κώδικας: <div class="skip"><a href="#main_content">Skip to content</a> </div> ώστε να μας οδηγήσει κατ' ευθείαν στο div main_content. Live demo
-
1) Το αστεράκι (*) σημαίνει "όλα". Δηλ αφού μπήκε η εντολή να φαίνεται παντού μια φωτογραφία, φυσικά φάνηκε και μια εικόνα στο background του container. 2) "background-repeat: repeat-x;" σημαίνει ότι το background θα επαναλαμβάνεται μόνο στον -μαθηματικό- άξονα "x" δηλ οριζόντια. Μπορείς να το αλλάξεις σε κάποια άλλη από τις εξής επιλογές: - α) repeat-y (κάθετα) - β) no-repeat - γ) repeat (το συγκεκριμένο, αν δεν το βάλεις, εννοείται αυτομάτως) Αυτά σε ότι αφορά τις ερωτήσεις σου..... Όμως έχω να σου πω και κάποια άσχετα πραγματάκια που δεν τα ρώτησες. Κάτι μικρό-λαθάκια. Να διευκρινήσω ότι τα συγκεκριμένα δεν είναι 100% λάθη, απλά συνιστάται να είναι σωστά. Είναι δηλ καλύτερα να τα διορθώσεις αν θες να έχεις "καθαρό" κώδικα... 1) Μην βάζεις από την μία σκέτο "0" ( π.χ padding:0; ) και από την άλλη "0px". Να βάζεις παντού το ίδιο. Θα σε βοηθήσει να ξεχωρίζεις διαφορές με το μάτι, όταν συνηθίσεις τον κώδικα. 2) Είναι καλύτερο να βάζεις πάντα "0px" όχι σκέτο "0". Τα τρελά των browsers (που γίνονται conflicts για το ποιο ηλίθιο θέμα) δεν τα ξέρεις, έτσι δεν θα μπορείς να καταλάβεις γιατί εδώ φαίνεται σωστά ενώ εκεί όχι. Είναι καλύτερο να διευκρινίζεις εξ' αρχής ότι το "0" που εννοείς, ΤΟ ΕΝΝΟΕΙΣ!! 3) Στο font-family, όταν βάζεις περισσότερο από 1 γραμματοσειρές, να τις βάζεις με την σειρά που είναι δημοφιλέστερες και από άποψη ομορφιάς/καλλιτεχνίας αλλά και διασημότητας της (δηλ να είναι τόσο διάσημη ώστε να την έχουν όλοι οι χρήστες). Εσύ έβαλες "Arial, Helvetica, sans-serif;". Αυτό σημαίνει ότι όλοι οι χρήστες θα δουν την σελίδα σου με Arial. Αν δεν έχουν Arial θα την δουν με Helvetica και πάει λέγοντας. Όμως πόσο ευκολοδιάβαστη είναι μια σελίδα με Arial; Συνιστώ να βάλεις και την verdana, και μάλιστα πρώτη. 4) Από την στιγμή που έβαλες μια τελεία πριν το "container" σημαίνει ότι το θες να είναι class. Και "class" σημαίνει κάτι που επαναλαμβάνεται. Το container όμως είναι αυτό που λέει το όνομα του. Αυτό που περιέχει τα πάντα. Δεν μπορούν τα πάντα να επαναλαμβάνονται. Άλλαξε το και κάνε το div, δηλ βγάλε την τελεία (.) και βάλε το καρό (#) (εκτός βέβαια αν το θες όντως έτσι!) 5) Αν το κάνεις div τελικά, τότε το "display:block" δεν χρειάζεται να μπει. Το "display:block" σημαίνει ότι το συγκεκριμένο element θα καταλαμβάνει όλον τον σχετικό χώρο. "Div" σημαίνει το ίδιο ακριβώς πράγμα. Άρα δεν χρειάζεται να τα βάλεις και τα δύο. 6) Το width μπορείς να το βάλεις όσο θες. Το height όμως απαιτεί μια διευκρίνηση. Όταν του λες ότι θες να είναι ύψος "τόσο τοις εκατό", τότε πρέπει να του δώσεις και μια μονάδα σύγκρισης. Για παράδειγμα... πες ότι θες να είναι 10% του...... του; Τίνος; Αν είναι του body π.χ, τότε πρέπει να προσθέσεις στο ίδιο το body ένα "τόσο" ύψος. Και βέβαια το "τόσο" είναι το μεγαλύτερο που θέλουμε δηλ 100%. Δηλ θα πρέπει να γράψεις: html, body {height:100%} .container {height:10%} 7) Όπως το height του container χρειάζεται κάτι για να συγκρίνεται μαζί του (δηλ το height του body) έτσι και το "float" (που τυχαίνει στην προκειμένη περίπτωση να είναι το left) χρειάζεται κάτι να συγκρίνεται μαζί του επίσης. Αυτό σημαίνει ότι πρέπει να βάλεις άλλο ένα class/div/κάποιο element, δίπλα του, το οποίο θα είναι οπωσδήποτε και αυτό floated. Και βέβαια αυτό θα συνεχίζεται εις άπειρον. Θες οπωσδήποτε όλο το site να είναι το ένα element δίπλα με το άλλο στα αριστερά (left); Τότε αντί να έχουμε scrollbar στα δεξιά θα έχουμε κάτω μπάρα...!!! Κάπου θα πρέπει να το σταματήσεις.... Και για να το σταματήσεις έχεις δύο επιλογές: α) Αυτά που συνήθως είναι floated είναι τα classes τα οποία περικυκλώνονται από ένα div. Βάλε το div να έχει ορισμένο width. β) Αυτή η λύση δεν είναι και η καλύτερη αλλά... Βάλε ένα clear στο τελευταίο class. Το πρόβλημα είναι ότι το περιεχόμενο μιας σελίδας αλλάζει κάθε τρεις και λίγο. Δεν μπορείς να κρατάς τσίλιες κάθε μέρα να βλέπεις αν αυτό είναι το τελευταίο class. Μόνο αν ξέρεις από τον αρχή ότι αυτό είναι το τελευταίο το βάζεις... 8 ) Και τέλος (ναι το ξέρω ότι σε κούρασα) έχουμε ένα πρόβλημα με το clear:both. Όπως λέει και το όνομα του, "clear" θα πει "ελευθερο". Και ειδικά στα css διευκρινίζουμε ότι αυτό που θα είναι ελεύθερο είναι τα πλαϊνα ενός element. Εσύ έχεις βάλει το container να είναι clear, ελεύθερο, από αντικείμενα μεν, αλλά όλα τα υπόλοιπα elements να είναι float:left δηλ όλα τα υπόλοιπα elements να αιωρούνται γύρω του μόνο από την αριστερή του πλευρά. Δεν νομίζεις ότι εδώ γίνεται ένα conflict; Πώς στο καλό του βάζεις να είναι και ελεύθερο το πεδίο αλλά και "γεμάτο" προς τα αριστερά; Παντρεμένος και ανύπαντρος συγχρόνως γίνεται;
-
Σε αυτό το μάθημα θα δούμε πως θα προσθέσουμε περιεχόμενο μέσα στα div μας. Πρώτα απ’ όλα μέσα στο css αρχείο θα προσθέσουμε τα παρακάτω: κώδικας: img { margin-bottom:5px; } Δηλώνουμε ότι όλες οι εικόνες που θα τοποθετηθούν στην ιστοσελίδα μας θα έχουν κάτω περιθώριο 5px. κώδικας: .image { margin-left:5px; margin-right:5px; } Εδώ θα δηλώσουμε μέσα στο html αρχείο μας όσες από τις εικόνες μας θα έχουν περιθώριο δεξιά και αριστερά με τον παρακάτω κώδικα: κώδικας: <img src="εικόνα" class="image" /> Οι δύο αυτές επιλογές είναι ανεξάρτητες μεταξύ τους κώδικας: .emphasis { font-weight:bold; color:#838181; } Με αυτές τις επιλογές θα τονίσουμε ορισμένες από τις λέξεις μας με τον παρακάτω κώδικα: κώδικας: <span class="emphasis">Λέξη που θέλουμε </span> Div retouch: κώδικας: <img src="retouch.gif" alt="Image Retouch" /> <br /> Μάθετε πως να διορθώνετε<br /> χρωματικά μία εικόνα <br /> με το Photoshop Div funny: κώδικας: <img src="funny.gif" alt="Funny Creation" /><br /> Δημιουργήστε καταπληκτικά <br /> γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop Div content1: κώδικας: <span class="emphasis">Adobe Photoshop</span>, or simply <span class="emphasis">Photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">Adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">Photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office. Div content2: κώδικας: <img src="work1.jpg" alt="Work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="Work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="Work 3" width="134" height="111" class="image" /><br /> Δείγματα εργασιών Div random: κώδικας: <img src="../random.gif" alt="Nike Bug" /><br /> Τυχαίας εμφάνισης εικόνα Div footer: κώδικας: Copyright © 2003-2006 <span class="emphasis">Ilias Antonopoulos</span>. All Rights Reserved. Template created by <span class="emphasis">EkLekTos</span> Οπότε ολοκληρωμένη την σελίδα την βλέπουμε παρακάτω: Live demo
-
Στο μάθημα αυτό θα δούμε πως θα στήσουμε το μενού με τις επιλογές μέσα στο div navigation. Πρώτα θα γράψουμε στο css αρχείο το παρακάτω: κώδικας: #menu { margin: 0; padding: 0; list-style-type: none; } Σε αυτό το div δεν έχουμε κανένα εσωτερικό ή εξωτερικό περιθώριο καθώς επίσης λέμε ότι η οριζόντια λίστα που θα χρησιμοποιήσουμε δεν θα έχει κανένα τύπο. κώδικας: #menu li { display: inline; padding-right: 15px; padding-left: 17px; } Εδώ με την επιλογή li ορίζουμε ότι η λίστα μας θα είναι οριζόντια καθώς επίσης και ότι οι επιλογές μεταξύ τους θα έχουν απόσταση αριστερά 17px και δεξιά 15px. κώδικας: #menu a:link{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#ffffff; text-decoration: none; } Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links στο μενού δηλαδή γραμματοσειρά, μέγεθος, στυλ, χρώμα και το text-decoration ορίζει αν θα υπάρχει κάποια υπογράμμιση ή όχι. κώδικας: #menu a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#0099FF; text-decoration:underline; } Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα hover των links στο μενού δηλαδή όταν περνάει το ποντίκι από πάνω και με τις επιλογές που δίνουμε του λέμε να αλλάζει το χρώμα και να υπογραμμίζεται. κώδικας: #menu a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# FFFFCC; text-decoration: none; } Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που έχουμε επισκεφτεί στο μενού. κώδικας: #menu a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:# 99CCFF; text-decoration: none; } Οι επιλογές εδώ έχουν να κάνουν πως θα εμφανίζονται τα links που είναι ενεργά στο μενού. Στην συνέχεια θα προσθέσουμε το παρακάτω μέσα στο div navigation κώδικας: <ul id="menu"> <li><a href=" #" title="Home">Home</a></li> <li><a href=" #" title="Portfolio">Portfolio</a></li> <li><a href=" #" title="Gallery">Gallery</a></li> <li><a href=" #" title="Tutorials">Tutorials</a></li> <li><a href=" #"title="Donate">Donate</a></li> <li><a href=" #" title="Forum">Forum</a></li> <li><a href=" #" title="About">About</a></li> <li><a href=" #" title="Admin panel">Admin panel</a></li> <li><a href=" #" title="Contact">Contact</a></li> </ul> Επίσης εδώ έχουμε χρησιμοποιήσει και το: κώδικας: title="Home" το οποίο δίνει τίτλο στην επιλογή μας ώστε να είναι πιο φιλικό στις μηχανές αναζήτησης καθώς επίσης και όταν πηγαίνει το ποντίκι μας πάνω του να βγάζει το γνωστό κίτρινο ταμπελάκι. Live demo
-
Margin = Εξωτερικό περιθώριο Padding =Εσωτερικό περιθώριο Μερικές οδηγίες: Τι κώδικα συνιστώ να βάλεις. 1) Πρώτα από όλα θα κάνεις ένα reset. Πολλοί browsers θεωρούν τα δικά τους δεδομένα (τις δικές τους εντολές) ως σωστά δεδομένα. Και επειδή μόνο σωστά δεν είναι, εσύ πρέπει να τονίσεις ότι υπάρχουν στάνταρτ δεδομένα (w3 standards). Το reset λοιπόν σημαίνει το γνωστό και κλασσικό 2 + 2 = 4, ότι δηλαδή δεν θες ο κάθε browser να κάνει το μακρύ του και το κοντό του και ότι εσύ θες να χρησιμοποιείς τα στάνταρς. ΥΓ: W3 = Τρία "w", δηλαδή το γνωστό μας: www...... Είναι η εταιρεία που έφτιαξε τις μισές γλώσσες του internet, όπως π.χ τα css και την html. Σε ότι αφορά το reset των margin / padding βάλε: κώδικας: * { margin:0px; padding:0px; } ΥΓ: Το αστεράκι σημαίνει: παντού / σε όλα. Ότι δηλαδή πουθενά δεν θα έχεις margin / padding εκτός από τα μέρη που θες να βάλεις εσύ. Πουθενά, δεν θα ξεπετάγονται ανεπιθύμητα περιθώρια. 2) Μετά φτιάξε τον πίνακα σου να έχει ότι περιθώριο θες με αυτόν τον κώδικα: κώδικας: table { margin-left:10px; margin-right:10px;} ΥΓ: Όπου 10px = το μέγεθος του περιθωρίου όσο το θες. Σημ: Αντί για table μπορείς να βάλεις TD, δηλαδή "Table Data". TD είναι το κάθε "κελί", το κάθε cell. Να, δες εδώ στο καρό: #. Βλέπεις τρεις σειρές (rows), 3 στήλες (columns) και 9 td (cells). Tip: Στα css υπάρχουν κάποιες συντομεύσεις (shortcuts) για να μην γράφεις συνέχεια τα ιδια και τα ίδια. Π.χ αντί να γράψεις: margin-left:10px, margin-right:10px, margin-top:10px, margin-bottom:10px; μπορεις να γράψεις κατευθείαν margin:10px και ξεμπέρδεψες. Ή margin:15px auto. Το "15" θα πιάσει το top / bottom και το "auto" το left / right. Να το θυμάσαι από τους δείκτες του ρολογιού: 12 top, 3 right, 6 bottom, 9 left. Σημ: Το ίδιο ισχύει και για το padding εκτός από το "auto" το οποίο για ένα μυστηριώδη λόγο έχει bug. Να σου κάνω μια ερώτηση; Τι ανάλυση οθόνης έχεις;
-
Στο βοήθημα αυτό θα βάλουμε περιεχόμενο στα 3 boxes που δημιουργήσαμε στο πρόηγούμενο βοήθημα. Στο css αρχείο γράφουμε το παρακάτω κώδικας: .text{ width:150px; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:20px; color:#767676; float:left; } .title{ color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:24px; } .color{ color:#b47825; } .image{ float:right; margin-top:20px; } .more a{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:10px; color:#000; } .more a:hover{ text-decoration:none; } Η κλάσση .text ορίζει τις παραμέτρους για το κυρίως κείμενο. Η κλάσση .title ορίζει τις παραμέτρους για τον τίτλο. Η κλάσση .color ορίζει τις παραμέτρους για τον μισό τίτλο. Η κλάσση .image ορίζει τις παραμέτρους για την εικόνα. Η κλάσση .more a ορίζει τις παραμέτρους για το σύνδεσμο Read more. Η κλάσση .more a:hover ορίζει τις παραμέτρους για το hover του συνδέσμου Read more Στο html αρχείο μας και μέσα στο div box_left γράφουμε το παρακάτω: κώδικας: <p class="title">About SmashingDzine</p> LIVE DEMO Μορφοποιώντας τον τίτλο αυτό και εφαρμόζοντας την κλάσση .color τον κάνουμε όπως το παρακάτω: κώδικας: <p class="title"><span class="color">About</span> SmashingDzine</p> LIVE DEMO Κάτω ακριβώς από τον τίτλο τοποθετούμε την εικόνα γράφοντας το παρακάτω: κώδικας: <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> LIVE DEMO Παρατηρούμε ότι η εικόνα πάει δεξιά επειδή έχουμε ορίσει float:right Κάτω από την εικόνα εισάγουμε το κυρίως κείμενό μας γράφοντας το παρακάτω: κώδικας: <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> LIVE DEMO Και τέλος κάτω από το κείμενο βάζουμε το σύνδεσμο Read more γράφοντας το παρακάτω: κώδικας: <p class="more"><a href="#">Read More</a></p> LIVE DEMO Άρα μέχρι στιγμής ο κώδικας μέσα στο αριστερό box είναι ο παρακάτω: κώδικας: <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> Με τον ίδιο τρόπο γεμίζουμε όλα τα κουτιά και ο τελικός κώδικας όλης της σελίδας είναι ο παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_middle"> <p class="title"><span class="color">Our</span> Services</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_right"> <p class="title"><span class="color">Our</span> Portfolio</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> </div> </div> </body> LIVE DEMO
-
Στο βοήθημα αυτό θα δημιουργήσουμε την περιοχή Footer του template Στο css αρχείο γράφουμε το παρακάτω κώδικας: #footer_wrap { width:100%; height:100px; background:url(images/footer.jpg) repeat-x; float:left; } #footer { width:960px; height:100px; margin:0 auto; padding:20px 0 0 0; } #footer_left { width:550px; height:50px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:11px; margin-top:5px; line-height:25px; } #footer_right { width:350px; height:50px; float:right; } #footer ul{ width:100%; margin:0;padding:0;list-style-type:none;float:left;} #footer ul li{float:left;margin:0 0px;} #footer ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:0 12px 0 0;line-height:25px;} #footer ul li a:hover, #footer ul li a.current{color:#fff; text-decoration:underline;} #footer_wrap: Είναι το div που θα περικλείει όλόκληρο το footer. Παρατηρούμε ότι το μήκος του είναι 100% ώστε να επεκτείνετε σε όλο το πλάτος της οθόνης ανεξάρτητα από την ανάλυση της #footer: Είναι η περιοχή που θα τοποθετηθεί το περιεχόμενο #footer_left: Είναι η αριστερή πλευρά του Footer #footer_right: Είναι η δεξιά πλευρά του Footer Οι υπόλοιπες ρυθμίσεις αφορούν το μενού με τα links που βρίσκεται στο Footer Στο html αρχείο μας και κάτω από όλα τα divs και πάνω από το </body> γράφουμε το παρακάτω: κώδικας: <div id="footer_wrap"></div> LIVE DEMO Στη συνέχεια μέσα στο div footer_wrap γράφουμε το παρακάτω: κώδικας: <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> Αυτό εισάγει την αριστερή πλευρά του footer μαζί με το μενού. LIVE DEMO Στη συνέχεια μέσα στο div footer_wrap και κάτω από το σημείο που κλείνει το div footer_left γράφουμε το παρακάτω: κώδικας: <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> Αυτό εισάγει την δεξιά πλευρά του footer μαζί με τη φόρμα. LIVE DEMO Άρα μέχρι στιγμής το div footer_wrap έχει την παρακάτω μορφή: κώδικας: <div id="footer_wrap"> <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> </div> </div> Και ολόκληρος ο κώδικας της σελίδας μέσα στο <body></body>: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_middle"> <p class="title"><span class="color">Our</span> Services</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_right"> <p class="title"><span class="color">Our</span> Portfolio</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> </div> </div> <div id="footer_wrap"> <div id="footer"> <div id="footer_left"> <p>Copyright © 2010 SmashingDzine | Privacy Policy</p> <ul> <li><a href="#">Home</a></li> <li><a href="#">About SmashingDzine </a></li> <li><a href="#">Our Services </a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="footer_right"> <form action="vars.php" method="post"> <label for="textinput">Enter your email to subscribe for our RSS Updates:</label> <br /> <input type="text" name="textinput" maxlength="25" /> <input type="submit" value="Submit" /> </form> </div> </div> </div> </body> LIVE DEMO
-
Το CSS tutorial που ακολουθεί σας εξηγεί αναλυτικά πως μπορείτε να δημιουργήσετε μια gallery εικόνων με χρήση CSS.H gallery αυτή θα είναι εύκολη στο σχεδιασμό και οι φωτογραφίες σας θα εμφανίζονται σε αυτή σαν να ήταν από μηχανή POLAROID.Αφού δημιουργήσουμε την gallery αυτή εν συνεχεία θα της δώσουμε κάποια εφέ με τη βοήθεια της jQuery (η οποία είναι javascript βιβλιοθήκη και πολύ διαδεδομένη στις μέρες μας). Το βοήθημα αποτελείται από δύο μέρη ..Στο πρώτο μέρος δημιουργούμε την css gallery και στο δεύτερο μέρος χρησιμοποιώντας τη jQuery δημιουργούμε κάποια εφέ κίνησης. Ας δούμε πρώτα από όλα δύο live demos του τι θα φτιάξουμε. 1.)CSS gallery Live Demo 2.)Css gallery με jQuery -Live Demo Στο δεύτερο demo μπορείτε με την χρήση των κουμπιών να ανοίγετε/κλείνετε την gallery καθώς και να εμφανίζετε/εξαφανίζετε τις περιγραφές από τις φωτογραφίες. ΠΡΩΤΟ ΜΕΡΟΣ ΒΟΗΘΗΜΑΤΟΣ-ΔΗΜΙΟΥΡΓΙΑ ΤΗΣ CSS GALLERY Βλέποντας το πρώτο demo παραπάνω, αυτό που μας ενδιαφέρει είναι πως θα δημιουργήσουμε τη κάθε μία φωτογραφία και το πλαίσιο της με τη βοήθεια του css κώδικα.Ας δούμε λοιπόν ένα σχέδιο της φωτογραφίας.... Ας εξηγήσουμε μία- μία τις παραπάνω περιοχές στη φωτογραφία. Περιοχή 1: Αυτό είναι το container κάθε μιας φωτογραφίας -ο χώρος που την περιέχει και την περιβάλλει δηλαδή. Είναι με γκρι χρώμα .Βλέπουμε ότι μέσα σε αυτό υπάρχουν και η μικρογραφία της φωτογραφίας μας, η περιοχή 3 καθώς και η περιοχή 2 όπου είναι ο χώρος όπου θα βρίσκεται η περιγραφή της φωτογραφίας. Επίσης βλέπουμε ότι εξωτερικά της περιοχής 1 υπάρχει μία λεπτή γκρι γραμμή, ένα border το οποίο έχει πλάτος 1px. Επίσης, ένα λεπτό border περιβάλλει και τη μικρογραφία της φωτογραφίας δηλαδή την περιοχή 3.Αρα συνοψίζοντας: Περιοχή 1: Το container περιβάλλει τη μικρογραφία της φωτογραφίας μας καθώς και την περιγραφή της. Περιοχή 2:Η περιοχή που περιβάλλει την περιγραφή της φωτογραφίας. Περιοχή 3:H περιοχή που περιέχει την μικρογραφία της φωτογραφίας μας. Επίσης: 1)Για τις μικρογραφίες των φωτογραφιών που θα εμφανίζονται στη css gallery θα χρησιμοποιήσουμε 4 φωτογραφίες που κατεβάσαμε από το site www.publicdomainpictures.net/ 2)Στην gallery θα πρέπει όλες οι μικρογραφίες να είναι στο ίδιο μέγεθος. Αλλιώς θα προκληθεί ασυμμετρία και δεν το θέλουμε. 3)Με τον όρο φωτογραφία θα εννοούμε ολόκληρο το περίγραμμα της φωτογραφίας μαζί με τη μικρογραφία της φωτογραφίας που βρίσκεται μέσα του. Μετά από όλα τα παραπάνω ξεκινάμε με το html και css μέρος της css gallery. Ας δούμε λοιπόν το ΗΤΜL μέρος της css-gallery: Θα δημιουργήσουμε μία div η οποία θα περιβάλλει όλα τα στοιχεία της σελίδας μας-την “wrapper”- και εν συνεχεία θα δημιουργήσουμε μία div όπου θα περιβάλλει την gallery και θα της δίνει το ελαφρύ γκρι φόντο. Επίσης θα δημιουργήσουμε μόνο μία φωτογραφία καταρχάς διότι όλες οι φωτογραφίες θα είναι παρόμοιες. Οπότε αν τη δημιουργήσουμε σωστά θα το επαναλάβουμε 8 φορές αυτό..!Τέλος , θα "αναγκάσουμε" τις μικρογραφίες των φωτογραφιών να εμφανίζονται στη σελίδα σε μέγεθος 150*150px.Αυτό θα γίνει μέσα από τον html κώδικα.Ο κώδικας που θα μπει μέσα στα body tags της σελίδας μας είναι: κώδικας: <div id="wrapper"> <div class="galleryContainer"> <div class="ourPhoto"> <img src="images/img1.png" width= “150” height= “150” /> <div class="ourTitle"> Perigrafi 1 </div> </div> </div> </div> Εξηγώντας τον παραπάνω κώδικα : H div με class "galleryContainer" είναι αυτή που θα περιέχει όλες τις φωτογραφίες μας. Βλέπουμε ότι η div που περιέχει όλη την φωτογραφία μας είναι η "ourPhoto".Αυτή λοιπόν είναι η περιοχή 1 που μιλήσαμε πριν. Επίσης, υπάρχει η div "ourTitle", στο σημείο που γράφουμε την περιγραφή μας. Αυτή είναι η περιοχή 2.Η περιοχή 3 είναι ουσιαστικά στο σημείο που βρίσκεται η μικρογραφία μας δηλαδή το κώδικας: <img src="images/img1.png" width="150" height="150"/> Τα "width" και "height" αναγκάζουν τη μικρογραφία μας να έχει μέγεθος 150*150 pixels. Για να δούμε την gallery μας χωρίς να έχουμε εφαρμόσει css.. Όμορφα.Ας δημιουργήσουμε τώρα και το CSS κομμάτι ώστε να δώσουμε στυλ στη φωτογραφία μας και να μοιάζει με polaroid. Ας δούμε λοιπόν το CSS μέρος της css-gallery: Κάτι πολύ σημαντικό!Ξέρουμε ότι όταν θέλουμε να εφαρμόσουμε ένα css στυλ πάνω σε ένα html στοιχείο,για παράδειγμα μία div ,μια παράγραφο p κλπ μπορούμε να το κάνουμε χρησιμοποιώντας το id του στοιχείου αυτού.Σε αυτό το tutorial θα χρησιμοποιήσουμε όχι το id του αλλά την κλάση του,class.Θα μπορούσαμε να χρησιμοποιήσουμε και το id εδώ αλλά ΔΕΝ ΤΟ ΚΑΝΟΥΜΕ ΔΙΟΤΙ: παράθεση: Το id αναφέρεται ΜΟΝΟ ΣΕ ΕΝΑ ΣΤΟΙΧΕΙΟ ΣΤΗ ΣΕΛΙΔΑ ΜΑΣ. Δηλαδή θα αναφερόταν μόνο σε μία φωτογραφία. Άρα για τις 8 φωτογραφίες θα έπρεπε να είχαμε 8 διαφορετικά ids με ίδιο κώδικα, κάτι που δεν το θέλουμε . Θέλουμε ο κώδικας μας να μην επαναλαμβάνεται .Από την άλλη πλευρά η css «class» αναφέρεται σε όλα τα στοιχεία της σελίδας μας που έχουν μία συγκεκριμένη class.Άρα θα γράψουμε ένα κώδικα για την εμφάνιση της κλάσης "ourPhoto" και θα το εφαρμόσουμε σε όλες τις φωτογραφίες!!! Το *{margin:0;padding:0;} το κάνουμε διότι:Όλα τα html elements έχουν προκαθορισμένα margins και paddings.Με την παραπάνω εντολή αφαιρούμε κάθε margin και padding που έχει κάθε html στοιχείο στη σελίδα μας με σκοπό να ορίσουμε εμείς τα paddings και τα margins που θέλουμε. Στη div με class = "galleryContainer" δίνουμε κάποια paddings –περιθώρια από τη μέσα μεριά του galleryContainer – έτσι ώστε η φωτογραφία μας που βρίσκεται μέσα σε αυτό το container να μην ξεκινάει από πάνω αριστερά αλλά να έχει ένα μικρό περιθώριο και από πάνω και από κάτω και από αριστερά.. Το float:left κάνει τη galleryContainer να μετακινηθεί όσο πιο αριστερά γίνεται στο μέσα στο "wrapper" , το element που την περιέχει δηλαδή. Ο κώδικας CSS που θα χρησιμοποιήσουμε για τις φωτογραφίες μας. Στον παραπάνω css κώδικα προσθέτουμε.. κώδικας: .ourPhoto { border: 1px solid #cccccc; height: auto; float: left; background:#ffffff; margin-right: 10px; margin-bottom:10px; } .ourPhoto img{ margin-top:10px; margin-left:10px; margin-right: 10px; margin-bottom: 10px; border: 1px solid silver; } .ourTitle { text-align: center; font-size:10px; width: 150px; margin-left: 5px; margin-right:5px; margin-top:3px; margin-bottom:5px; height:30px; } Για να δούμε λίγο την gallery μας τώρα.. Μία χαρά η φωτογραφία μας ,όπως ακριβώς τη θέλουμε. Για να εξηγήσουμε κάποια σημεία του παραπάνω CSS κώδικα. .ourPhoto :H div που εφαρμόζουμε αυτή την css class είναι ουσιαστικά η περιοχή 1 που είδαμε πιο πάνω. Σε αυτή την div φροντίζουμε να δώσουμε το χρώμα που θα περιβάλλει τη μικρογραφία της φωτογραφία μας και ,το λευκό .Επίσης δίνουμε και ένα border 1px πλάτος. Επίσης της δίνουμε ένα margin-top και ένα margin-right που ουσιαστικά είναι το πόσο θα απέχει αυτή η div -με class ourPhoto-από τα άλλα elements από πάνω και προς τα δεξία. Δηλαδή η επόμενη div με class “ourPhoto” ξεκινάει 10px δεξιότερα. .ourPhoto img: Aυτή η κλάση αναφέρεται σε οποιοδήποτε image link υπάρχει μέσα σε divs με class = "ourPhoto".Δηλαδή στο κώδικας: <img src="images/img1.png" width="150" height="150"/> . Εδώ είναι το στυλ που εφαρμόζουμε στη μικρογραφία που βρίσκεται μέσα στην "ourPhoto" div.Tης δίνουμε ένα border και κάποια margins που με αυτά δημιουργούμε την απόσταση μεταξύ της μικρογραφίας και του εξωτερικού border της φωτογραφίας μας (αυτου του border που δημιουργούμε στη div με class "ourPhoto"). .ourTitle:Εδώ ορίζουμε μία div στην οποία θα γράψουμε την περιγραφή της φωτογραφίας μας! Δεν έχει τίποτα ιδιαίτερο να εξηγήσουμε εδώ. Στη συνέχεια στον html κώδικα προσθέσαμε και τις υπόλοιπες φωτογραφίες.Δείτε όλο τον κώδικα html και css εδώ. Βασικα τελειώσαμε!!Στον html κώδικα θα επαναλάβουμε τη div "ourPhoto" και ό,τι περιλαμβάνει αυτή ώστε να δημιουργήσουμε την gallery μας για 8 φωτογραφίες. ΟΛΟΚΛΗΡΟΣ Ο HTML ΚΩΔΙΚΑΣ ΕΔΩ κώδικας: <div id="wrapper"> <div class="galleryContainer"> <div class="ourPhoto"> <img src="images/img1.png" width="150" height="150"/> <div class="ourTitle"> Photo 1 </div> </div> <div class="ourPhoto"> <img src="images/img2.png" width="150" height="150"/> <div class="ourTitle"> Photo 2 </div> </div> <div class="ourPhoto"> <img src="images/img3.png" width="150" height="150"/> <div class="ourTitle"> Photo 3 </div> </div> <div class="ourPhoto"> <img src="images/img4.png" width="150" height="150"/> <div class="ourTitle"> Photo 4 </div> </div> <div class="ourPhoto"> <img src="images/img2.png" width="150" height="150"/> <div class="ourTitle"> Photo 5 </div> </div> <div class="ourPhoto"> <img src="images/img1.png" width="150" height="150"/> <div class="ourTitle"> Photo 6 </div> </div> <div class="ourPhoto"> <img src="images/img4.png" width="150" height="150"/> <div class="ourTitle"> Photo 7 </div> </div> <div class="ourPhoto"> <img src="images/img3.png" width="150" height="150"/> <div class="ourTitle"> Photo 8 </div> </div> </div> </div> </div> ΟΛΟΚΛΗΡΟΣ Ο CSS ΚΩΔΙΚΑΣ ΕΔΩ..... κώδικας: *{ margin:0; padding:0; } #wrapper { width:850px; margin: 0 auto; color: blue; } .galleryContainer{ padding-top:10px; padding-left:10px; padding-bottom:10px; width:736px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; float: left; background:#eeeeee; } .ourPhoto { border: 1px solid #cccccc; height: auto; float: left; background:#ffffff; margin-right: 10px; margin-bottom:10px; } .ourPhoto img{ margin-top:10px; margin-left:10px; margin-right: 10px; margin-bottom: 10px; border: 1px solid silver; } .ourTitle { text-align: center; font-size:10px; width: 150px; margin-left: 5px; margin-right:5px; margin-top:3px; margin-bottom:5px; height:30px; } ΔΕΥΤΕΡΟ ΜΕΡΟΣ ΒΟΗΘΗΜΑΤΟΣ-ΛΕΙΤΟΥΡΓΙΚΟΤΗΤΑ ΜΕ JQUERY Αφού δημιουργήσαμε τη gallery μας θέλουμε: 1)Πατώντας ένα κουμπί να "ξεδιπλώνεται"- ανοίγει η gallery μας προς τα κάτω. 2)Πατώντας ένα κουμπί να διπλώνεται η gallery μας προς τα πάνω. 3)Πατώντας ένα κουμπί εμφανίζονται οι περιγραφές των φωτογραφιών.Εάν το ξαναπατήσουμε να εξαφανίζονται. Σαν πρώτη σκέψη είναι ότι πρέπει στο html κομμάτι να προσθέσουμε μια div στην οποία θα μπουν τα κουμπιά που θα δημιούργησουμε.Αυτή η div θα είναι μέσα στο wrapper και μετά την div με class = "galleryContainer". Επίσης στα κουμπιά μας ,που θα προέλθουν από την html tag "button", θα δώσουμε στυλ μέσω CSS!Στη συνέχεια θα προσθέσουμε την jQuery η οποία θα ελέγχει το τι θα συμβεί όταν πατηθούν τα κουμπιά..!Και τελειώσαμε.. Ξεκινάμε λοιπόν… Δημιουργώντας τη div με τα κουμπιά-Html μέρος.. Προσθέτουμε τον παρακάτω κώδικα ΜΕΤΑ το τέλος της div με κλάση "galleryContainer” κώδικας: <div id="buttons"> <button id="slideBtn" value="Δείξε το portfolio">Portfolio</button> <button id="closeSlide" value="Κλείσε το portfolio">Κλείσε το portfolio!</button> <button id="descBtn" value="Δείξε το portfolio">Περιγραφές.</button> </div> Εδώ λοιπόν δημιουργούμε μία div με id ="buttons" και μέσα σε αυτή τοποθετούμε 3 κουμπιά το καθένα από τα οποία έχει ένα συγκεκριμένο id.Αυτό το id θα χρησιμοποιηθεί όχι μόνο από το CSS αλλά και από την jQuery.Για να δούμε τι έχουμε φτιάξει.. Ωραία…Ας μετακινήσουμε λίγο τα κουμπιά μας τώρα και ας εφαρμόσουμε σε αυτά CSS ώστε να γίνουν πιο όμορφα… Δημιουργώντας τη div με τα κουμπιά-CSS μέρος.. Ας δούμε λίγο τον κώδικα css που μπορούμε να προσθέσουμε στον παραπάνω css κώδικα-αυτόν στο πρώτο μέρος. κώδικας: #buttons{ width:750px; margin:0 auto; } Με το παραπάνω block κώδικα τοποθετούμε τη div με τα κουμπιά κάτω από την div με class=”galleryContainer"..Με το margin:0 auto κεντράρουμε στη μέση τη div με id “buttons”. Για να δούμε πώς μοιάζει η gallery μας πλέον… Αυτό που θα κάνουμε τώρα θα είναι το εξής..Θα εφαρμόσουμε CSS στυλ στα κουμπιά μας ώστε να τα κάνουμε πιο όμορφα.Παρακάτω δίνεται ο κώδικας CSS των κουμπιών και όπου χρειάζεται τον εξηγούμε. CSS στυλ των κουμπιών. κώδικας: #slideBtn{ float:left; padding:5px; border:2px double green; background: #A3CA80; margin-left:10px; color:white; font-family:Calibri; font-size:25px; float:left; } #closeSlide{ float:left; padding:5px; border:2px double red; background: #FC98A9; margin-left:20px; color:white; font-family:Calibri; font-size:25px; display: inline; } #descBtn{ float:left; padding:5px; border:2px double gray; background: #DDDDDD; margin-left:20px; color:white; font-family:Calibri; font-size:25px; display: inline; } Στον παραπάνω κώδικα δεν υπάρχει κάτι ιδιαίτερα δύσκολο που χρήζει εξήγησης…Κάτι λείπει όμως.. Ναι ,λείπουν τα εικονίδια από τα κουμπιά. Εικονίδια στα κουμπιά-HTML και CSS κώδικας. Εδώ με μία απλή αλλαγή στον html κώδικα θα προσθέσουμε τα εικονίδια μέσα στα κουμπιά. κώδικας: <div id="buttons"> <button id="slideBtn" value="Δείξε το portfolio"><span class="spans"><img src="images/btnOpen.png"/></span>Portfolio</button> <button id="closeSlide" value="Κλείσε το portfolio"><span class="spans"><img src="images/btnClose.png"/></span>Κλείσε το portfolio!</button> <button id="descBtn" value="Δείξε το portfolio"><span class="spans"><img src="images/btnDesc.png"/></span>Περιγραφές.</button> </div> Βλέπετε μία μικρή διαφορά στα κουμπιά;Έχει προστεθεί μέσα σε αυτά ένα στοιχείο html - το span μέσα στο οποίο έχουμε προσθέσει το εικονίδιο μας!!!Τι είναι όμως το span element; Το span είναι ένα html στοιχείο το οποίο μοιάζει πολύ με τo div..Η διαφορά είναι η εξής..Το span δεν προκαλεί μορφοποίηση της σελίδας μας.Δηλαδη εάν έχουμε μία div και τοποθετήσουμε μία δεύτερη μέσα της ,εκεί που την τοποθετούμε υπάρχει line-break (αλλαγή γραμμής).Με το span όμως δεν συμβαίνει αυτό..Γι αυτό μέσα στο button τοποθετούμε ένα span στοιχείο ώστε μέσα σε αυτό να τοποθετήσουμε το εικονίδιο μας και να βρίσκεται στην ίδια γραμμή με τον τίτλο του κουμπιού μας! Για να ορίσουμε css στυλ για την κλάση "spans" προσθέτουμε στον παραπάνω css κώδικα το : κώδικας: .spans{float:left; margin-right:10px; } Για να δούμε τώρα…! To μόνο που μένει είναι: όταν φορτώνουμε τη σελίδα να μη φαίνεται η gallery μας…Αυτό το επιτυγχάνουμε προσθέτοντας στο css της κλάσης "galleryContainer" την εντολή: display:none;. Επίσης το ίδιο θα κάνουμε για τις περιγραφές των φωτογραφιών.Αυτές ελέγχονται με την κλάση "ourTitle".Για να δούμε το συνολικό κώδικα.. ΝΑΙ τελειώσαμε….Ας πάμε τώρα στο τελευταίο κομμάτι… CSS gallery- jQuery κώδικας… Εάν είστε πλήρως αρχάριος από jQuery μπορείτε να δείτε Jquery.com για να πάρετε μία πρώτη γεύση σχετικά με αυτή. Στο τελευταίο αυτό κομμάτι θα χρησιμοποιήσουμε jQuery η οποία θα μας εμφανίζει-εξαφανίζει την gallery μας.Επίσης θα χρησιμοποιήσουμε κουμπί που θα εμφανίζει και θα εξαφανίζει τις περιγραφές των εικόνων.. Κώδικας jQuery. Το αρχείο μας θα το ονομάσουμε sliding.js.. Στο head της σελίδας html προσθέστε τις δύο ακόλουθες γραμμές.. κώδικας: <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="sliding.js"></script> Η πρώτη γραμμή δηλώνει ότι χρησιμοποιούμε τη βιβλιοθήκη της jQuery και η δεύτερη γραμμή δηλώνει ότι θα χρησιμοποιήσουμε και το αρχείο "sliding.js". Και το "jquery-1.4.2.min.js" και το "sliding.js" σας το δίνουμε στο τέλος του βοηθήματος για κατέβασμα. Αρχείο "sliding.js": κώδικας: $(document).ready(function(){ }); Πάντα στην jQuery ελέγχουμε πρώτα εάν έχει φορτώσει πλήρως η σελίδα μας.Με τον παραπάνω κώδικα ελέγχουμε ακριβώς αυτό.Μέσα στις "{ }" θα μπει ολόκληρος ο κώδικας που θα ελέγχει τα κουμπιά μας.Όπως έχουμε πει η jQuery θα ελέγξει την δράση των κουμπιών με βάση το id του κάθε κουμπιού. Για να δούμε ολοκληρωμένο τον κώδικα της jQuery. κώδικας: $(document).ready(function(){ $('#slideBtn:button').click(function() { $(".galleryContainer").slideDown("slow"); }); $('#closeSlide:button').click(function() { $(".galleryContainer").slideUp("slow"); }); $('#descBtn:button').toggle( function () { $(".ourTitle").fadeIn("slow"); }, function () { $(".ourTitle").fadeOut("slow");; } ); }); Ας εξηγήσουμε.. $('#slideBtn:button').click(function():Εδώ με τη βοήθεια του jQuery selector '$' διαλέγουμε πιο στοιχείο θα ελέγξουμε.Εδώ ελέγχουμε το στοιχείο που έχει id 'slideBtn' και με το :button δηλώνουμε στη jQuery ότι το στοιχείο με αυτό το id είναι κουμπί.Στη συνέχεια ορίζουμε ότι ο κώδικας γι αυτό το κουμπί θα εκτελεστεί μόνο εάν το κλικάρουμε -αυτό το δηλώνουμε με την συνάρτηση click() . $(".galleryContainer").slideDown("slow");:Στη γραμμή αυτή χρησιμοποιούμε τη συνάρτηση slideDonw() της jQuery η οποία ,στο στοιχείο που έχει εφαρμοστεί δίνει το εφέ του "ξετυλίγματος" προς τα κάτω.Εδώ την εφαρμόζουμε στο στοιχείο με id ίσο με "galleryContainer".Στη συνάρτηση slideDown μπορούμε να δώσουμε παραμέτρους όπως "slow,medium,fast" καθώς και νούμερα σε miliseconds.Αυτή η παράμετρος είναι που καθορίζει την ταχύτητα με την οποία συμβαίνει το εφέ.. Παρόμοια συμβαίνουν και για τα άλλα δύο μας κουμπιά.Προσοχή στη γραμμή 14. Εδώ χρησιμοποιούμε τη συνάρτηση toggle() όπου μέσα σε αυτή μπορούμε να γράψουμε 2 εντολές της jQuery και να εκτελούμε μία την μία και μία την άλλη..Δηλαδή πατώντας μία φορά το κουμπί εκτελείται η πρώτη εντολή και αν το ξαναπατήσουμε εκτελείται η δεύτερη ,μετά πάλι η πρώτη κλπ..Εδώ χρησιμοποιούμε τις εντολές fadeIn και fadeOut οι οποίες εμφανίζουν και εξαφανίζουν τα στοιχεία με class "ourTitle" δηλαδή τις περιγραφές μας… Κάπου εδώ τελειώνει αυτό το tutorial..! : Κατεβάστε τα html και css αρχεία του τελικου παραδείγματος εδώ..
-
Σκέψεις και δημιουργία κρυφής περιοχής με html και CSS.. Θυμάστε την κρυφή περιοχή;Είναι η περιοχή η οποία βρίσκεται ακριβώς κάτω από τα 4 εικονίδια και πάνω από τον τίτλο του “portfolio” μας.Είναι μία περιοχή που θέλουμε όταν κλικάρουμε πάνω στα εικονίδια να ξετυλίγεται προς τα κάτω.Ανάλογα με το εικονίδιο που πατάμε η περιοχή αυτή θα “γεμίζει”με διαφορετικό περιεχόμενο.Η περιοχή αυτή είναι 4 div ουσιαστικά οι οποίες είναι κρυμμένες και εμφανίζονται και εξαφανίζονται με jQuery.Ας θυμηθούμε λίγο την εικόνα: Βλέπετε στα δεξιά που μιλάμε για 4 divs που έχουν κοινή κλάση content;; Εκεί ακριβώς είναι η κρυφή περιοχή.Αυτές οι 4 divs θα έχουν μία κοινή κλάση και 4 διαφορετικά ids αναλόγως με το τι θα περιέχει η κάθε μία περιοχή..Ας δούμε τι θέλουμε ακριβώς.. 1.)Εάν κλικάρω το εικονίδιο με το RSS θέλω να εμφανίζεται η περιοχή η οποία μέσα θα έχει μία φόρμα που θα μπορεί κάποιος να βάλει το email του ώστε να λαμβάνει τα άρθρα μας.Δεν θα την κάνω λειτουργική τη φόρμα απλά θα τη δημιουργήσουμε 2.)Εαν κλικάρω το fb εικονίδιο θέλω να εμφανίζεται μέσα στην περιοχή αυτή η σελίδα μου στο facebook.Εδώ θα χρησιμοποιήσω τον κώδικα που μου δίνεται στο facebook,στη σελίδα των developers.Θα το εξηγήσουμε παρακάτω. 3.)Eάν κλικάρω το twitter εικονίδιο θέλω στην περιοχή αυτή να εμφανίζονται τα τελευταία 3 tweets μου.Για ακόμα μία φορά θα μας λυθούν τα χέρια με τη βοήθεια από το επίσημο site του twitter. 4.)Εάν κλικάρω το εικονίδιο με το mail τότε στην περιοχή αυτή θέλω να εμφανιστεί μία φόρμα επικοινωνίας που θα μου ζητάει να τη συμπληρώσω. 5.)Κάθε div από τις παραπάνω θα έχει ένα link από κάτω που θα την κλείνει .Δηλαδή θα το πατάμε και θα την κλείνουμε.. Αυτά....Για πάμε.. Ο html κώδικας.. Ο παρακάτω κώδικας τοποθετείται αμέσως μετά το κώδικας: <div class="socialIcons" id="mail" title="mailDiv"></div> που υπάρχει στον html κώδικα μας της σελίδας "social.html". κώδικας: <div id="rssDiv" class="content"> <!-- I forma gia to rss!! --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="facebookDiv" class="content"> <!-- O kwdikas apo to facebook developers center --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="twitterDiv" class="content"> <!-- O kwdikas apo to twitter gia ta teleytaia tweets --> <-- to link poy tha kleinei ti div ayti --> </div> <div id="mailDiv" class="content"> <!--I forma epikoinwnias mas --> <-- to link poy tha kleinei ti div ayti --> </div> Html και CSS για τις divs με class “content” 1) rssDiv Στη div με id = “rssDiv” δημιουργούμε μία φόρμα επικοινωνίας με ένα πεδίο για το mail.Άρα η div μας γίνεται.. κώδικας: <div id="rssDiv" class="content"> <form method="POST" action="" id="form"> <label for="name" id="mails">Email</label> <input type="text" id="text" value="Your Email here"/> <input type="submit" value="Submit" id="submit"/> </form> <div class="close"><a href="#">Close</a></div> </div> Αυτό ήταν.Παρατηρείτε που κάτω ακριβώς από τη φόρμα τοποθέτησα ένα link με κλάση “close”;Είναι το link που θα κλείνει την div αυτή όταν θέλουμε εμείς. Ας προσθέσουμε και τον αντίστοιχο κώδικα στο CSS αρχείο και μετά να δούμε πώς μοιάζει. κώδικας: .content{ float:left; background-color: #E4E4E4; width:100%; margin-top:2px; padding:2px; overflow:hidden; } .close{ font-size:10px; padding-left:1px; width: 100%; float:left; } .close a{ color:red; font-weight:bold; } #rssDiv{ margin-bottom:-2px; } #rssDiv label{ padding-top:5px; font-size:12px; font-family:Kalinga; display:inline; } #form #text { padding-bottom:3px; } #form #submit{ font-family:Kalinga; font-size:11px; color:White; width:40px; background: #383838; cursor: pointer; border:1px solid blue; margin-bottom:1px; padding-top:3px; } Γραμμή 1:Εδώ είναι οι κανόνες CSS που εφαρμόζονται σε όλες τις divs που έχουν την κλάση “content“. Γραμμή 11:Εδώ δημιουργούμε το στυλ που θα έχει η div που θα περιέχει το link μας το οποίο θα κλείνει τη div.Επειδή το link αυτό θα το χρησιμοποιήσουμε 4 φορές γι αυτό και δημιουργούμε ουσιαστικά μία css class την “.close“. Γραμμή 19:Εδώ ρυθμίζουμε την εμφάνιση του link μας που θα κλείνει τις div. Γραμμή 23:Εδώ ορίζουμε τα css στυλ της div που έχει id = “rssDiv”.. Γραμμές 29,36,40:Σε κάθε ένα από αυτά τα block κώδικα ελέγχουμε την εμφάνιση των στοιχείων της φόρμας επικοινωνίας.Ελέγχουμε την εμφάνιση του label,του input που είναι το πεδίο εισαγωγής του mail καθώς και του κουμπιού submit!! Ας δούμε ένα στιγμιότυπο.. Όμορφα.Έτσι ακριβώς θα δημιουργήσουμε και τις άλλες 3 divs και θα τις κρύψουμε προσθέτοντας στο τέλος το CSS κανόνα display:none μέσα στο css της κλάσης “.content”. 2) facebookDiv Σε αυτή τη div θα χρησιμοποιήσουμε τα εργαλεία που μας δίνει το facebook για developers.Πάμε στη σελίδα Facebook Plugins-Like Box και βλέπουμε ότι εκεί έχει μία εφαρμογή η οποία μας δίνει τη δυνατότητα να δημιουργήσουμε ένα like-box !Mας ζητάει το id της σελίδας μας στο fb ,το πλάτος που θέλουμε να έχει το like box (εμείς ζητάμε 250px πλάτος) κλπ.Όταν τα δώσουμε αυτά και πατήσουμε “get code” αντιγράφουμε τον κώδικα και θα τον τοποθετήσουμε στη div με id =”facebookDiv“.. παράθεση: Σημείωση:Κανονικά το like box περιέχει και μικρογραφίες από κάποιους θαυμαστές της σελίδας μας.Για κάποιο λόγο τις τελευταίες μέρες κάποιες φορές περιέχει και κάποιες όχι.. Ας Δούμε λίγο τα περιεχόμενα της div.. κώδικας: <div id="facebookDiv" class="content"> <iframe src="http://www.facebook.com/plugins/likebox.php?id=125811164104079& width=250&connections=20& stream=false&header=true&height=287" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:287px; " allowTransparency="true"></iframe> <div class="close"><a href="#">Close</a></div> </div> Δεν υπάρχουν κανόνες css για το id=”facebookDiv” διότι δεν χρειάζεται.Όπως βλέπεται ο κώδικας που μας δόθηκε περιέχει και css μέσα. 3) twitterDiv Εδώ θα τοποθετήσουμε στη div αυτή τα τελευταία μας tweets. Πηγαίνετε στη σελίδα Τwitter profile Widget και από κει μπορείτε να ελέγξετε κάποιες παραμέτρους για το widget σας.Αφού τελειώσετε πατήστε “grab code” και θα σας δoθεί ο κώδικας.Αυτόν τον κώδικα πρέπει να τοποθετήσουμε μέσα στη div με id =”twitterDiv”.Εμείς όμως θα κάνουμε κάτι πιο έξυπνο από το να τοποθετήσουμε όλο αυτόν τον κώδικα μέσα στη div.Λοιπόν ο κώδικας που μας δίνει στη σελίδα με το Twitter widget είναι ο εξής: κώδικας: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('akisplace').start(); </script> Εμείς θα κάνουμε το εξής εδώ: Βήμα 1: Την πρώτη γραμμή του κώδικα αυτού θα την τοποθετήσουμε στο head της σελίδας μας.Αυτό μπορούμε να το κάνουμε διότι αν παρατηρήσετε στη πρώτη γραμμή καλείται ένα javascript αρχείο το “widgets.js” από το widget.twimg.com.Οπότε εάν τοποθετηθεί στη σελίδα μας μπορούμε να καλούμε το αρχείο από το head μας.Ας δούμε λίγο το head μας. κώδικας: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Archimidis Mertzanos" /> <link rel="stylesheet" href="styles_test.css"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <title>Socialize with us!!</title> </head> Βήμα 2: Στο κώδικα που που μένει ,από τη γραμμή 2-31, θα τον τοποθετήσουμε σε ένα αρχείο javascript το οποίο θα δημιουργήσουμε εμείς.Το αρχείο το ονομάζουμε “tweet.js” και το τοποθετούμε σε ένα φάκελο που δημιουργούμε και τον ονομάζουμε “js”.Το αρχείο αυτό θα περιέχει τον κώδικα από τις γραμμές 2-31 χωρίς φυσικά τα script tags(αφού το αρχείο είναι javascript έτσι και αλλιώς-τα script tags τα χρησιμοποιούμε σε σελίδα html για να δηλώσουμε ότι θα ενσωματώσουμε κάποιο script στη σελίδα μας). Αφού κάνουμε τα παραπάνω βήματα μέσα στην div “twitterDiv” τοποθετούμε το παρακάτω και η div μας θα μοιάζει ως εξής.. κώδικας: <div id="twitterDiv" class="content"> <script src="js/tweet.js"></script> <div class="close"><a href="#">Close</a></div> </div> Είδατε; Mε μία γραμμή κώδικα (γραμμή 2) καλούμε το twitter widget πλέον!! 4) mailDiv Εδώ θα δημιουργήσουμε τα περιεχόμενα της div με id “mailDiv” που θα περιέχει την φόρμα επικοινωνίας μας. Ο html κώδικας…. κώδικας: <div id="mailDiv" class="content"> <form method="get" action="" id="contactform"> <label for="name">Name:<abbr>*</abbr></label> <input type="text" id="name" name="name"/> <br /> <label>Email:<abbr>*</abbr> </label> <input type="text" id="email" name="email"/> <br /> <label for="comments">Your Comments<abbr>*</abbr></label> <textarea id="textarea" name="textarea" id="textarea"></textarea> <br /> <input type="submit" value="Submit" id="button_validate"/> <span id="validation_result" class="result"></span> </form> <div class="close"><a href="#">Close</a></div> </div> Ας το κάνουμε λίγο πιο όμορφο με τη χρήση CSS. Ας προσθέσουμε τον παρακάτω κώδικα στο CSS αρχείο που έχουμε.. κώδικας: #contactform label{ display:block; margin-left:2px; font:Verdana; font-size:16px; font-weight:bold; color:black;} #contactform input{ font:Kalinga; font-size:12px; color:black; padding:2px; } #contactform textarea{ width:80%; height:60px; padding:2px; text-align:left; } #contactform #submit{ font-family:Kalinga; font-size:14px; color:White; background: #383838; cursor: pointer; border:1px solid blue; margin-bottom:1px; margin-top:2px; padding-top:3px; } abbr{ color:red; } ΝΑΙ…Είμαστε έτοιμοι,ένα βήμα πριν αρχίσουμε με την jQuery.Το παραπάνω CSS δεν θα το εξηγήσουμε καθότι είναι πολύ εύκολο.Για πάμε στο τελευταίο κομμάτι και στην εφαρμογή της jQuery.
-
Πρώτες σκέψεις-Πρώτο σχέδιο Λοιπόν κατ’αρχάς να δούμε λίγο τι ζητάμε.Θέλουμε ένα panel το οποίο θα περιέχει κάποιο περιεχόμενο και ακριβώς από κάτω του θα υπάρχει ένα κουμπί-μπορεί να είναι μία εικόνα- το οποίο θα το πατάμε και θα μπορούμε να το ανοίξουμε και να το κλείσουμε. Αυτά ουσιαστικά θέλουμε. Άρα λοιπόν ένα πρόχειρο σχέδιο θα μπορούσε να είναι το παρακάτω. Όπως βλέπουμε έχει 2 περιοχές. Στη μία θα τοποθετήσουμε το περιεχόμενο μας και στην άλλη θα είναι το κουμπί που θα ελέγχουμε την εμφάνιση ή όχι του panel μας. Δεύτερες σκέψεις-Αναλυτικό σχέδιο Μάλιστα.Είδαμε παραπάνω πώς θα μοιάζει το sliding panel μας.Τι να τοποθετήσουμε μέσα όμως και πώς;Τι περιεχόμενο να χει; Ας κάνουμε μία δύο σκέψεις.Αυτό το panel θα βρίσκεται κλειστό στην κορυφή της σελίδας μας.Ο χρήστης το βλέπει και το πατάει.Τι θα θελε να δει?Θα μπορούσαμε να του δώσουμε κάποιες πληροφορίες για το site μας,θα μπορούσαμε επίσης να τοποθετήσουμε σημαντικές πληροφορίες όπως το rss feed μας,το twitter μας,το facebook μας,μία φόρμα επικοινωνίας..Επιπροσθέτως θα μπορούσαμε του δείξουμε και κάποια από τα έργα μας,σαν ένα μικρό portfolio.Και πώς μπορώ να το χωρέσω όλα αυτά εκεί; Μήπως να χρησιμοποιούσα κάποιο “κρυφό” χώρο μέσα στο πάνελ;;Ας τα βάλουμε όλα αυτά κάτω και ίσως να μπορούσαμε να σχεδιάσουμε ένα αναλυτικότερο σχέδιο από το προηγούμεν.. Τι θα χρειαστώ για την υλοποίηση και τελικό σχέδιο. Αφού δημιούργησα το παραπάνω σχέδιο μπορώ να σκεφτώ και κάποια επιμέρους πράγματα.Για να φτιάξω το panel αυτό θα χρησιμοποιήσω html και css σίγουρα.Από κει και πέρα;;Είναι σίγουρο ότι θα χρειαστώ και jQuery διότι όπως είπαμε θα μπορώ να ανοιγοκλείνω το panel.Επίσης θα χρησιμοποιήσω jQuery στο σημείο 3 στην παραπάνω εικόνα όπου θα έχω το κρυφό χώρο,μία κρυμμένη div δηλαδή.Επιπροσθέτως θα χρησιμοποιήσω jQuery στο σημείο που θα έχω το portfolio.Όταν ο χρήστης πατάει πάνω σε μία φωτογραφία αυτή να ανοίγει με ιδιαίτερο τρόπο μέσα στο λεγόμενο “lightbox“.Αυτά γι αρχή.Ας δημιουργήσουμε πρώτα το sliding panel μας με html και CSS και εν συνεχεία του προσθέτουμε ότι λειτουργικότητα θέλουμε.Δείτε παρακάτω ένα τελικό σχέδιο που βοηθάει στην κατανόηση των βασικών divs και κλάσεων που θα χρησιμοποιήσουμε. Τελικές σημειώσεις και ξεκίνημα της υλοποίησης. Είμαστε έτοιμοι ουσιαστικά να αρχίσουμε.Θα ήθελα σε αυτό το σημείο να πω ότι το συγκεκριμένο tutorial θα μπορούσε να γίνει και με άλλους τρόπους.Απλά διαλέγουμε ένα και σας τον δείχνουμε με σκοπό να πειραματιστείτε και εσείς μετά.Επίσης θα χρησιμοποιήσουμε κάποια plugins της jQuery πχ για το “lightbox” και θα σας πούμε πώς τα ενσωματώνουμε στο site μας.Δεν θα μπούμε όμως σε περαιτέρω λεπτομέρειες, για παράδειγμα λεπτομερές configuration διότι θα χαθεί ο σκοπός του tutorial αυτού.Θα χρησιμοποιήσουμε και λίγο CSS3.Ας ξεκινήσουμε λοιπόν με τον html κώδικα αλλά και με CSS κώδικα για να δώσουμε από την αρχή το στυλ που θέλουμε. Κώδικας html-CSS και εξηγήσεις. Σε αυτό το κομμάτι θα κάνουμε το σκελετό του sliding panel και θα εφαρμόζουμε σιγά σιγά το css έτσι ώστε να δημιουργήσουμε την εμφάνιση που θέλουμε.Ας ξεκινήσουμε.Θα δημιουργήσουμε την div wrapper η οποία περικλείει τα πάντα.Μέσα σε αυτή θα τοποθετήσουμε τις εξής divs με: 1)id=”socializeContainer“:Αυτή η div ουσιαστικά περικλείει την περιοχή 1-περιεχόμενα panel- που είδαμε στην πρώτη φωτογραφία. 2.)id=”socializetitle“:Αυτή η div περιέχει τον τίτλο μας. 3.)id=”portfolioTitle“:Αυτή η div περιέχει τον τίτλο του portfolio μας. Επίσης θα δημιουργήσουμε 4 divs για τα 4 social εικονίδια μας που θα έχουν μία κοινή κλάση όλα,αφού σε όλα θα εφαρμόζεται το ίδιο css στυλ.Η κοινή κλάση αυτή ονομάζεται “.socialIcons“.H κάθε μία div από αυτές θα έχει διαφορετικό id καθώς θα έχει διαφορετικό εικονίδιο σαν background.Tέλος θα δημιουργήσουμε 3 div με κοινή κλάση “.boxes” η οποία θα μας χρησιμεύσει στο να δώσουμε στυλ στις μικρογραφίες που θα έχουμε στο portfolio.Όσον αφορά την κρυφή div και την div με το κουμπί θα το κάνουμε λίγο αργότερα.. Ας δούμε λίγο κώδικα html και ένα στιγμιότυπο εφαρμόζοντας τα παραπάνω. Δημιουργήστε ένα αρχείο html.Ονομάστε το “social.html”.Ανάμεσα στα body tags τοποθετούμε: κώδικας: <!-- το wrapper περιλαμβάνει τα πάντα --> <div id="wrapper"> <!--To container μας --> <div id="socializeContainer"> <!--O titlos sto container --> <div id="socializetitle">Socialize with us..Stay in touch!</div> <!--Ta eikonidia mas --> Εδω μπαίνουν τα εικονίδια <div class="socialIcons" id="rss" title="rssDiv"></div> <div class="socialIcons" id="facebook" title="facebookDiv"></div> <div class="socialIcons" id="twitter" title="twitterDiv"></div> <div class="socialIcons" id="mail" title="mailDiv"></div> <!--O titlos sto portfolio --> <div id="portfolioTitle">Mini-Folio! Take a look..</div> Εδώ μπαίνουν οι φωτό από το portfolio <div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div> <div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div> <div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div> <br /> </div> </div> Μερικές εξηγήσεις. Βλέπετε πόσο απλός είναι ο κώδικας;Δεν κάναμε κάτι ιδιαίτερο.Το μόνο που κάναμε είναι να “μεταφράσουμε” αυτά που είπαμε παραπάνω.Στις γραμμές 13-16 βλέπετε τις 4 divs που έχουμε δημιουργήσει με σκοπό να τοποθετήσουμε ένα μικρό εικονίδιο μέσα σε αυτές.Όπως παρατηρείτε όλες έχουν μία κοινή κλάση,τη “.socialIcons” και 4 διαφορετικά ids(όλα τα html στοιχεία έχουν πάντα διαφορετικά ids).Επίσης στις γραμμές 21-23 παρατηρείτε τις τρεις div που δημιουργήσαμε και ουσιαστικά είναι οι div που θα μπουν οι μικρογραφίες. Aς δούμε ένα στιγμιότυπο. Όλα οκ!Ήρθε η ώρα να εφαρμόσουμε λίγο CSS ώστε να δείξει καλύτερα αυτό που φτιάξαμε.Δημιουργήστε ένα αρχείο css και ονομάστε το “styles.css”. Τοποθετήστε το μέσα στον ίδιο φάκελο που τοποθετήσατε το “social.html”. Ανάμεσα στα head tags της “social.html” τοποθετήστε το link: κώδικας: <link rel="stylesheet" href="styles.css"/> Είμαστε έτοιμοι.Ξεκινάμε την εφαρμογή του CSS κώδικα. Εφαρμογή CSS κώδικα Εφαρμόζουμε στυλ στα παραπάνω,εξηγούμε και βλέπουμε ένα στιγμιότυπο.Σημαντική σημείωση!!Από τον παραπάνω κώδικα html αφαιρούμε τα “σχόλια” που έχουμε γράψει όπως για παράδειγμα στις γραμμές 16,24 κλπ: “Εδώ μπαίνουν τα εικονίδια”,”εδώ μπαίνει ο τίτλος” κλπ. κώδικας: *{margin:0;padding:0;} #wrapper { width:264px; margin: 0 auto; top:0; left:300px; position:absolute;} #socializeContainer{ height:auto; z-index:200; border:5px solid #585858; overflow:hidden; float:left; width:254px; } #socializetitle{ width:100%; background-color: #E9E9E9; color: #3F3F3F; padding: 0; font-family:Kristen ITC; font-size:16px; text-align:center; border-bottom:3px solid gray; margin-bottom:2px; } .socialIcons{ width:36px; height:36px; margin-top:5px; margin-bottom:1px; float:left; margin-left:20px; border:1px solid blue; } #portfolioTitle{ margin-top:5px; margin-bottom:3px; width:100%; font-family: Kristen ITC; background: #E9E9E9; color: #999999; font-size:18px; text-align: center; float:left; } Εξηγήσεις-Θα κάνουμε αρκετή ανάλυση στα πιο σημαντικά: Γραμμή 1:Επειδή όλα τα html στοιχεία (πχ divs,paragraphs,images κλπ) έχουν προκαθορισμένα margins και paddings χρησιμοποιούμε το ‘*’ το οποίο ονομάζεται universal selector και αυτός “μηδενίζει” ουσιαστικά τα margins και τα paddings των στοιχείων.Με αυτό τον τρόπο κάνουμε reset στα margins και paddings των στοιχείων και εν συνεχεία μπορούμε να εφαρμόσουμε τα δικά μας paddings και margins. Γραμμή 3:Εδώ δηλώνουμε κάποιους κανόνες CSS που θα εφαρμόσουμε στη wrapper div.Η wrapper div περιλαμβάνει και το panel και το κουμπί του.Με το “position:absolute;” δηλώνουμε ότι η τοποθέτηση του στοιχείου αυτού θα είναι “απόλυτη” δηλαδή θα την ορίσουμε εμείς χρησιμοποιώντας τις css properties “top”,”left”,”right” και “bottom”.Αυτός είναι και ο λόγος που τοποθετούμε την wrapper div top:0; και left:300px;.Δηλαδή θα απέχει 0px από την κορυφή της σελίδας και 300px από αριστερά.Εάν θέλετε να μάθετε περισσότερα για τo position:absolute δείτε εδώ. Γραμμή 10:Εδώ ορίζουμε το CSS στυλ που θα εφαρμόσουμε στη div με id = “socializeContainer“.Είναι το container που περιέχει τα πάντα εκτός από το κουμπί του slider.Η ιδιότητα z-index:200 κάνει το εξής:Ορίζει ποιο html element είναι πάνω από ένα άλλο.Το html στοιχείο με το μεγαλύτερο z-index μπαίνει πάνω από τα υπόλοιπα.Αυτό το ορίζουμε εδώ γιατί θέλουμε όταν ανοίγει αυτό το panel να φαίνεται ότι βρίσκεται πάνω από οποιοδήποτε άλλο html στοιχείο της σελίδας.Για παράδειγμα από κάτω από το sliding panel μπορεί να υπάρχει μία div με navigation.Ρυθμίζοντας το z-index σε ένα αριθμό μεγάλο εξασφαλίζουμε ότι όταν ανοίξει το panel προς τα κάτω θα εμφανιστεί από πάνω από το navigation.Να το καλύπτει δηλαδή. Σε αυτή τη div ρυθμίζουμε επίσης το border μας και το πλάτος της που είναι ουσιαστικά το πλάτος των περιεχομένων της.Το overflow:hidden δηλώνει πως εάν βάλουμε κάτι στη div “socializeContainer” το οποίο θα έχει μεγαλύτερο πλάτος από αυτή τότε ό,τι περισσεύει κόβεται.Το float-left:δηλώνει πώς η div αυτή είναι όσο πιο αριστερά γίνεται στο μέσα στο element που την περιέχει δηλαδή στο στη “wrapper div“. Γραμμή 20:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόσουμε στη div με id “socializetitle”.Είναι η div που θα περιέχει τον τίτλο μας και θα βρίσκεται πάνω – πάνω στo socializeContainer μας.Δεν υπάρχει κάτι σημαντικό να εξηγήσουμε εδώ.Το width: 100% μας δηλώνει ότι η div αυτή στο σημείο που βρίσκεται καταλαμβάνει το 100% του πλάτους του στοιχείου που την περιέχει-δηλαδή της div socializeContainer. Γραμμή 33:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόζονται σε όποιο στοιχείο έχει κλάση τη “.socialIcons“.Δηλώνουμε τα margins που θέλουμε , το float κλπ.Παρατηρείστε ότι δίνουμε ένα border:1px solid blue.Αυτό το κάνουμε διότι ναι μεν ορίζουμε την κλάση αλλά από την στιγμή που δεν έχουμε εικονίδια δεν θα δούμε κάτι εάν δούμε τη σελίδα μας σε ένα browser.Το border αυτό θα μας δείξει ουσιαστικά που θα βρίσκονται τα εικονίδια αυτά.Παρατηρήστε ότι ορίσαμε πλάτος και ύψος 32*32 pixels.Τέτοιο θα είναι το μέγεθος των εικονιδίων μας. Γραμμή 44:Εδώ ορίζουμε το στυλ CSS που θα εφαρμόσουμε στη div η οποία θα περιέχει τον τίτλο που θα έχουμε στο mini portfolio μας. Μετά από όλα αυτά ας δούμε ένα στιγμιότυπο Τέλεια!Βλέπετε που θα τοποθετηθούν τα εικονίδια;;Λείπει κάτι όμως…..Κάτω από τον τίτλο του portfolio δεν υπάρχει μέρος που θα τοποθετηθούν οι μικρογραφίες μας.Θυμάστε που είπαμε ότι οι τρεις μικρογραφίες θα μπουν σε 3 divs που θα εφαρμόζεται σε αυτές μία κλάση -η “.boxes“.Ας τη φτιάξουμε λοιπόν τώρα!Στον παραπάνω css κώδικα προσθέστε: κώδικας: .boxes { width:64px; height:64px; border:5px solid #dadada; float:left; margin-left: 5px; margin-right: 5px; margin-bottom:5px; margin-top:6px; } Εδώ προσθέσαμε και την κλάση “boxes”.Για να δούμε τώρα πως μοιάζει η εφαρμογή μας. Τέλεια…Μήπως να κάνουμε και το socializeContainer μας να έχει στρογγυλεμένες άκρες; Θα το κάνουμε με CSS3!Προσθέστε μέσα στο CSS που καθορίζει την εμφάνιση της socializeContainer div τις εξής εντολές: κώδικας: -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; Αυτές οι εντολές πάνε πάντα μαζί και δηλώνουν ότι στο συγκεκριμένο στοιχείο που εφαρμόζονται,ότι οι γωνίες του έχουν στρογγυλέψει κατά 10px.Για να δούμε τώρα την εφαρμογή μας. Νομίζω ότι μία χαρά πάμε.Για να προσθέσουμε και εικονίδια τώρα και να δούμε πως θα μοιάζει τελικά. Προσθήκη των εικονιδίων και μικρογραφιών στο sliding panel μας. Τα εικονίδια που θα χρησιμοποιήσουμε τα κατεβάσαμε από τη σελίδα 108 high resolution dark social media icons.Στην συνέχεια διαλέξαμε ποια θέλαμε και τα επεξεργαστήκαμε για να έχουμε μέγεθος 32*32px.Κατεβάστε τα και εσείς.Τα τοποθετούμε σε ένα φάκελο με το όνομα “img” και ξεκινάμε…. Αυτά είναι τα εικονίδια που θα μπουν στα divs με class=”socialicons” και ανάλογα με το id της κάθε μίας div από αυτές θα τοποθετήσουμε το ανάλογο εικονίδιο σαν background.Στο αρχείο μας css προσθέτουμε τις εξής γραμμές αφού πρώτα διαγράψουμε το border που υπάρχει στη class “socialIcons”.Δεν το θέλουμε πλέον. κώδικας: #rss{ background:url(img/rss_small.png); } #facebook{ background:url(img/facebook_small.png); } #twitter{ background:url(img/twitter_small.png); } #mail{ background:url(img/mail_small.png); } Για να δούμε τώρα : Τέλεια…Ας τοποθετήσουμε και τις μικρογραφίες των φωτογραφιών.Εδώ θα λειτουργήσουμε ως εξής:Θα δημιουργήσουμε 6 εικόνες.Οι τρεις από αυτές θα είναι σε μέγεθος 64*64 (βλέπε class “boxes”).Οι άλλες τρεις θα έχουν ότι μέγεθος θέλουμε.Ουσιαστικά θα έχουμε 3 μικρογραφίες και 3 αντίστοιχες φωτογραφίες κανονικού μεγέθους.Όταν πατάμε σε μία μικρογραφία θα ανοίγει η αντίστοιχη “μεγάλη” φωτογραφία.Θα κάνουμε τις μικρογραφίες “links”, να πατιούνται δηλαδή.Αυτό το κάνουμε γιατί στο δεύτερο μέρος θα χρησιμοποιήσουμε και ένα jQuery plugin ,το lightbox που μιλήσαμε στην αρχή. Στον html κώδικα που έχουμε θα κάνουμε το εξής:Θα προσθέσουμε σε κάθε μία div με class “boxes” μία μικρογραφία κάνοντας την link.Άρα στο σημείο εκείνος ο κώδικας html θα γίνει: κώδικας: <!--Prwto image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a> </div> <!--Deytero image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a> </div> <!--Trito image sto portfolio apo aristera --> <div class="boxes"> <a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a> </div> Για να δούμε τώρα τη σελίδα μας…. Να προσθέσουμε τώρα και το κουμπί του panel;; Προσθήκη κουμπιού sliding panel Το κουμπί αυτό θα είναι ένα image ουσιαστικά το οποίο θα τοποθετηθεί αμέσως μετά το κλείσιμο της socialContainer div και πριν το κλείσιμο της wrapper div..Η εικόνα αυτή θα βρίσκεται μέσα σε μία div με class = “.handler”.Στον html κώδικα προσθέστε την εξής γραμμή στο σημείο που είπαμε παραπάνω.. κώδικας: <div class="handler"><img src="img/socialh2.png"/></div> και στο CSS αρχείο ας δημιουργήσουμε το CSS στυλ που θα εφαρμοστεί σε αυτή την κλάση: κώδικας: .handler { float:left; margin-left:30px; } Με αυτό το CSS κώδικα κάνουμε τη φωτογραφία μας να πάει όσο πιο αριστερά γίνεται και εν συνεχεία της δίνουμε 30px περιθώριο από αριστερά σε σχέση με το wrapper.Αποτέλεσμα;Aς δούμε λίγο τη σελίδα μας τώρα… Επίλογος πρώτου μέρους και live demo.. Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα τρία μέρη του tutorial αυτού! Το πρώτο μέρος έφτασε στο τέλος του….Ήταν λίγο κουραστικό αλλά άξιζε τον κόπο.Στο επόμενο μέρος θα δούμε τη δημιουργία της κρυφής περιοχής καθώς και τη λειτουργικότητα της “εφαρμογής”¨με χρήση jQuery.Επίσης θα μπορέσετε να κατεβάσετε τα αρχεία που χρησιμοποιήθηκαν καθώς και τις πηγές μας.Σας ευχαριστούμε πολύ!!
-
Συνήθως οι φόρμες που χρησιμοποιούμε στις σελίδες μας, δίχνουν κάπως βαρετές Μπορεί να αλλάξετε το background, το χρώμα των γραμμάτων ακόμα να προσθέσετε φωτογραφίες ως buttons σε μια προσπάθεια να κάνετε την φόρμα λίγο ποιό ωραία ! Τώρα όμως μπορείτε να αλλάξετε τα χρώμματα των πραγματικών στοιχείων της φόρμας. Αυτά είναι τα Text Input Field, τα Drop Down Menus και τα Buttons ! Οι παρακάτω κώδικες λειτουργούν μόνο με Netscape 6+ ή IE 4+. Buttons : κώδικας: <form> <input type="submit" style="background-color: #CED6FF" value="Πατήστε αυτό το ωραίo button"> </form > Text Input Field: κώδικας: <form> <input type="text" name="coloredRed" size="24" style="background-color: #0080FF" value= "Ωραίο Χρώμμα"> </form> Drop Down Menus: κώδικας: <form> <select name = "colorpretty" style="background-color: #2BD926"> <option> Επιλογή 1 </option> <option> Επιλογή 2 </option> <option> Επιλογή 3 </option> </select> </form>
-
Για την παρακάτω επιλογή θα χρειαστούμε το ακόλουθο αρχείο javascript tooltip.js και να προσθέσουμε στο css αρχείο μας τον παρακάτω κώδικα: κώδικας: div#qTip { padding: 3px; height:15px; border: 1px solid #666; display: none; background:#F5F7FE; color:#666666; font: bold 10px Verdana, Arial, Helvetica, sans-serif; position: absolute; } Padding: απόσταση κειμένου από τις άκρες του tooltip Height: ύψος του tooltip Border: Περίγραμμα του tooltip 1px μονοκόμματη γραμμή χρώματος #666 Display:none δεν θα εμφανίζεται κατά την φόρτωση της σελίδας background: χρώμα του tooltip color: χρώμα γραμμάτων μέσα στο tooltip font: επιλογές για την γραμματοσειρά position:absolute τοποθέτηση του tooltip απόλυτη αναλόγως το που βρίσκεται το ποντίκι. Στο head της ιστοσελίδας θα πρέπει να προσθέσουμε τον παρακάτω κώδικα κώδικας: <script language="JavaScript" src="tooltip.js" type="text/JavaScript"></script> Το tooltip ισχύει όπου υπάρχει link μέσα στην σελίδα σε κείμενο ή σε ολόκληρο το div. Live demo
-
Στο css αρχείο θα γράψουμε το παρακάτω: κώδικας: @media print{ body{ background-color:#FFFFFF; background-image:none; color:#000000 } #header{ display:none;} #navigation{ display:none;} #footer{ display:none;} #main_content{ width:100%;} img {display:none;} } body Ορίζουμε την σελίδα μας λευκή με μαύρα γράμματα χωρίς background display:none Ορίζουμε τι δεν θέλουμε να εκτυπώνουμε width:100% Ορίζουμε αυτό που θέλουμε να εκτυπώνουμε να πιάνει το 100% της σελίδας μας. Για να δείτε τα αποτελέσματα κάντε Print preview στον browser σας. Στον ΙΕ και στον FF λειτουργεί άψογα, στον Opera παίζει προβληματάκι Live demo
-
Έχουμε δημιουργήσει μία εικόνα στην οποία στο πάνω μέρος της θα είναι αυτό που θα φαίνεται στην σελίδα μας και στο κάτω μέρος της αυτό που θα φαίνεται όταν κάνουμε rollover. Προσθέτουμε στο css αρχείο μας το παρακάτω: κώδικας: div.music a{ background:url(music.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; } div.music a:hover { background:url(music.gif) 0px 50px; border: 1px solid #0099FF; } Το μηδέν στο background property ορίζει από ποιο pixel θα φαίνεται η εικόνα μας, το text-indent θα απομακρύνει το text-link που έχουμε χρησιμοποιήσει ώστε να μην ειναι ορατό και το border: 1px solid #fff θα βάλει γύρω από το div ένα περίγραμμα άσπρο 1px. Όταν γίνεται rollover θα δείχνει την εικόνα από το 50 px και κάτω και το border θα αλλάζει χρώμα Και στην σελίδα μας προσθέτουμε τον παρακάω κώδιακα στο σημείο που θέλουμε να εμφανίζεται το div μας κώδικας: <div class="music"><a title="Music" href='#'>Music</a></div> Live demo Ολοκληρωμένος css κώδικας: κώδικας: div.music a{ background:url(music.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; } div.music a:hover { background:url(music.gif) 0px 50px; border: 1px solid #0099FF; } div.games a{ background:url(games.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; } div.games a:hover { background:url(games.gif) 0px 50px; border: 1px solid #0099FF; } div.photos a{ background:url(photos.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; } div.photos a:hover { background:url(photos.gif) 0px 50px; border: 1px solid #0099FF; } div.photoshop a{ background:url(photoshop.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.photoshop a:hover { background:url(photoshop.gif) 0px 50px; border: 1px solid #0099FF; } div.fonts a{ background:url(fonts.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.fonts a:hover { background:url(fonts.gif) 0px 50px; border: 1px solid #0099FF; } div.firefox a{ background:url(firefox.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.firefox a:hover { background:url(firefox.gif) 0px 50px; border: 1px solid #0099FF; } div.dreamweaver a{ background:url(dreamweaver.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.dreamweaver a:hover { background:url(dreamweaver.gif) 0px 50px; border: 1px solid #0099FF; } div.chat a{ background:url(chat.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.chat a:hover { background:url(chat.gif) 0px 50px; border: 1px solid #0099FF; } div.email a{ background:url(email.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; } div.email a:hover { background:url(email.gif) 0px 50px; border: 1px solid #0099FF; } Ολοκληρωμένος html κώδικας: κώδικας: <div class="music"><a title="Music" href='#'>Music</a></div> <div class="games"><a title="Games" href='#'>Games</a></div> <div class="photos"><a title="Photos" href='#'>Photos</a></div> <div class="photoshop"><a title="Photoshop" href='#'>Photoshop</a></div> <div class="fonts"><a title="Fonts" href='#'>Fonts</a></div> <div class="firefox"><a title="Firefox" href='#'>Firefox</a></div> <div class="dreamweaver"><a title="Dreamweaver" href='#'>Dreamweaver</a></div> <div class="chat"><a title="Chat" href='#'>Chat</a></div> <div class="email"><a title="Email" href='#'>Email</a></div>
-
Στο css αρχείο γράφουμε το παρακάτω κώδικας: #boxes { width:960px; height:215px; float:left; padding-top:40px; } Το div boxes είναι το κεντρικό div που θα δεχθεί τα 3 boxes στη συνέχεια. Μέσα στο html αρχείο μας και κάτω από το σημείο που κλείνει το div middle γράφουμε το παρακάτω κώδικας: <div id="boxes"></div> Άρα έχουμε το παρακάτω κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"></div> </div> </body> Δεν υπάρχει καμμία επίδραση στο template αφού το div boxes δεν έχει περιεχόμενο. Στη συνέχεια γράφουμε στο css αρχείο μας τις ιδιότητες του αριστερού box κώδικας: #box_left{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; padding:20px; } Το width είναι το πλάτος του box και το height το ύψος του. Το border δηλώνει ότι θα έχει περίγραμμα και στις 4 πλευρές πάχους 1px το solid ότι θα είναι κανονική γραμμή και το #d8d8d8 θα είναι το χρώμα του περιγράμματος. Έχουμε ορίσει σαν background-image την εικόνα box_back η οποία θα αναπαράγεται ώς προς τον άξονα Χ δηλαδή προς τα δεξιά.To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Με τo padding αφήνουμε εσωτερικά περιθώρια 20px από όλες τις πλευρές. Τα padding όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο μας και μέσα στο dive boxes γράφουμε το παρακάτω κώδικας: <div id="box_left"></div> Άρα έχουμε το παρακάτω κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"></div> </div> </div> </body> LIVE DEMO Οι ιδιότητες του μεσαίου και του δεξιού box είναι οι ίδιες. Στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #box_middle{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; margin-left:30px; padding:20px; } #box_right{ width:258px; height:133px; border:1px solid #d8d8d8; background:url(images/box_back.jpg) repeat-x; float:left; margin-left:30px; padding:20px; } Η διαφορά που έχουν με το αριστερό box είναι ότι έχουν εξωτερικό αριστερό περιθώριο (margin-left) 30px. Στο html αρχείο μας μέσα στο div boxes και κάτω από το div box_left γράφουμε το παρακάτω κώδικας: <div id="box_middle"></div> <div id="box_right"></div> Άρα έχουμε το παρακάτω κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"></div> <div id="box_middle"></div> <div id="box_right"></div> </div> </div> </body> LIVE DEMO
-
Στην περιοχή του slideshow θα δημιουργήσουμε μόνο τη θέση και θα τοποθετήσουμε μία εικόνα. Στην πορεία των βοηθημάτων θα το κάνουμε και ενεργό. Στο css αρχείο μας γράφουμε το παρακάτω. κώδικας: #slide { width:630px; height:340px; float:left; background:url(images/slide.jpg); } Την εικόνα του slideshow την τοποθετούμε ως background αλλά θα μπορούσαμε να την έχουμε εισάγει μέσα στο αρχείο HTML. Μέσα στο html αρχείο και μέσα στο div middle_inside γράφουμε το παρακάτω: κώδικας: <div id="slide"></div> Οπότε έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> </div> </div> </div> </body> LIVE DEMO Δημιουργία της περιοχής της φόρμας Μέσα στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #quick_note { width:280px; height:330px; float:left; background:url(images/quick.jpg) repeat-x; margin-left:10px; padding:10px 0 0 20px; } Το width είναι το πλάτος της περιοχής της φόρμας και το height το ύψος της. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Έχουμε ορίσει σαν background-image την εικόνα quick η οποία θα αναπαράγεται ώς προς τον άξονα Χ δηλαδή προς τα δεξιά. Στα εξωτερικά περιθώρια (margin) έχουμε ορίσει να απέχει 10px από την πάνω πλευρά. Με τo padding αφήνουμε εσωτερικά περιθώρια 10px από πάνω και 20px από τα αριστερά. Τα padding όπως και τα margin όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο γράφουμε μέσα στο div middle_inside και κάτω από το div slide το παρακάτω: κώδικας: <div id="quick_note"></div> Άρα έχουμε το παρακάτω κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"></div> </div> </div> </div> </body> LIVE DEMO Μέσα στο css αρχείο μας γράφουμε το παρακάτω κώδικας: #quick_note h2{ font-family:Georgia, "Times New Roman", Times, serif; margin-bottom:10px; } Με αυτή τη δήλωση ορίζουμε τις ιδιότητες που θα έχει η επικεφαλίδα <h2> μέσα στο div quick_note Στο html αρχείο μας και μέσα στο div quick_note γράφουμε το παρακάτω κώδικας: <h2>Quick Note</h2> LIVE DEMO Μέσα στο css αρχείο μας γράφουμε τα παρακάτω κώδικας: input, textarea { font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#900; } label { color:#fff; padding-left:2px; line-height:25px; font-family:Verdana, Geneva, sans-serif; font-size:11px; font-weight:bold; } .textinput{ width:255px; height:25px; background:url(images/input.png) no-repeat left top; border:none; padding:10px 0 0 5px; } .textarea { width:255px; height:70px; background:url(images/textarea.png) no-repeat left top; border:none; padding:5px 0 0 5px; } .buttonSubmit { width:80px; height:35px; color:#FFF; font-weight:bold; background:url(images/button.png) no-repeat left top; cursor:pointer; border:none; } input, textarea: Εδώ ορίζουμε γενικές ιδιότητες που θα έχουν όλα τα πλαίσια κειμένου που θα χρησιμοποιήσουμε για τη φόρμα μας label: Εδώ ορίζουμε γενικές ιδιότητες που θα έχουν όλες οι ετικέτες (labels) των στοιχείων της φόρμας textinput: Κλάση η οποία θα εφαρμοστεί στα textfields της φόρμας textarea: Κλάση η οποία θα εφαρμοστεί στα textarea της φόρμας buttonSubmit: Κλάση η οποία θα εφαρμοστεί στο κουμπί (button) της φόρμας Όλες οι ιδιότητες που υπάρχουν εδώ είναι ήδη γνωστές. Στο Html αρχείο μας και κάτω από την επικεφαλίδα <h2> μέσα στο div quick_note γράφουμε το παρακάτω κώδικας: <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> Άρα έχουμε συνολικά το παρακάτω κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> </div> </body> LIVE DEMO
-
Στο css αρχείο μας γράφουμε το παρακάτω. κώδικας: #middle { width:960px; height:440px; float:left; } Το div middle είναι αυτό που θα δεχθεί όλο το περιεχόμενο της περιοχής αυτής. Μέσα στο html αρχείο και κάτω από το σημείο που κλείνει το div header γράφουμε το παρακάτω: κώδικας: <div id="middle"></div> Οπότε έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"></div> </div> </body> Εδώ δεν έχουμε καμμία επίδραση στο template αφού δεν έχουμε εισάγει ακόμα περιεχόμενο. Στη συνέχεια θα δημιουργήσουμε την λευκή περιοχή. Στο css αρχείο γράφουμε το παρακάτω: κώδικας: #middle_inside { width:950px; height:340px; float:left; background-color:#fff; margin:40px 0 0 0; padding:10px 0 10px 10px; } Το width είναι το πλάτος της λευκής περιοχής και το height το ύψος της. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. Έχουμε ορίσει σαν background-color το λευκό. Στα εξωτερικά περιθώρια (margin) έχουμε ορίσει να απέχει 40px από την περιοχή του Header. Με τo padding αφήνουμε εσωτερικά περιθώρια 10px σε όλες τις πλευρές εκτός από την δεξιά. Τα padding όπως και τα margin όταν τα ορίζουμε σε μία δήλωση πάνε με την εξής σειρά: Πάνω, δεξιά, κάτω, αριστερά. Στο html αρχείο γράφουμε μέσα στο div middle το παρακάτω: κώδικας: <div id="middle_inside"></div> Οπότε έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"></div> </div> </div> </body> LIVE DEMO
-
Μέσα στο css αρχείο μας εισάγουμε τον παρακάτω κώδικα: κώδικας: #smashnav{ width:960px; height:35px; background: url(images/bluewax_bottom.gif) repeat-x bottom left; font-family:Verdana, Geneva, sans-serif; font-size:11px; font-weight:bold; float:left; margin-top:26px } #smashnav ul{ margin:0; padding:0; list-style-type:none; float:left; } #smashnav ul li{ float:left; margin:0 1px; } #smashnav ul li a{ display:block; float:left; color:#000; text-decoration:none; padding:0 0 0 12px; height:35px; line-height:290%; } #smashnav ul li a span{ padding:0 12px 0 0; } #smashnav ul li a:hover,.corner #smashnav ul li a.current{ color:#fff; background: url(images/bluewax_navtopleft.gif) no-repeat top left; } #smashnav ul li a:hover span,.corner #smashnav ul li a.current span{ display:block; width:auto; background:#1D6893 url(images/bluewax_navtopright.gif) no-repeat top right; height:35px; } Το #smashnav είναι το κυρίως div που θα περιέχει το μενού. Το #smashnav ul είναι οι ιδιότητες της λίστας του μενού Το #smashnav ul li είναι οι ιδιότητες του κάθε στοιχείου της λίστας Το #smashnav ul li a είναι οι ιδιότητες των links της λίστας Το #smashnav ul li a span εφαρμόζεται σε όλα τα στοιχεία της λίστας και αφήνει δεξί εσωτερικό περιθώριο 12px. Το #smashnav ul li a:hover,.corner #smashnav ul li a.current τοποθετεί το αριστερό background image όταν ο δείκτης του ποντικιού είναι πάνω από ένα στοιχείο της λίστας. Το #smashnav ul li a:hover span,.corner #smashnav ul li a.current span τοποθετεί το δεξί background image όταν ο δείκτης του ποντικιού είναι πάνω από ένα στοιχείο της λίστας. Στο Html αρχείο μας και κάτω από το div Contact εισάγουμε τον παρακάτω κώδικα: κώδικας: <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> </div> </body> Παρατηρούμε ότι το στοιχείο Home έχει την class="current" που σημαίνει ότι είναι το ενεργό link. LIVE DEMO
-
Σήμερα θα δημιουργήσουμε το βασικό σκελετό του layout και την περιοχή του Header που περιλαμβάνει το logo και τα στοιχεία επικοινωνίας ΦΟΝΤΟ Εισάγουμε στο αρχείο layout.css τον παρακάτω κώδικα κώδικας: body{ padding:0; margin:0; color:#fff; background-image:url(images/main_bg.jpg); background-repeat:repeat-x; background-color:#FFF; } div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{ margin:0; padding:0; } Το margin και το padding δηλώνει ότι τα περιθώρια όλου του Body από όλες τις πλευρές θα είναι μηδενικά. Το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό main_bg.jpg το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά και το background-color δηλώνει ότι όλο το υπόλοιπο μέρος της σελίδας θα έχει χρώμα άσπρο. Στην επόμενη δήλωση ορίζουμε για όλα τα αντικείμενα μηδενικά περιθώρια προς όλες τις πλευρές τους. Τη δήλωση για το background θα μπορούσαμε να την κάνουμε και ως: κώδικας: background:url(images/main_bg.jpg) repeat-x #fff; LIVE DEMO CONTAINER Στην συνέχεια θα τοποθετήσουμε το κύριο div μέσα στο οποίο θα τοποθετηθεί όλο το περιεχόμενο της ιστοσελίδας μας. Στο css αρχείο εισάγουμε το παρακάτω: κώδικας: #container { width:960px; margin:0 auto; } Το width δηλώνει ότι το πλάτος του div θα είναι 960px και το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο της οθόνης. Στην συνέχεια μέσα στο body του index.html θα γράψουμε το παρακάτω: κώδικας: <div id="container"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"></div> </body> Εδώ δεν υπάρχει καμμία επίδραση στη σελίδα μας αφού δεν έχουμε ακόμη περιεχόμενο. HEADER Το επόμενο div μας θα είναι το header και στο css αρχείο μας γράφουμε το: κώδικας: #header{ width:960px; height:150px; float:left; } Το width είναι το πλάτος του και το height είναι το ύψος του. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="header"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"></div> </div> </body> Εδώ δεν υπάρχει καμμία επίδραση στη σελίδα μας αφού δεν έχουμε ακόμη περιεχόμενο. LOGO Το επόμενο div μας θα είναι το logo και στο css αρχείο μας γράφουμε το: κώδικας: #logo { width:362px; height:58px; background-image:url(images/logo.jpg); float:left; margin-top:35px; text-indent:-10000px; } Το width είναι το πλάτος του και το height είναι το ύψος του τα οποία είναι τα ίδια με αυτά που έχει και η εικόνα του logo. To background-image είναι η εικόνα logo που έχουμε κόψει από το template. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. To margin-top δηλώνει ότι το div με το logo θα απέχει από την πάνω πλευρά του header 35px. Με το text-indent δηλώνουμε ότι το κείμενο που θα τοποθετήσουμε μέσα στο div θα απέχει 10000px και κατά συνέπεια δεν θα είναι ορατό. Στην συνέχεια μέσα στο div header της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="logo">Smashing DZine</div> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> </div> </div> </body> LIVE DEMO CONTACT Το επόμενο div μας θα είναι το contact και στο css αρχείο μας γράφουμε το: κώδικας: #contact { width:312px; height:50px; float:right; margin-top:35px; background:url(images/contact_icon.jpg) right no-repeat; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000; text-align:right; padding:8px 50px 0 0; } Το width είναι το πλάτος του και το height είναι το ύψος του. To float:right δηλώνει ότι το div πάντα θα κολλάει στην δεξιά πλευρά. To margin-top δηλώνει ότι το div με τα στοιχεία επικοινωνίας θα απέχει από την πάνω πλευρά του header 35px. To background-image είναι η εικόνα του τηλεφώνου που έχουμε κόψει από το template. Η εικόνα αυτή θα τοποθετηθεί στο δεξιό μέρος του div με την εντολή right και δεν θα επαναλαμβάνεται σύμφωνα με την εντολή no-repeat. Η εντολή font-family ορίζει ως γραμματοσειρά του div την verdana και η εντολή font-size ορίζει το μέγεθος της γραμματοσειράς σε 12px. Με την εντολή color ορίζουμε το χρώμα της γραμματοσειράς. Το κείμενο θα στοιχιστεί στην δεξιά πλευρά του div σύμφωνα με την εντολή text-align. Με την εντολή padding ορίζουμε τα εσωτερικά περιθώρια του div. Πάνω περιθώριο 8px, δεξί περιθώριο 50px, κάτω και αριστερό περιθώριο 0px; Στην συνέχεια μέσα στο div header της σελίδας μας θα πρέπει να γράψουμε το παρακάτω: κώδικας: <div id="contact"></div> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"></div> </div> </div> </body> Στη συνέχεια θα βάλουμε περιεχόμενο μέσα στο div contact εισάγοντας τις παρακάτω γραμμές: κώδικας: <p>+971 55 7457383</p> <p>If you have any query, feel free to call us</p> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p>+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> </div> </div> </body> LIVE DEMO Για να μορφοποίησουμε την πρώτη γραμμή του κειμένου εισάγουμε στο css αρχείο μας την παρακάτω κλάση: κώδικας: #contact .btext{ font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; color:#000; } Στην κλάση αυτή ορίζουμε εκτός από την γραμματοσειρά, το μέγεθος της και το χρώμα της, με το font-weight να είναι έντονη (bold) Στο Html αρχείο μας εφαρμόζουμε την κλάση στην πρώτη παράγραφο με τον παρακάτω τρόπο: κώδικας: <p class="btext">+971 55 7457383</p> Οπότε θα έχουμε το παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> </div> </div> </body> LIVE DEMO
-
Ξεκινάμε σήμερα μία σειρά βοηθημάτων σχετικά με την κατασκευή μίας ιστοσελίδας με τη χρήση των css, και όχι μόνο. Για την ιστοσελίδα αυτή θα χρησιμοποιήσουμε το template που θα βρούμε στη σελίδα http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clea...ign-in-photoshop/ . Το template αυτό μπορείτε να το κατεβάσετε έτοιμο ή αν θέλετε να το δημιουργήσετε μόνοι σας μέσα από το βοήθημα που βρίσκεται στην παραπάνω σελίδα. Τι θα χρειαστούμε: Το Notepad των Windows Έναν οποιονδήποτε Web Browser (εκτός του ΙΕ 6 ) Τα αρχεία των εικόνων που θα χρησιμοποιηθούν μπορείτε να τα κατεβάσετε από ΕΔΩ Η κατασκευή αυτή έχει καθαρά εκπαιδευτικό σκοπό και δεν είναι δυνατή η χρήση της για προσωπικούς ή επαγγελματικούς λόγους χωρίς την άδεια του σχεδιαστή Waheed Akhtar. Ο κώδικας που θα δοθεί μπορεί να χρησιμοποιηθεί ελεύθερα. Η εμφάνιση έχει ελεγχθεί στους Web Browsers Internet Explorer 7, 8, Opera 10.10, Firefox 3.6, Safari 4.0.4. Google Chrome 4.0.2 Έναρξη 1. Πρώτα απ' όλα θα δημιουργήσουμε ένα φάκελο στην επιφάνεια εργασίας ή όπου αλλού θέλουμε με όνομα page. 2. Στη συνέχεια αφού έχουμε κατεβάσει τα απαραίτητα αρχεία εικόνων που θα χρησιμοποιηθούν αφού τα αποσυμπιέσουμε θα τα τοποθετήσουμε μέσα σε ένα φάκελο με όνομα images που θα βρίσκεται μέσα στο φάκελο page. 3. Ανοίγουμε το Notepad των Windows και αντιγράφουμε τον παρακάτω κώδικα. κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html> Το αρχείο αυτό θα το αποθηκεύσουμε μέσα στο φάκελο page με όνομα index.html όπως βλέπουμε στην παρακάτω εικόνα. 4. Με το Notepad δημιουργούμε ένα ακόμα αρχείο και το αποθηκεύουμε στο φάκελο page με όνομα layout.css. 5. Στο αρχείο index.html εισάγουμε την παρακάτω γραμμή κάτω από τη γραμμή <title>Untitled Document</title> κώδικας: <link href="layout.css" rel="stylesheet" type="text/css" /> Με αυτό τον τρόπο συνδέουμε το αρχείο Css με το αρχείο Html 6. Ας αλλάξουμε και το αντιαισθητικό <title>Untitled Document</title> σε κώδικας: <title>Smashing Dzine</title> Μέχρι τώρα έχουμε λοιπόν: Ένα φάκελο page που περιέχει ένα φάκελο με όνομα images, ένα αρχείο με όνομα index.html και ένα αρχείο με όνομα layout.css Το φάκελο images που περιέχει τις εικόνες που κατεβάσαμε. Τα συνδεδεμένα αρχεία index.html και layout.css Το βασικό σκελετό html μέσα στο index.html Αύριο θα δημιουργήσουμε το βασικό σκελετό της ιστοσελίδας και την περιοχή του Header
-
Κεντράρισμα ενός div καθέτως και οριζοντίως σε ολόκληρη την οθόνη ανεξαρτήτως ανάλυσης κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Κεντράρισμα ενός div καθέτως και οριζοντίως σε ολόκληρη την οθόνη ανεξαρτήτως ανάλυσης. Center div Horizontal and vertical</title> <style type="text/css"> body { text-align: center; font-family: sans-serif; } #cntdiv { position: fixed; /* θέση σταθερή */ width: 200px; /* πλάτος */ height: 100px; /* ύψος */ margin-left: -100px; /* το μισό του width */ margin-top: -50px; /* το μισό του height */ top: 50%; /* το μετακινούμε στο 50% από πάνω ... */ left: 50%; /* ... και στο 50% από αριστερά */ text-align: left; /* αριστερή στοίχιση του κειμένου μέσα στο div layer */ padding: 5px; /* απόσταση κειμένου από το περίγραμμα του div layer */ border: 2px solid #ffd324; /* περίγραμμα με 2pixel πάχος */ background-color:#FFC; /* χρώμα γεμίσματος του div layer */ } </style> </head> <body> <div id="cntdiv">Εδώ βάλε το περιεχόμενο σου.<br />π.χ. freestuff.gr Rulez</div> </body> </html> demo: http://www.avadaz.com/playground/centerdiv.htm
