Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

responsive πίνακας

Αν και ο τίτλος είναι παραπλανητικός , το αποτέλσμα είναι αυτό που θέλουμε.

Εστω οτι θέλουμε να έχουμε μεσα σε ένα article 3 στήλες οι οποίες να ακολουθούν το πλάτος της σελίδας μας και μόλις φτάσουν σε επίπεδο κινητού πχ μικρότερο από 480 px πλάτος να φαίνεται η μια στήλη κάτω από την άλλη .

έστω οτι η κάθε στήλη θα έχει πλάτος 33% της σελίδα

πηγαίνουμε στο css μας και προσθέτουμε

.span_1_of_3 {
  width: 33.3%;
}

ο λόγος που το ονομάζουμε έτσι είναι ο εξής . Μπορώ αν θέλω να εχω σε κάθε στηλη άλλο πλάτος δίνοντας την άλλη κλαση . πχ .span_2_of_3 width: 66.3%; } . Στο παράδειγμα μας δεν χρειάζεται.

 

αφού κάνουμε τις προσθήκες στο css πάμε στην σελίδα μας και προσθέτουμε στα κείμενα μας

 <div class="col span_1_of_3">
<p><strong>τιτλος 1</strong></p>
<p>κείμενο 1</p>
</div>

 <div class="col span_1_of_3">
<p><strong>τιτλος 2</strong></p>
<p>κείμενο 2</p>
</div>

<div class="col span_1_of_3">
<p><strong>τιτλος 3</strong></p>
<p>κείμενο 3</p>
</div>

 αν όλα πήγαν καλά θα δούμε  3 column που ανάλογα με το μέγεθος της οθόνης αυξομειώνουν το πλάτος τους,

Για να ολοκληρώοσυμε και το responsive design θα πάμε στο css και θα πούμε. Αν η οθόνη είναι μικρότερη απο 480 px τοτε τα span_1_of_3 δείξτα το ένα κάτω από το άλλο

 

πάω λοιπόν πάλι στο css Μου και προσθέτω

 

@media only screen and (max-width: 480px) {
  .span_1_of_3 {
    width: 100%;
  }

 {fcomment}


Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords