css, horizontal, voithia!

[FilBeats]

Καλησπέρα παιδιά! Έχω ένα μεγάλο πρόβλημα σχετικά με το πως να βάλω σε μια οριζόντια σειρά κάποια αντικείμενα , είτε είναι εικόνες είτε κείμενα είτε βίντεο είτε οτιδήποτε.

 

Αυτό που θέλω να πω είναι πως δεν έχω κατανοήσει το πως γίνεται αυτό, δηλαδή έχω ψαχτεί και έχω καταλάβει ότι βάζεις ;oλα τα αντικείμενα που θες σε position absolute και μετά παίζεις με τα margin-left, margin-right με τα pixels μέχρι να φτάσεις τις διαστάσεις εκεί που θες, αλλά και πάλι κάτι μου λέει ότι το κάνω με λάθος τρόπο. Και από ότι είδα στο ίντερνετ κάποιοι το κάνουν με σκέτο left ή right και παίζουν με το width.

 

Οι ερωτήσεις μου:

1)Τι διαφορά έχει το left με το margin-left και αντίστοιχα το top, right, bottom.

2)Το width τι κάνει, ακόμα και στο android studio δεν έχω καταλάβει την λειτουργία του και απλά το χρησιμοποιώ3

3)Υπάρχει σωστός τρόπος , ή και οι 2 είναι σωστοί;

 

 

p.s τα αγγλικά μου δεν είναι και τόσο καλά για να καταλάβω μέσω ίντερνετ ακριβώς αυτά που θέλω.

[XPHSTOS_]

Μιλάμε για layout όπως sidebar και main area ή για menu links πχ.?

To margin (περιθώριο στα ελληνικά) δίνει περιθώριο αριστερά δεξιά πάνω ή κάτω από ένα element. 
Το σκέτο left right top bottom, αφορούν την θέση του αντικειμένου είτε με βάση τον browser είτε με βάσει το γονικό του element.
Αν αυτό είναι relative.

[FilBeats]

Μιλάμε για layout όπως sidebar και main area ή για menu links πχ.?

 

To margin (περιθώριο στα ελληνικά) δίνει περιθώριο αριστερά δεξιά πάνω ή κάτω από ένα element. 

Το σκέτο left right top bottom, αφορούν την θέση του αντικειμένου είτε με βάση τον browser είτε με βάσει το γονικό του element.

Αν αυτό είναι relative.

Έχει διαφορά αν είναι links ή sidebar? Στην συγκεκριμένη περίπτωση θέλω να βάλω σε οριζόντια κατάταξη 4 κειμενάκια με border, και να είναι δίπλα δίπλα ομοιόμορφα!

[XPHSTOS_]

Έχει μια μικρή διαφορά καλό θα ήταν, αν μιλάμε για συναφή κειμενάκια, να βρίσκονται σε μία λίστα UL.
Είναι πιο σωστό σημασιολογικά.

[dominotrix]

Αν θελεις να βαλεις καποια αντικειμενα σε οριζοντια εμφανιση, απλα τους δινεις flex:1; και στο container div αυτο δηλαδη που τα εχει μεσα ολα του δινεις display:flex; Γενικα ψαξε στο google για display flex και εχει απειρα tutorials με πολυ ευκατανοητες μεθοδους για να καταλαβεις πως λειτουργει.

 

Εναλλακτικα, μπορεις απλα να παιξεις με float:left; για να "κολλησουν" ολα αριστερα το ενα με το αλλο ή να παιξεις με display:inline αν ειναι λινκς (που ειναι απο default τους inline) και οχι divs.

 

1) Οταν εχεις ενα div μπορεις με css να πειραξεις τις αποστασεις. Αλλα μπορεις να επιλεξεις ποιες αποστασεις θα ειναι αυτες:

    α) content ειναι το κειμενο

    β) padding ειναι η αποσταση απο το πλαισιο και προς τα μεσα "σκουντωντας" το content

    γ) border ειναι το περιγραμμα του πλαισιου που περιεχει το content

    δ) margin ειναι η αποσταση εξωτερικα του πλαισιου

 

Αν πατησεις ενα F12 θα δεις στα styles αν σκρολλαρεις τεεερμα κατω σου το εξειγει με μια εικονα πως ειναι. Απο μεσα προς τα εξω ειναι content padding border και margin.

 

Το margin-top:10px θα κουνησει προς τα κατω πιεζωντας απο επανω χωρο το element σου.

Το top:10px; θα λειτουργησει μονο αν εχεις δηλωμενο position:relative / absolute / fixed και το μετακινει παντα βαση του τι εχεις δηλωσει στο position.

 

(*) Το margin και το top μπορει να παρει και αρνητικες τιμες αλλα το padding οχι.

 

Για τα παραπανω, καλο θα ηταν να ενημερωθεις απο το W3School ή απο το codeacademy για το τι κανουν μιας και θεωρουνται αρκετα βασικες γνωσεις για css. Περισσοτερα θα μαθεις εκει. Εδω κυριως ρωτησε οταν κολλησεις καπου, αλλα πρωτα θα χρειαστει να μαθεις εστω τα βασικα.

 

2) Το width ειναι το πλατος ενος element. Μπορει να παρει πχ 154px ή 66% ή 100vw κλπ. Ειναι καλο να το δηλωνεις τις περισσοτερες φορες μαζι με το height.

 

3) Σωστος τροπος για ποιο πραγμα ακριβως;