Skip to main content

Div VS Span - HTML Tags

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

        Από τη στιγμή που εισήχθησαν τα φύλλα CSS στην HTML, οι προγραμματιστές είχαν τη δυνατότητα να χρησιμοποιήσουν κώδικα CSS για τη διαμόρφωση των διαφόρων στοιχείων της σελίδας απλά χρησιμοποιώντας την ιδιότητα style="..." του εκάστοτε tag.

        Έτσι, το <p align="center"> έγινε <div style="text-align:center;">, ενώ το <font color="#FFC354" size="+1"> αντικαταστάθηκε από <span style="color:#FFC354;font-size:large;">. Θα μπορούσαμε όμως κάλλιστα να γράψουμε και <div style="color:#FFC354;font-size:large;">.

        Η διαφορά είναι ότι, βάσει προεπιλογής το <span...> δεν περιέχει κανένα στυλ, ενώ το <div...> περιέχει ως στυλ το style="display:block;". Αυτό σημαίνει πως το να γράψουμε πχ.
Εκτός<div>Εντός</div>Εκτός

ισοδυναμεί με το γράψουμε
Εκτός<br/>Εντός<br/>Εκτός

        Kατά τα άλλα, τα δύο tags έχουν εντελώς ίδιες δυνατότητες και μπορούμε να ορίσουμε το στυλ τους, όπως και σε κάθε άλλο html tag, απλώς ορίζοντας σε κάθε span ή div το id τους ή το όνομα της class στην οποία ανήκουν. Πχ. <div class="sample_class"> ή <div id="sample_id">

Comments

Popular posts from this blog

Drupal: Status report problem: HTTP request status fails

Some of you may have encountered this problem in some cases. In "Status Report" page, accidentally appears the error below:

HTTP request status   FailsYour system or network configuration does not allow Drupal to access web pages, resulting in reduced functionality. This could be due to your webserver configuration or PHP settings, and should be resolved in order to download information about available updates, fetch aggregator feeds, sign in via OpenID, or use other network-dependent services.
What I did, was to recheck that my webserver had access to internet. Of course it had! The problem exists mostly when there is no information to resolve the domain name used with the local ip address of the webserver. This means that an error occurs in the entries of the DNS server.

In cases where DNS server is not existant(ex. local testing environment) all you have to do is inform the /etc/hosts file. For example if you use the domain http://www.example.local/ and your local ip addr…

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 …

Override the default Opigno LMS navigation menu

I recently used Opigno LMS for a client's project. It's actually a LMS distribution of Drupal. It supports WebEx meetings, Lessons, even PDF Certificates after you complete a Course. In my case though I needed Lessons but no PDF Certificates. Disabling the proper apps/modules wasn't anything out of the ordinary Drupal procedure. What was lacking though was a way to override the main menu to not display the My Achievements item.My Achievements is enabled as long as the Opigno Quiz App (@see Lessons above) is enabled and no hook exists to override this functionality. To disable it I had to create a custom theme using the Platon theme as a base (Platon is the default theme of the Opigno LMS) and copy 3 functions of Platon's template.php file to my theme's template.php with the proper modifications to get what I wanted.See the code below...