Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
troumeliotis
Δημοσιεύσεις: 17
Εγγραφή: 09 Ιαν 2010 21:32
Επικοινωνία:

Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Δημοσίευση από troumeliotis » 22 Ιαν 2010 15:32

Γεια σας. Θέλω να τοποθετήσω δύο πίνακες στην ίδια σειρά. Ο χώρος που τους τοπθετώ είναι spry tabbed panels και στην προσπάθεια να τους τοποθετήσω, μου πηγαίνει ο ένας κάτω από τον άλλο. Το ίδιο συμβαίνει και με τα κείμενα, που δεν μπορούν να τοποθετηθούν δεξιά και αριστερά από τον πίνακα. Δοκίμασα με clear property αλλά πάλι δεν κατάφερα τίποτα.

Επίσης συμβαίνει και κάτι απροσδόκητο. Στον firefox οι πίνακες που ανέφερα παραπάνω στοιχίζονται αριστέρά ενώ στο ie στο κέντρο. Στοίχιση στο κέντρο ήταν η επιλογή μου και μου κάνει τρομερή εντύπωση, που δουλεύει στον ie ενώ στον firefox όχι.

Αυτός είναι και ο κώδικας γαι τους πίνακες

Κώδικας: Επιλογή όλων

 <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Χαλκού</li>
        <li class="TabbedPanelsTab" tabindex="0">Γαλβανιζέ</li>
        <li class="TabbedPanelsTab" tabindex="0">Βαμμένες<br />
        </li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <table width="250" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
            <tr>
              <th>Υδρορροή</th>
              <th>Κωδικός</th>
            </tr>
            <tr>
              <td><img src="../../../images/products/hmikyklies/copper/ydrorroh_250_280_copper.jpg" width="90" height="60" alt="ydrorroh_hmikyklia_250_copper" /></td>
              <td>41000</td>
            </tr>
          </table>
          <hr width="600" />
          <table width="500" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
            <tr>
              <th>Στήριγμα κοντό</th>
              <th>Κωδικός</th>
              <th>Στήριγμα μακρύ</th>
              <th>Κωδικός</th>
            </tr>
            <tr>
              <td><img src="../../../images/products/hmikyklies/copper/sthrigma_konto_copper.jpg" width="90" height="60" alt="sthrigma_konto_250_copper" /></td>
              <td>41021</td>
              <td><img src="../../../images/products/hmikyklies/copper/sthrigma_makry_copper.jpg" width="90" height="60" alt="sthrigma_hmikyklias_250_makry_copper" /></td>
              <td>41020</td>
            </tr>
          </table>
        <hr width="600" />
        <table width="500" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
          <tr>
                <th>Γωνία εξωτερική</th>
                <th>Κωδικός</th>
                <th>Γωνία εσωτερική</th>
                <th>Κωδικός</th>
            </tr>
              <tr>
                <td><img src="../../../images/products/hmikyklies/copper/gwnia_exw_copper.jpg" width="90" height="60" alt="gwnia_exw_copper" /></td>
                <td>41030</td>
                <td><img src="../../../images/products/hmikyklies/copper/gwnia_esw_copper.jpg" width="90" height="60" alt="gwnia_esw_copper" /></td>
                <td>41031</td>
              </tr>
          </table>
      <hr width="600" />
      <table width="500" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
          <tr>
                <th>Απορροή Α΄</th>
                <th>Κωδικός</th>
                <th>Απορροή Β΄</th>
                <th>Κωδικός</th>
            </tr>
              <tr>
                <td><img src="../../../images/products/hmikyklies/copper/aporroh_copper.jpg" width="90" height="60" alt="aporroh_a_copper" /></td>
                <td>41054</td>
                <td><img src="../../../images/products/hmikyklies/copper/aporroh_kollhth_copper.jpg" width="90" height="60" alt="aporroh_b_copper" /></td>
                <td>Δεν διατίθεται</td>
              </tr>
          </table>
    <hr width="600" />
    <table width="500" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
          <tr>
                <th>Τάπα με λάστιχο</th>
                <th>Κωδικός</th>
                <th>Τάπα απλή</th>
                <th>Κωδικός</th>
            </tr>
              <tr>
                <td><img src="../../../images/products/hmikyklies/copper/tapa_lastixo_copper.jpg" width="90" height="60" alt="tapa_lastixo_copper" /></td>
                <td>41040</td>
                <td><img src="../../../images/products/hmikyklies/copper/tapa_aplh_copper.jpg" width="90" height="60" alt="tapa_aplh_copper" /></td>
                <td>41041</td>
              </tr>
          </table>
  <hr width="600" />
  <table width="500" border="0" align="center" cellpadding="2" cellspacing="0" id="ΚωδικοίΠροϊόντων">
          <tr>
                <th>Συνδετήρας</th>
                <th>Κωδικός</th>
                <th>Σίτα απορροής</th>
                <th>Κωδικός</th>
            </tr>
Εδώ είναι το css

Κώδικας: Επιλογή όλων

table#ΚωδικοίΠροϊόντων &#123;
	margin&#58; 50px 0px;
&#125;

table#ΚωδικοίΠροϊόντων tr th &#123;
	font-family&#58; Verdana, Geneva, sans-serif;
	font-size&#58; 0.9em;
	text-align&#58; center;
	border-top&#58; 0px solid #000;
	border-right&#58; 1px solid #000;
	border-bottom&#58; 0px solid #000;
	border-left&#58; 0px solid #000;
&#125;

table#ΚωδικοίΠροϊόντων tr td &#123;
	font-family&#58; Verdana, Geneva, sans-serif;
	font-size&#58; 0.9em;
	text-align&#58; center;
	border-top&#58; 0px solid #000;
	border-right&#58; 1px solid #000;
	border-bottom&#58; 0px solid #000;
	border-left&#58; 0px solid #000;
	width&#58; 150px;
&#125;

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Δημοσίευση από Sermac » 22 Ιαν 2010 16:22

Δεν έχω καταλάβει τι ακριβώς θες να κάνεις, πάντως τα tables επειδή είναι block level elements, για μπουν στην ίδια σειρά με κάτι άλλο πρέπει να δηλώσεις floats.

Για μεσαία στοίχιση χρειάζεσαι ένα wrapper πριν το επίπεδο των πινάκων.
π.χ.
div.TabbedPanelsContent {
margin: 0 auto;
width: 600px;
}

Συμβουλή: μην βάζεις ελληνικούς χαρακτήρες στα ονόματα των class και id.


Edit: Τα spry tabbed panels θέλουν και javascript για να δουλέψουν, έτσι ώστε όταν επιλέγεις μια καρτέλα να παίρνουν την ιδιότητα display:none; οι αντίστοιχοι πίνακες. Οι πίνακες εξακολουθούν να βρίσκονται ο ένας κάτω από τον άλλο, απλά όταν κουβαλάνε την ιδιότητα display:none; δεν φαίνονται.
Εικόνα

troumeliotis
Δημοσιεύσεις: 17
Εγγραφή: 09 Ιαν 2010 21:32
Επικοινωνία:

Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Δημοσίευση από troumeliotis » 22 Ιαν 2010 16:42

Δηλαδή αν κατάλαβα καλά το λάθος ήταν ότι επέλεγα clear αντία για float?
Το wrapper που αναφέρεις έχει δημιουργηθεί από το πρόγραμμα μόνο του αλλά τις αλλαγές τις έκανα με css πάνω στους πίνακες. Δηλαδή θα πρέπει στο συγκεκριμμένο wrapper να δώσω text-align:center; για στοίχιση στο κέντρο?

Σχετικά με τους Ελληνικούς χαρακτήρες, μπορώ να τους αλλάξω κατ'ευθείαν στα id μέσα στο css και στον κώδικα?

Ξέρω ότι ρωτάω πολλά και γίνομαι λίγο .......
Ευχαριστώ πάντως

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Δημοσίευση από Sermac » 22 Ιαν 2010 21:11

Απ' ό,τι κατάλαβα, χρησιμοποιείς κάποιο πρόγραμμα για να παράγεις τον κώδικα. Αν είσαι αρχάριος στην html, καλύτερα να αρχίσεις να γράφεις μόνος σου σε editor για να καταλαβαίνεις και τι γίνεται. Πολλοί δίνουν ένα height ή ένα text-align και αν είναι τυχεροί, το αποτέλεσμα εμφανίζετε όπως το περίμεναν... Όμως, δεν γίνεται έτσι, η html δεν είναι word! Υπάρχουν elements με δικές τους ιδιότητες και κανόνες το καθένα. Επίσης, κάθε element δεν εξαρτάται μόνο από τον εαυτό του ή τις css ιδιότητες που εφαρμόζονται πάνω του. Αλληλεπιδρά με τα elements τα οποία περικλείει ή το περικλείουν και πιθανόν κληρονομεί css ιδιότητες.

Στο θέμα μας τώρα. Όχι, το float δεν έχει σχέση με το clear. Το float χρειάζεται για να ρυθμίσουμε την συμπεριφορά κάποιου/ιων element, όσον αφορά την θέση του και σε σχέση πάντα με το element που το περικλύει. Για να το κατανοήσεις, πρέπει να καταλάβεις την διαφορά μεταξύ block level και inline level element (Google it και θα βγάλει πολλά αποτελέσματα). Στις καρτέλες που θες να φτιάξεις, πάντως, δεν χρειάζεται να ορίσεις float.

Στο wrapper, δηλαδή το element που περικλείει ένα ή περισσότερα elements, δεν μπορούμε να δώσουμε text-align, επειδή όπως λέει και το όνομά του, το text-align στοιχίζει κείμενο. Αν θες να το στοιχίσεις στο κέντρο θα δώσεις margin:0 auto; . Αλλά κι αυτό εξαρτάται...

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

troumeliotis
Δημοσιεύσεις: 17
Εγγραφή: 09 Ιαν 2010 21:32
Επικοινωνία:

Δύο πίνακες σε μία σειρά και κεντράρισμα στην οθόνη

Δημοσίευση από troumeliotis » 22 Ιαν 2010 23:08

Ευχαριστώ πολύ. Πραγματικά με βοήθησες!

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες