Κεντράροντας δυναμικά html elements μόνο με CSS!

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
8/06/2013 από
infogeek

Ένα πράγμα που πρέπει να αναλογιστεί κανείς, είναι πόσες ώρες σπαταλάμε την ημέρα για να πετύχουμε ομαλή και responsive συμπεριφορά σε ότι σχεδιάζουμε. Προσωπικά συνηθίζω να το κάνω με javascript και jquery, απλά γιατί έτσι εξασφαλίζω την καλύτερη συμβατότητα! Ουσιαστικά αναθέτω σε αυτούς που γράφουν το jquery, την επιπλέον δουλειά της συμβατότητας!

Αλλά ειλικρινά έχω κουραστεί να μου μιλάνε για αιωνόβιους browsers, επειδή κάποιος έχει παραμείνει στα xp γιατί βαριέται ή μετά από 5-6 χρόνια με υπολογιστή στο ελάχιστο δεν έχει μάθει να περνάει ένα νέο λειτουργικό μόνος του. Πάμπολλες φορές έχω πει σε φίλους που δεν μπορούν να πληρώσουν νέο υπολογιστή ή αναβάθμιση και ούτε καινούργια windows, να βάλουν linux. Άλλοι δυσκολεύονται… Άλλοι λένε ότι παίρνω ποσοστά… 😛

Θέλω να δουλεύω με καινούργια χαρακτηριστικά! Χαρακτηριστικά και ανέσεις που έχεις στον desktop προγραμματισμό χωρίς να τις έχεις ζητήσεις! Γιατί εννοούνται…

Έτσι λοιπόν, καθώς έγγραφα κώδικα αργά χθες το βράδυ… και ξαναείδα ένα σπαστικό! loader να ξανα-πηγαίνει δεξιά, γιατί προφανώς αυτός που τον προσάρμοσε, έχει βαρεθεί να διαβάσει το w3c!   Άνοιξα ένα επιπλέον editor, τον brackets (είναι opensource της adobe, έχει πολύ καλό μέλλον), που είναι ελαφρύς και έχει standard χαρακτηριστικό το live reload!

Τελικά βρήκα ένα τρόπο, έτσι ώστε να κεντράρω, οποιοδήποτε αντικείμενο με θέση absolute, ακολουθώντας ένα pattern! Κατ’ αρχή πρέπει να ξέρουμε ότι τα  αντικείμενα που ταξινομούνται στην οθόνη από το absolute mod, έχουν σχετικό positioning system, που σημαίνει ότι παίρνουν σημείο αναφοράς το κοντινότερο πατρικό αντικείμενο με θέση absolute ή relative και αν αυτό δεν υπάρχει, σημείο αναφοράς είναι το αντικείμενο του document.

Οπότε μέρος του pattern είναι να θέτουμε πάντα το πατρικό αντικείμενο που θεωρούμε στόχο ως absolute η relative και να μην υπάρχει ενδιάμεσο πατρικό που να έχει αυτά τα δύο mods. Να έχουμε υπόψη και το box type που χρησιμοποιούμε, το default στους περισσότερους browsers είναι το content-box, που αυτό πάει να πει ότι  το border και το padding συμπεριλαμβάνονται στον υπολογισμό, ενώ εάν έχουμε border-box, όχι.

Μετά έχουμε απλά ένα μικρό κομμάτι κώδικα css που διαφέρει. Ανάλογα το box-sizing!

Παραδείγματα:

Παράδειγμα με content-box:

/* Parent element .wrapper */

.wrapper {
width: 100%;
position: relative;
padding: 0 calc(50% – 175px); /* Τρικ για κεντράρισμα αντί για margin: 0 auto; Είναι για κεντράρεις κείμενο με μήκος παραγράφου 350px */
box-sizing: content-box;
}

/* Αντικείμενο για κεντράρισμα .loader */

.loader {
height: 75px;
width: 75px;

position: absolute;
left: calc(25% + 37.5px); /* [50%/2 + width/2]  */
top: calc(25% + 37.5px); /* [50%/2 + height/2] */
}

 

– Στο content-box η absulte θέση, υπολογίζεται μετά το padding, οπότε το από το padding έχει μείνει το μισό του πραγματικού μήκους, οπότε για να κεντράρουμε θέλουμε το [υπολειπόμενο μήκος] / 2 +το μισό μήκος του στοιχείου (Εδώ μπορεί να μη είναι απόλυτο για όλους όσο αφορά το μισό μήκος του στοιχείου, ωστόσο, έτσι δουλεύει μέχρι στιγμής!). Το 50% αναφέρεται στο μήκος του πατρικού στοιχείου!

Ακολούθως είναι και το ύψος!

 

Παράδειγμα με border-box:

.wrapper {
width: 100%;
position: relative;
padding: 0 calc(50% – 175px);
box-sizing: border-box;

}

.loader {
height: 75px;
width: 75px;

position: absolute;
left: calc(50% – 37.5px);
top: calc(50% – 37.5px);
}

 

-Εδώ δεν λαμβάνεται υπόψη στον υπολογισμό το padding. Οπότε μπορούμε εύκολα να  πούμε 50% μείον το μισό του αντικειμένου loader, που είναι πιο λογικό! Και έχουμε το ίδιο ωραίο αποτέλεσμα!

 

Η υποστήριξη για το calc function είναι αρκετά καλή! Ωστόσο, δεν γλυτώνει κανείς τα javascript fallbacks για production sites! Αλλά καιρός είναι να αρχίσουμε να τα αφήνουμε αυτά πίσω!

calc-comp








Hide ↑

Το αντικείμενο των σπουδών μου είναι η Μηχανολογία! Ασχολούμαι με τον προγραμματισμός σχεδόν από τα 14. Η πρώτες μου γλώσσες ήταν η QBasic και η Turbo Pascal. Από τα 16 και έπειτα έμαθα να δουλεύω με Visual Basic. Και με την έναρξη της φοιτητικής ζωής, ξεκίνησε η δουλειά πάνω σε C#, Java, php και javascript scripting και όλο το πακέτο του web development. Εκτός από το κερδοσκοπικό κομμάτι της δουλειάς μου ως developer . Δουλεύω πάνω σε opensource εφαρμογές και παραδείγματα κώδικα για την ενίσχυση της κοινότητας του ελληνικού development. Για περισσότερα, επισκεφτείτε το infogeek.gr!

Follow Κωνσταντίνος Τσατσαρούνος on Twitter ,

Προσθέτοντας θέματα στο MP6

21 September 2013

Όσοι δεν ξέρετε το MP6, είναι ένα plugin που αλλάζει την εμφάνιση του wordpress backend, ή αλλιώς τις σελίδες διαχείρισης περιεχομένου του! Δίνει μία πολύ[…]

Read more...

Git ή SVN, επιλογή version control

09 September 2013

Είμαι πολύ καιρό χρήστης του SVN και δεν το μετανιώνω! Ωστόσο το subversion control, είναι καλό στον έλεγχο τον αλλαγών ενός project που ξέρεις από που ξεκινάει[…]

Read more...

Javascript Custom Events

06 May 2013

Ας υποθέσουμε ότι, έχουμε φτιάξει ένα αντικείμενο στο javascript, θεωρείστε το ως κλάση. Στο Javascript, ωστόσο, δεν υπάρχει το αντικείμενο της κλάσης,[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.