προβλημα κωδικα CSS!

[FilBeats]

Καλησπέρα παιδια, προσπαθώ να φτιάξω ενα border που να ειναι τετράγωνο γύρω απο μια φώτο (συγκεκριμενα ενα person icon) και γυρω απο τα γράμματα αλλα δέν μου βγαίνει. Βρήκα έναν τρόπο του τύπου (right: 1200px;) για να ερθει εκει που το θελω αλλα ετσι δεν θα ειναι συμβατο με ολες τις οθονες-κινητα κλπ, οποιος ξερεις πως μπορω να το φτιαξω ας μου πει (βλεπε φωτο))     

 

 

PS οποιος δεν καταλαβε και θελει να του πω παραπανω περι του προβληματος μου, ας σχολιασει και θα απαντησω οσο πιο γρηγορα μπορω!

[dominotrix]

Σιγουρα το margin-right:80% δεν ειναι σωστο. Ειδικα οσον αφορα το responsiveness.

 

Το καλυτερο θα ηταν να μας παρεχεις ενα link για να σου πουμε ακριβως τι να κανεις μιας και με τα images μονο δεν ειναι ευκολο.

 

Αν δε μπορεις να δωσεις λινκ, προσπαθησε να κανεις replicate το προβλημα σου μεσα απο το codepen.io και να κανεις share εδω το link.

 

Αν δε μπορει να γινει αυτο τουλαχιστον δωσε μας και το html περα απο το css.

 

Επισης, σε πιο element εδωσες right:1200px; Και γιατι;

[XPHSTOS_]

Αν μπορείς ανέβασε κανα codepen ή jsfiddle αλλιώς ένα δείγμα όπως ακριβώς το θέλεις.

[lionheart82]

Το .border-person μπορείς να το κάνεις absolute position (με parent relative) και έπειτα να του βάλεις top:0; left:5%; πχ.

 

 

Έπειτα για καθε υπο-αναλυση που θέλεις (λογικά θα κάθεται καλά) το επεξεργάζεσαι με media queries. Θα συμφωνήσω με τα παιδιά πάντως για να μην μιλάμε στον αέρα.

 

[FilBeats]

Λοιπόν ευχαριστω πολυ που απαντησατε θα απαντησω σε ολους, dominotrix εψαξα αυτο το codepen μιας και δεν ηξερα περι τινος προκειται και ειδα πως ειναι χρησιμο αλλα θελει πληρωμη, θα το χω στο μυαλο μου παντως το συγκεκριμενο. Λοιπον ειδα και το jsfiddle νομιζω πως εμαθα να το χρησιμοποιω αν δεν κανω λαθος με αυτο θα μπορειται να δειτε τον κωδικα https://jsfiddle.net/05u42p18/2/ . Προσπαθω να βαλω ενα border ειτε τετραγωνο ειτε ορθογωνιο το οποιο θα εχει μεσα icon ή φωτο και απο κατω μια περιγραφη ή ενα όνομα. Το θεμα ειναι οτι το θελω ολο αυτο σε συγκεκριμενο μερος της οθονης

[XPHSTOS_]

Λοιπόν ευχαριστω πολυ που απαντησατε θα απαντησω σε ολους, dominotrix εψαξα αυτο το codepen μιας και δεν ηξερα περι τινος προκειται και ειδα πως ειναι χρησιμο αλλα θελει πληρωμη, θα το χω στο μυαλο μου παντως το συγκεκριμενο. Λοιπον ειδα και το jsfiddle νομιζω πως εμαθα να το χρησιμοποιω αν δεν κανω λαθος με αυτο θα μπορειται να δειτε τον κωδικα https://jsfiddle.net/05u42p18/2/ . Προσπαθω να βαλω ενα border ειτε τετραγωνο ειτε ορθογωνιο το οποιο θα εχει μεσα icon ή φωτο και απο κατω μια περιγραφη ή ενα όνομα. Το θεμα ειναι οτι το θελω ολο αυτο σε συγκεκριμενο μερος της οθονης

Ωραία, θα χρησιμοποιήσεις το bootstrap βλέπω.

Οπότε δεν έχεις παρά να χρησιμποιήσεις τα grids του για να πετύχεις το αποτέλεσμα που θέλεις.

 

Δες στο παράδειγμα μου εδώ: http://codepen.io/xphstos/pen/yVqbRy?editors=1000

Μπορείς να αγνοήσεις 100% όλο το CSS που έχω γράψει, αφού αυτό που σε ενδιαφέρει είναι το html markup και οι classes του bootstrap.

Για παράδειγμα μπορείς το col-xs-6 που λέω να το κάνεις 3 και να μικρύνει το box. Με κλάσεις όπως col-xs-offset-[x] μπορείς να σπρώξεις τις κωλώνες από αριστερά για να τις φέρεις εκεί που θέλεις.

Στο παράδειγμα που μας δίνεις φορτώνεις μεν το bootstrap αλλά δεν κάνεις χρήση του.

Θα σε συμβούλευα να δεις το pen μου και να διαβάσεις εδώ http://getbootstrap.com/css/ για τα grids του BS.

 

PS. Sorry για το παράδειγμα μου που είναι στο codepen αλλά ασυναίσθητα το έκανα εκεί... επειδή αυτό δουλεύω.

Πάντως να ξέρεις είναι free, και εγώ free account έχω. 

** Πρόσεξε τo markup σου, τα span δεν τα κλείνεις καθόλου και γενικά έχεις αρκετά λάθη.

 

EDIT: Δες το και σε jsfiddle, εφαρμοσμένο πάνω στο παράδειγμα σου https://jsfiddle.net/jwoL5910/