Skip to main content

CSS Design - Σχεδιάστε χωρίς <table...>

Σε προηγούμενη ανάρτηση αναφέρθηκε το πώς τα tags <div...> και <span...> μπορούν να αντικαταστήσουν σχεδόν κάθε html tag. Αν κοιτάξουμε μάλιστα στο Internet, θα βρούμε πολλά βιβλία που λένε πώς να φτιάχνουμε site χωρίς html πίνακες. Πώς γίνεται αυτό; Είναι στ' αλήθεια εφικτό;

Έστω ότι θέλουμε να φτιάξουμε το παρακάτω design για μια σελίδα:

Για να το δημιουργήσουμε με <table...> θα χρησιμοποιήσουμε τον παρακάτω κώδικα:

<table>
<tr><td colspan="2">ΚΕΦΑΛΙΔΑ</td></tr>
<tr><td>ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ</td><td>ΠΕΡΙΕΧΟΜΕΝΟ</td></tr>
<tr><td colspan="2">ΥΠΟΣΕΛΙΔΟ</td></tr>
</table>

Όπως βλέπουμε λοιπόν, για να δημιουργήσουμε έναν πίνακα HTML χρειαζόμαστε τουλάχιστον 6 tags(3 τα table,tr και td και άλλα 3 που κλείνουν τα προηγούμενα).

Το παραπάνω παράδειγμα είναι απλό. Σκεφτείτε, όμως, πως στη sidebar συνήθως βάζουμε εργαλεία όπως κώδικα Javascript, Φόρμες για σύνδεση του χρήστη και πολύ πιθανόν αυτά να τα προσαρμόζουμε χρησιμοποιώντας tables. Κι αν έχετε δημιουργήσει κάτι τέτοιο, ή έστω προσπαθήσει να το καταφέρετε, θα δείτε πως δεν είναι δύσκολο, αλλά είναι σίγουρα δυσανάγνωστο. Άρα τι κάνουμε;

Χρησιμοποιώντας το tag <div...> και λίγο CSS, μπορούμε να δημιουργήσουμε τον παρακάτω κώδικα που πραγματοποιεί ακριβώς το ίδιο design:

<div id="header" style="clear:both;">ΚΕΦΑΛΙΔΑ</div>
<div id="wrapper">
<div id="sidebar" style="float:left;">ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ;</div>
<div id="content" style="float:right;">ΠΕΡΙΕΧΟΜΕΝΟ</div>
</div>
<div id="footer" style="clear:both;">ΥΠΟΣΕΛΙΔΟ</div>

Σε κάθε div έχει οριστεί ένα id και ένα style. Ας ξεκινήσουμε από μέσα προς τα έξω.

Το float:left;, δίνει στο div-sidebar την ιδιότητα να εμφανίζεται αριστερά στη σελίδα.

Το float:right;, δίνει στο div-content την ιδιότητα να εμφανίζεται δεξιά στη σελίδα.

Το clear:both;, δίνει στα div-header και div-footer την ιδιότητα να μην επιτρέπουν σε αντικείμενο με ιδιότητα float να υπάρχει αριστερά ή δεξιά τους. Έτσι καταφέρνουμε τα div-sidebar και div-content να βρίσκονται ανάμεσα στο div-header και div-footer και όχι κάπου διάσπαρτα στη σελίδα.

Πειραματιστείτε με τον παραπάνω κώδικα και θα καταλάβετε σίγουρα περισσότερα!


Παρατηρήσεις
  • Για να είστε σίγουροι πως το design που θα φτιάξετε, θα εμφανίζεται σωστά σε όλες τις αναλύσεις, υπάρχουν δύο λύσεις.
    1)Μπορείτε να ορίσετε width και height του κάθε div χρησιμοποιώντας ποσοστά πχ. width:30% ή height:90%.
    2)Μπορείτε να χρησιμοποιήσετε για στάνταρ διαστάσεις, διαστάσεις λίγο μικρότερες από τη μικρότερη σύγχρονη ανάλυση,ή τουλάχιστον την πιο διαδεδομένη, η οποία, τη στιγμή που γράφονται αυτές οι γραμμές, είναι 1024Χ768. Οπότε υπολογίστε ένα μέγιστο width περίπου 900px.
  • Ο παραπάνω κώδικας CSS προβάλλεται σωστά σε όλους τους φυλλομετρητές(πχ. Opera,Firefox, IE 6,IE 7 κτλ). Όταν όμως βασίζεστε σε CSS να προσέχετε αν αυτά που γράφετε υποστηρίζονται από όλους τους φυλλομετρητές(αν σας ενδιαφέρει καθολική υποστήριξη). Αλλιώς, το site σας μπορεί να προβάλλεται σωστά σε IE 7 αλλά όχι IE6 ή IE8RC1.

Comments

Popular posts from this blog

Configure drupal_http_request() on the fly

The drupal_http_request() function supports connections using a proxy. You can configure a global proxy to use for all drupal_http_request() callbacks from the settings.php file of your website/installation by filling the following lines with the proper information:For those of you preferring a UI, then HTTP proxy module is for you.But what if you only want to use a proxy in some cases; like a custom module? In that case you will need the following function(modify accordingly):Now all you have to do is Call <?php _MYMODULE_change_proxy(); ?>.Do your drupal_http_request() calls.Call <?php _MYMODULE_change_proxy(TRUE); ?> to reset your previous settings.

Drupal: Allow registrations through Invite or Referral modules only

The Invite module provides invitations from existing users to their contacts. The Referral module, in contrary, creates a special URL for each existing user, which can be found in each user's profile, and allows new user registration. Even though, these two modules seem to provide the same functionality, they don't (and they shouldn't). Invite module, provides a mechanism for a site administrator to limit new registrations to "Invitations only". Referral module doesn't provide any of this functionality. Some users have requested the Invite module and Referral module to join in one module. Until now, there isn't anything to that direction. Wouldn't it be great though if there was a solution to limit drupal registration to referral or invitation only? Copy the functions below to a refinvite.module file in your sites→all→modules→refinvite folder and enable the module. Then go to http://<your-address-here>/admin/user/settings and enable the new …

Send mass email to certain users using VBO

Views Bulk Operations uses the built-in actions to act upon nodes, users, entities etc. Among these actions is our ability to send emails to users. If you try to use this action though you will encounter a small but serious problem. You are asked for an email address to send your message. You might say "but I have selected the users I want this message to reach. Why should I input an address again?". Don't get overwhelmed. What this field expects is not an address but a token. Specially this token [user-email]. If the website is intended for you, then you might say that's not such a problem to write this token down again and again. But if the manager of the website is bound to be the client or if you just want to spend less time writing things down, you might prefer to use a custom hook_form_alter() callback to set a default value. It could be done in both theme and module environment so suit yourself. Just add the following in your module or theme.