Κεντράρισμα

fromaz · 3 Σεπτεμβρίου 2009

Guys διαβάζετε καθόλου ή λέτε ότι θέτε; Στο post #10 σας είπα τον τρόπο πως κεντράρουμε οτιδήποτε, αρκεί να γνωρίζουμε το ύψος του div.

- Σε κείμενο, αυτό υπολογίζεται με βάση το μέγεθος της γραμματοσειράς. Είτε μία σειρά έχουμε είτε 10.

- Σε φωτό, υπολογίζεται με βάση το ύψος της

Επαναλαμβάνω, ο τρόπος απαιτεί 3 properties:

- positioning

- top 50%

- margin-top ίσο με το μείον μισό του ύψους

Αν δεν γνωρίζουμε το ύψος του div (μεταβάλλεται δυναμικά), τότε ναι - θα χρειαστεί 1 εντολή σε jQuery ή whatever...

hartzoua · 3 Σεπτεμβρίου 2009

Fromaz.......

αν ξέρεις το ύψος του div τότε δεν υπάρχει λόγος να συζητάμε! Μπορείς να το κεντράρεις κάθετα με 100 τρόπους! (μέχρι και με από πάνω που λέει ο λόγος!). Το ερώτημα έχει βάση αν δεν ξέρουμε το ύψος του div. Και τότε δεν υπάρχει τρόπος να γίνει με css χωρίς τη χρήση javascript!

Αύτό που εσύ προτείνεις είναι η λύση σε στημένο παιχνίδι

fromaz · 3 Σεπτεμβρίου 2009

Γιατί είσαι τόσο απόλυτος; Στο post #2 υπάρχει ένα link που δείχνει έναν τρόπο για κεντράρισμα χωρίς να γνωρίζουμε το ύψος του div. Υπάρχουν και άλλοι τρόποι όπως, πχ, αυτός του andrip.

Άλλωστε, στις περισσότερες περιπτώσεις γνωρίζουμε το ύψος. Αλλιώς, τι layout φτιάχνουμε;

Uberalles_gr · 3 Σεπτεμβρίου 2009

Fromaz ο κώδικας σου είναι λάθος σε αυτό που θέλω.

Ζήτησα να κεντράρει στην μέση.

Εσένα αυτό που κάνει, είναι να αφήνεις το 50% του ύψους κενό από την αρχή. Εάν βάλω μία εικόνα π.χ. που έχει ύψος 300px δεν θα κεντράρει σωστά σε αντίθεση με τον κώδικα του Πάρη που το κάνει.

Ένα άλλο παράδειγμα είναι εάν θέλω να βάλω το παρακάτω κείμενο

"Α B C D "

Το αποτέλεσμα είναι λάθος σύμφωνα πάντα με αυτό που θέλω

Στο post #07 , ο Πάρης έχει δώσει την λύση !!

ΠάρηςΓ · 3 Σεπτεμβρίου 2009

]<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">

αν θες να ειναι πιο σωστο βαλε..

Fromaz ειχα χρησιμοποιησει το τροπο σου σε ενα παλαιοτερο project μου ,πιστευω πως κανει για αυτο που θελει ο φιλος μας απλα το κακο του ειναι πως αν μικρυνει το παραθυρο τοτε δε κανει σωστό scroll.Η λυση για να κανει scroll top ειναι οπως λεει ενα λινκ που δοθηκε στην αρχη...Το table που εβαλα ειναι απλα μια γρηγορη λυση για αυτο που ζητησε...

Ενα παραδειγμα για κεντραρισμα χωρις προβλημα στο scroll που εκανα προσφατα

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body, html {
height: 100%;
margin:0;
padding:0;
font-family: Verdana, Geneva, sans-serif;
}

#shim {
visibility: hidden;
width: 100%;
height: 43%;
margin-top: -73px;
float: left;
}

#loginwrapper {
background-image: url(img/bck_login.png);
background-repeat: no-repeat;
height: 145px;
width: 641px;
top: 43%;
clear: both;
position: relative;
top: -73px;
position: static;
margin-right: auto;
margin-left: auto;
}
#loginwrapper #title {
width: 386px;
float: right;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
padding-top: 12px;
margin-right: 20px;
}
.inputs {
width: 220px;
border: 1px solid #006;
background-color: #FAFDFE;
}
-->
</style>
</head>

<body onload="document.getElementById('username').focus()">

<!--<div id="shim"></div>-->
<div id="shim"></div>
<div id="loginwrapper">
 <div id="title">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td height="35" colspan="3"  style="text-align:left; vertical-align:top"><span style="font-weight: bold; font-size: 16px; color: #000; text-align:left">Σύνδεση χρήστη</span></td>
       
     </tr>
     <tr>
       <td width="23%" height="30" style="color: #000;">Όνομα</td>
       <td width="60%" ><label>
         <input name="username" type="text" class="inputs" id="username"  tabindex="1"/>
       </label></td>
       <td width="17%" rowspan="2" style="text-align:center"><label>
         <input type="image" name="imageField" id="imageField" src="img/login.png" />
       </label></td>
     </tr>
     <tr>
       <td height="30" style="color: #000;">Κωδικός</td>
       <td ><label>
         <input name="password" type="password" class="inputs" id="textfield2" tabindex="2"/>
       </label></td>
       
     </tr>
     <tr>
       <td colspan="3"> </td>
       
      
     </tr>
   </table>
 </div>
</div> 

</body>
</html>

fromaz · 3 Σεπτεμβρίου 2009

Fromaz ο κώδικας σου είναι λάθος σε αυτό που θέλω.

Ζήτησα να κεντράρει στην μέση.

Εσένα αυτό που κάνει, είναι να αφήνεις το 50% του ύψους κενό από την αρχή. Εάν βάλω μία εικόνα π.χ. που έχει ύψος 300px δεν θα κεντράρει σωστά σε αντίθεση με τον κώδικα του Πάρη που το κάνει.

Ένα άλλο παράδειγμα είναι εάν θέλω να βάλω το παρακάτω κείμενο

"Α B C D "

Το αποτέλεσμα είναι λάθος σύμφωνα πάντα με αυτό που θέλω

Συγγνώμη... Είχα την εντύπωση ότι ζήτησες αυτό που γράφεις

να μην έχω τίποτα άλλο παρά μόνο ένα κείμενο (5 λέξεις δεν είναι παραπάνω)

Αρες-μάρες κουκουνάρες...

Uberalles_gr · 3 Σεπτεμβρίου 2009

Συγγνώμη... Είχα την εντύπωση ότι ζήτησες αυτό που γράφεις

Αρες-μάρες κουκουνάρες...

Κείμενο με 5 λέξεις

"Άρες μάρες κουκουνάρες"

και επειδή βλέπω ότι σε χαλάνε κάποια πράγματα πάμε σιγά σιγά

Άρες ---> 1η λέξη

---2η λέξη

μάρες ---> 3η λέξη

--->4η λέξη

κουκουνάρες ---> 5η λέξη

ΟΚ?

fromaz · 3 Σεπτεμβρίου 2009

Σου εξήγησα (2 φορές) πως σε αυτήν την περίπτωση κάνεις χρήση των negative margins. Στον κώδικα που παρέθεσα δεν υπήρχε λόγος γι αυτό και δεν χρησιμοποίησα το ανάλογο rule. Το ανέφερα όμως.

OK?

Επί τη ευκαιρία, θα πρέπει να γνωρίζεις πως με tables κεντράραμε στο μεσαίωνα του Web. Εδώ και 10 χρόνια, η χρήση του Table για layout έχει μπαναριστεί σε όλον τον πλανήτη και φυσικά από τα standards.

Y.Γ.: Μην ανησυχείς, δε με χαλάει τίποτα. Προσπάθησα να σε βοηθήσω αλλά κατά πως φαίνεται δε χρειάζεσαι βοήθεια. Προφανώς, ανοίγεις topics για να μας δοκιμάσεις

ΠάρηςΓ · 3 Σεπτεμβρίου 2009

Σου εξήγησα (2 φορές) πως σε αυτήν την περίπτωση κάνεις χρήση των negative margins. Στον κώδικα που παρέθεσα δεν υπήρχε λόγος γι αυτό και δεν χρησιμοποίησα το ανάλογο rule. Το ανέφερα όμως.

OK?

Επί τη ευκαιρία, θα πρέπει να γνωρίζεις πως με tables κεντράραμε στο μεσαίωνα του Web. Εδώ και 10 χρόνια, η χρήση του Table για layout έχει μπαναριστεί σε όλον τον πλανήτη και φυσικά από τα standards.

Y.Γ.: Μην ανησυχείς, δε με χαλάει τίποτα. Προσπάθησα να σε βοηθήσω αλλά κατά πως φαίνεται δε χρειάζεσαι βοήθεια. Προφανώς, ανοίγεις topics για να μας δοκιμάσεις

Ο τροπος που παρεθεσες εχει προβλημα στο scroll καμια φορά οπως εγραψα στη προηγουμενη.Εαν θελει απλα να βαλει ενα κειμενο το table του αρκει. Σε μερικα κομάτια χρησιμοποιούνται ακομα τα tables.Τωρα για αυτο το απλο που θελει να κανει δεν νομιζω να υπαρχει θεμα για τη χρηση table..

fromaz · 3 Σεπτεμβρίου 2009

Εξαρτάται το πως το εννοείς αγαπητέ Πάρη. Φυσικά, δεν θα σε βάλει κανείς φυλακή αν κάνεις χρήση του table για layout ούτε θα σου πάρει το κεφάλι.

Όμως, τα standards είναι ο κοινός παρονομαστής με βάση τον οποίο κρινόμαστε και συνυπάρχουμε. Θέλω να πω ότι αν σε ενδιαφέρει να γίνεις ανταγωνιστικός επαγγελματίας στο χώρο αυτόν, είτε μόνος σου δουλεύεις είτε με άλλους, τότε δεν έχεις άλλη επιλογή από το να εξελίσσεσαι. Υπάρχει λόγος για τον οποίο υπάρχουν χιλιάδες σελίδες στο Web γι αυτό το θέμα. Υπάρχει λόγος για τον οποίο το presentation layer είναι θέμα του CSS και όχι του markup. Είναι λάθος να χρησιμοποιούμε και το παραμικρό tag που σα σκοπό έχει την παρουσίαση. Λάθος όχι ηθικό ούτε θεωρητικό. Λάθος που κοστίζει σε χρόνο, παραγωγικότητα, ευελιξία και χρήμα. Το markup αφορά στην πληροφορία και τη δομή της. Το πως παρουσιάζεται αυτή η πληροφορία είναι θέμα του CSS. Αφενός, δεν είναι πάντα εφικτό να επέμβουμε στο markup - είτε γιατί παράγεται αυτόματα (από CMS) είτε γιατί είναι δουλειά άλλου. Αφετέρου, είναι πολύ εύκολο με αλλαγή της μιας γραμμής στο CSS να ξεκεντράρουμε το κείμενο αν στο μέλλον το μετανοιώσουμε ή θέλουμε να αλλάξουμε στυλ.

Τέλος πάντων αρκετά ασχολήθηκα με το θέμα. Όπως βολεύεται κανείς!

hartzoua · 3 Σεπτεμβρίου 2009

Τι καλά που περνάμε σχολίαζοντας ενα θέμα που έχουν σχολιάσει χιλιάδες άλλοι πριν από εμάς!!!!! (αποτυχημένα οι περισσότεροι)

Fromaz , είχες δίκιο , η λύση στο post #2 απαιτεί μόνο css! Όσο ζει κανείς μαθαίνει

Ακόμα προτείνω να φτιάξουμε ομάδες που θα κυκλοφορούν τα βράδια με κουκούλες και θα εξολοθρεύουν όποιον τολμάει να χρησιμοποιεί ακόμα tables! Και μάλιστα όταν ακόμη οι 4-5 μεγάλοι browsers δεν έχουν καταφέρει να υιοθετήσουν ένα κοινό τρόπο παρουσίασης!

Και ναι Fromaz, ένα μεγάλο ποσοστό των sites δεν έχουν καθορισμένο ύψος των div .Αυτό οφείλεται σε κάτι που λέγεται dynamic content.

Και δεν έχω σκοπό να προσβάλω κανέναν, πλάκα κάνουμε! Πάντως η λύση έχει δωθεί στο post #2 (μέχρι να βρεθεί bug και σ αυτή!)

trustfm · 4 Σεπτεμβρίου 2009

Επί τη ευκαιρία, θα πρέπει να γνωρίζεις πως με tables κεντράραμε στο μεσαίωνα του Web. Εδώ και 10 χρόνια, η χρήση του Table για layout έχει μπαναριστεί σε όλον τον πλανήτη και φυσικά από τα standards.

Τα tables ειναι w3c compatible http://www.w3.org/TR/html401/struct/tables.html και ειναι η πιο σωστή μέθοδος κεντραρισματος όλα τα άλλα ειναι αλχημείες.

Uberalles_gr · 4 Σεπτεμβρίου 2009

Φίλε fromaz, ούτε ήθελα να σε προσβάλω (όπως εσύ έκανες) ούτε να ανοίγω topic για να σας δοκιμάσω. Προς Θεού.

Απλώς με βόλεψε αυτό που έγραψε ο Πάρης.

Από εκεί και πέρα συζήτηση κάνουμε, όχι να δείξουμε ποιος είναι ποιο έξυπνος από τον άλλο.

Ευχαριστώ όλα τα παιδιά για τις απαντήσεις τους.

fromaz · 4 Σεπτεμβρίου 2009

Τα tables ειναι w3c compatible http://www.w3.org/TR/html401/struct/tables.html και ειναι η πιο σωστή μέθοδος κεντραρισματος όλα τα άλλα ειναι αλχημείες.

Η έκτη παράγραφος από το link που παρέθεσες αρχίζει ως εξής:

Tables should not be used purely as a means to layout document...

και παραπέμπει σε άλλη σελίδα για περισσότερα.

Εναλλακτικά, μπορείς να βάλεις στο google το λήμμα "should I use tables for layout?" και να πάρεις 1.720.000 αποτελέσματα. Θα διαπιστώσεις ότι το θέμα έχει συζητηθεί και λυθεί προ πολλού. Φυσικά, θα βρεις και επικριτές όπως καλή ώρα. Άλλα αυτοί είναι σταγόνα στον ωκεανό.

Όλα τα άλλα - όπως λες κι εσύ - είναι αλχημείες. Περισσότερο όμως είναι θέμα βαθύτατης άγνοιας και του κλασσικού νεοελληνικού ξερολισμού.

trustfm · 11 Σεπτεμβρίου 2009

Η έκτη παράγραφος από το link που παρέθεσες αρχίζει ως εξής:

και παραπέμπει σε άλλη σελίδα για περισσότερα.

Εναλλακτικά, μπορείς να βάλεις στο google το λήμμα "should I use tables for layout?" και να πάρεις 1.720.000 αποτελέσματα. Θα διαπιστώσεις ότι το θέμα έχει συζητηθεί και λυθεί προ πολλού. Φυσικά, θα βρεις και επικριτές όπως καλή ώρα. Άλλα αυτοί είναι σταγόνα στον ωκεανό.

Όλα τα άλλα - όπως λες κι εσύ - είναι αλχημείες. Περισσότερο όμως είναι θέμα βαθύτατης άγνοιας και του κλασσικού νεοελληνικού ξερολισμού.

Όταν θα αναφέρεσαι σε μένα καλύτερα να πλένεις το στόμα σου πρώτα. Το ποιος το παίζει ξερόλας φαίνεται άνετότατα απο τα γραφόμενά σου.

Σύνδεση

Κεντράρισμα

Προτεινόμενες αναρτήσεις

fromaz

hartzoua

fromaz

Uberalles_gr

ΠάρηςΓ

fromaz

Uberalles_gr

fromaz

ΠάρηςΓ

fromaz

hartzoua

trustfm

Uberalles_gr

fromaz

trustfm

Αρχειοθετημένο

Σύνδεση