Πώς να χρησιμοποιήσει CSS και τους αόρατους πίνακες HTML για να ευθυγραμμίσει το περιεχόμενο webpage

Ταχυδρομημένος στις 7 Φεβρουαρίου 2009 στις 5:32 AM

Τα ζητήματα ευθυγράμμισης σε τα blogs και ιστοσελίδας σας είναι ένα κοινό πρόβλημα για τα bloggers αρχής.;; Εάν πρέπει να βάλετε το κιονοειδές περιεχόμενο (όπως μια παρουσίαση εφημερίδων ή περιοδικών) εντούτοις, δεν θα έχετε μια επιλογή αλλά για να χρησιμοποιήσετε τους πίνακες.; Δείτε το παράδειγμά μας κατωτέρω πριν και μετά από εγώ σχηματοποίησε το κείμενο:

ΠΡΙΝ ΑΠΟ:

«Αλλά πρέπει να εξηγήσω σε σας πώς όλη αυτά η μπερδεμένη ιδέα της καταγγελίας της ευχαρίστησης και του εκθειασμού του πόνου γεννήθηκε και θα σας δώσω μια πλήρη περιγραφή του συστήματος, και θα αναπτύξω τις πραγματικές διδασκαλίες του μεγάλου εξερευνητή της αλήθειας, ο κύριος-οικοδόμος της ανθρώπινης ευτυχίας. Κανένας δεν απορρίπτει, αντιπαθεί, ή αποφεύγει τηνψηφοφόρος ευχαρίστηση η ίδια, επειδή είναι ευχαρίστηση, αλλά επειδή εκείνοι που δεν ξέρουν πώς να ακολουθήσουν την ευχαρίστηση αντιμετωπίζουν λογικά τις συνέπειες που είναι εξαιρετικά επίπονες.

Ούτε υπάρχει πάλι καθένας που αγαπά ή ακολουθεί ή επιθυμεί να λάβει τον πόνο του, επειδή είναι πόνος, αλλά επειδή περιστασιακά οι περιστάσεις εμφανίζονται σε ποιους κόπο και πόνο μπορεί να του προμηθεύσει κάποια μεγάλη ευχαρίστηση. Για να πάρει ένα τετριμμένο παράδειγμα, εκτός από το οποίο μας αναλαμβάνει πάντα την επίμοχθη σωματική άσκηση, για να λάβει κάποιο πλεονέκτημα από την; Αλλά ποιος έχει οποιοδήποτε δικαίωμα να βρεί το ελάττωμα με ένα άτομο που επιλέγει να απολαύσει μια ευχαρίστηση που δεν έχει καμία ενοχλητική συνέπεια, ή ένας που αποφεύγουν έναν πόνο που δεν παράγει καμία επακόλουθη ευχαρίστηση;»

ΜΕΤΑ ΑΠΌ:

«Αλλά πρέπει να εξηγήσω σε σας πώς όλη αυτά η μπερδεμένη ιδέα της καταγγελίας της ευχαρίστησης και του εκθειασμού του πόνου γεννήθηκε και θα σας δώσω μια πλήρη περιγραφή του συστήματος, και θα αναπτύξω τις πραγματικές διδασκαλίες του μεγάλου εξερευνητή της αλήθειας, ο κύριος-οικοδόμος της ανθρώπινης ευτυχίας. Κανένας δεν απορρίπτει, αντιπαθεί, ή αποφεύγει τηνle ευχαρίστηση η ίδια, επειδή είναι ευχαρίστηση, αλλά επειδή εκείνοι που δεν ξέρουν πώς να ακολουθήσουν την ευχαρίστηση αντιμετωπίζουν λογικά τις συνέπειες που είναι εξαιρετικά επίπονες. Ούτε υπάρχει πάλι καθένας που αγαπά ή ακολουθεί ή επιθυμεί να λάβει τον πόνο του, επειδή είναι πόνος, αλλά επειδή περιστασιακά οι περιστάσεις εμφανίζονται

σε ποιους κόπο και πόνο μπορεί να του προμηθεύσει κάποια μεγάλη ευχαρίστηση. Για να πάρει ένα τετριμμένο παράδειγμα, εκτός από το οποίο μας αναλαμβάνει πάντα την επίμοχθη σωματική άσκηση, για να λάβει κάποιο πλεονέκτημα από την; Αλλά ποιος έχει οποιοδήποτε δικαίωμα να βρεί το ελάττωμα με ένα άτομο που επιλέγει να απολαύσει μια ευχαρίστηση που δεν έχει καμία ενοχλητική συνέπεια, ή ένας που αποφεύγουν έναν πόνο που δεν παράγει καμία επακόλουθη ευχαρίστηση;»

Όχι μόνο ότι το επαναμορφοποιημένο σχήμα είναι ευκολότερο να διαβάσει, διατηρεί επίσης το πλάτος ολόκληρου του πράγματος δεδομένου ότι μπορείτε να θέσετε έναν πίνακα για να καταλάβετε μόνο ένα ορισμένο ποσό εικονοκυττάρων.; Μπορείτε επίσης να θέσετε την απόσταση του διαστήματος μεταξύ των στηλών για να ταιριάξετε με τις ανάγκες σας.; Τόσο πώς κάνουμε ένα τέτοιο επιτραπέζιο εμπορευματοκιβώτιο;;

Απλός, παρεμβάλτε έναν πίνακα χρησιμοποιώντας το συντάκτη HTML σας.; Just make sure that you don?t put a value on the BORDER attribute so that the borders are invisible.? Let rows be equal to 1 and columns to 2.? You can change the rows and columns as you require.? In the screenshot below, I used Live Writer but it should be the same principle as in other web editors:

You can see above that I left the border blank and that makes it invisible. If you look at the code of the example table above, I used size 8 pixels of cellpadding and 5 pixels of cellspacing.? The border?s value is of course zero.

<table cellspacing="5" cellpadding="8" width="506" border="0">

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then after this, just paste the content inside the cells of the table.?

You will need to manually adjust the amount of text inside each cell to balance the amount of text on each one.? Adjust the table width, cellpadding and cellspacing parameter values as you desire.

That?s it! You should be able to apply the concept on invisible tables to handle columnar text displays with perfect alignment.??