CSS: 6ο Μάθημα

Επανάληψη

Νέα ύλη

Float

https://www.w3schools.com/css/css_float.asp

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

Δύο p με lorem. Στη 2η img με float right/left/none
3 divs με bgrd color. Αρχικά με 3 διαφορετικές κλάσεις div1, div2, div3 όπου σε κάθε κλάση να υπάρχει bgrd+float+border+margin.
A’ τρόπος: Για να μαζευτεί ο κώδιξ να μπουν τα κοινά στην .div
Β’ τρόπος: Να γίνει κλάση masterdiv με τα κοινά και στην html να δηλωθεί ως: div class=”div1 masterdiv”
Αντί για width να μπει περιεχόμενο “One”, “Two”, “Three”.
Βάζω μια p εκτός και βλέπω ότι μπαίνει δεξιά στον υπόλοιπο χώρο. Πως μπορώ να το αποτρέψω αυτό; Η απάντηση στη συνέχεια…

Συνεχίζουμε με έναν τρίτο τρόπο για την κατασκευή μενού:

Δημιουργώ div id=”menu” με #menu{ height: 100px; background-color: green;

<div id="menu">
    <div class="ar"></div>
    <div class="de"></div>
</div>

body{
    margin: 0px;
}
#menu{
    height: 100px;
    background-color: green;
}
#menu .ar{
    background-color:brown;
    height: 100px;
} 
#menu .de{
    background-color: blue;
    height: 100px
}

Έχουμε overflow και υπερκαλύπτουν τον γονέα. Δοκιμάζω να βγάλω το height στον γονέα και βλέπω ότι μεγαλώνει για να χωρέσει τα παιδιά. Δοκιμάζω να προσθέσω padding στον γονέα και να χρησιμοποιήσω την ιδιότητα overflow:hidden για επανάληψη. Επαναφέρω το height στον γονέα και συνεχίζω.

Τα divs είναι display:block πιάνουν όλο το μήκος (100%) της οθόνης οπότε το 2ο κατεβαίνει από κάτω.

α) Προσθέτω float: left; και στα δύο παιδιά και πλέον χάνονται γιατί σταματάνε να έχουν σχέση με τον γονέα και άρα, αν και block elements, δεν ξέρουν πόσο είναι το 100% για να το πιάσουν.

β) Προσθέτω σε κάθε παιδί width: 40%; οπότε επιπλέουν πάνω από τον γονέα.

γ) Βγάζω το height από τον γονέα #menu και βλέπω ότι εξαφανίζεται γιατί πλέον δεν περιέχει τίποτε (τα παιδιά του επιπλέουν).

Δηλαδή όταν είναι float ο γονέας δεν γνωρίζει τίποτε για τα παιδιά ενώ αντίθετα τα float παιδιά γνωρίζουν τις ιδιότητες του πατέρα ((π.χ. ύψος, πλάτος).

Βγάζω το float: left; από το .ar και τότε ο γονέας εμφανιζεται γιατί περιέχει πλέον το παιδί .ar

Βγάζω το float: left; από το .de και τότε ο γονέας αυξάνει σε ύψος για να συμπεριλάβει και το 2ο παιδί .de

δ) Προσθέτω μια παράγραφο με lorem έξω από τα div και αναμενόμενα πηγαίνει από κάτω.
Κάνω float τα δυο παιδιά, ο γονεάς εξαφανίζεται (γιατί πλέον δεν περιέχει τίποτε) και η παράγραφος μπαίνει δεξιά από τα επιπλέοντα παιδιά. Δοκιμάζω να βάλω και να βγάλω το height του γονέα.
Για να κάνω χώρο για τα παιδιά, παρόλο που είναι float, ορίζω height:100px στον γονέα, οπότε ο γονέας εμφανίζεται και σπρώχνει παρακάτω την p.

Σε κάθε περίπτωση θα πρέπει εμείς να πούμε στον γονέα πόσο χώρο θέλουν τα παιδιά του ώστε να σπρώξει τα άλλα στοιχεία στον παρακάτω χώρο…!

Παρατήρηση: Όταν κάνω display:block elements να είναι floats τότε μπαίνουν το ένα δίπλα στο άλλο.
Θα πρέπει να βάλω το ίδιο ύψος στον container element ώστε να μη βρεθεί κάτι άλλο διπλα στον χώρο που πήραν τα float παιδιά του. Είναι καλή τακτική να έχω ένα div γονέα για τα float παιδιά του.

Δημιουργώ ακόμηξ ένα “κουτί” στο κέντρο

<div id="menu">
    <div class="ar"></div>
    <div class="ke"></div>
    <div class="de"></div>
</div>

Επειδή όλα έχουν κοινά στοιχεία, μαζεύω αυτά τα κοινά χαρακτηριστικά σε μια νέα κλάση με όνομα box και τη βάζω σε κάθε κουτί:

<div id="menu">
    <div class="ar box"></div>
    <div class="ke box"></div>
    <div class="de box"></div>
</div>

και η css γίνεται:

body{
    margin: 0px;
}
#menu{
    height: 100px;
    background-color: green;
}
#menu .box{
    height: 100px;
    float: left;
    width: 40%;
}
#menu .ar{
    background-color:brown;
}
#menu .de{
    background-color: blue;
}
#menu .ke{
    background-color:darkgoldenrod
}

To κουτί de δεν χωρά οπότε κατεβαίνει από κάτω.

Μπορώ να πάω στο menu .box και να δώσω width: 30%. Παρατηρώ τον κενό χώρο και δίνω τελικά width: 33.333%;

Με τη νέα κλάση box, τακτοποίησα τον κώδικα και μπορώ να αλλάζω από ένα σημείο όλα τα κοινά χαρακτηριστικά και όχι να αλλάζω τις ιδιότητες σε κάθε ένα από τα 3.

Πειραματιζόμαστε με τον σχολιασμό των float και το height του γονέα και παρατηρούμε τι γίνεται στην εμφάνιση για να καταλάβουμε τι γίνεται.

Αλλάζω σε float:right και βλέπω ότι μπαίνουν ανάποδα…

Ο πρώτος που στοιχίζεται καταλαμβάνει τον χώρο και οι επόμενοι πιάνουν ότι μένει.

ΔΕΝ υπάρχει float:center!

Στοίχιση αντικειμένου στο κέντρο:

Δημιουργώ ένα div class=”cntr” το οποίο είναι block element πιάνει όλο το πλατος. Αν δώσω πλάτος τότε ότι περισσεύει είναι margin-right.

με

.cntr{
    height: 100px;
    width: 200px;
    background-color: red;
    margin-left:auto;
    margin-right: auto;
}

To παραπάνω μπορώ να το γράψω διάφορους τρόπους:

    margin: 0 auto;
ή
    margin:0 auto 0 auto;

Αν κάνω το div float ή αν το element είναι inline ή inline-block τότε δεν μπορώ να το βάλω στο κέντρο!

Δημιουργία input text (είναι inline-block) στο κέντρο του μενού:

#menu .ke input{
    height: 30px;
    display: block;
    margin: 0 auto;
    margin-top: 35px;   /*ή margin:35px auto ή margin:35px auto 35px auto*/ 
}

Για να δώ ότι το input είναι inline element , χρησιμοποώ dev tools (F12) > Computed > στην αναζήτηση γράφω display.

Θα βάλουμε δίπλα στο πεδίο input ένα εικονίδιο.

Θα φτιάξουμε ένα ακόμη div μέσα στο μεσαίο div με όνομα kentrarisma. Mέσα στο οποίο θα βάλουμε το input και το εικονίδιο.

<div id="menu">
    <div class="ar box"></div>
    <div class="ke box">
        <div class="kentrarisma">
            <input type="text">
        </div>
    </div>
    <div class="de box"></div>
</div>

#menu .ke .kentrarisma{
    background-color: greenyellow;
    height: 35px;
    margin: 0 auto;
    margin-top: 35px;
}

Αντίστοιχα από το menu .ke input{ βγάζω τα margins:

#menu .ke input{
    display: block;
    height: 100%;
    /* margin:20px auto; */
    /* margin-top: 20px; */
}

Extension: Emoji (Perκovec), CTRL+SHIFT+P, emoji>insert emoji, magnifying left. (Στα win10: win Logo + “.”)
κάτω από το input γράφω:

<div class="ke box">
        <div class="kentrarisma">
            <input type="text">
            <a href="#">🔍</a>
        </div>
    </div>

οπότε προσθέτω και τον νέο γονέα στο css για το input:
#menu .ke input{ > #menu .ke .kentrarisma input{

ώστε να καταλαβαίνω ακριβώς την ιεραρχία!

Και επειδή σπρώχνει κάτω το emoji δημιουργούμε την κλάση:

#menu .ke .kentrarisma a{
    background-color: red;
    text-decoration: none;
    display:block
}

Το a είναι inline element. όταν το κάνω block πιάνει όλη τη γραμμή.

Άρα κάνω και το a και το input > float:left.

O κώδικας css γίνεται:

body{
    margin: 0px;
}
#menu{
    height: 100px;
    background-color: green;
}
#menu .box{
    height: 100px;
    float: left;
    width: 33.33%;
}
#menu .ar{
    background-color:brown;
}
#menu .de{
    background-color: blue;
}
#menu .ke{
    background-color:darkgoldenrod
}
#menu .ke .kentrarisma{
    background-color: greenyellow;
    height: 35px;
    margin: 0 auto;
    margin-top: 35px;
}
#menu .ke .kentrarisma input{
    height: 30px;
    display: block;
    /* margin: 35px auto 0 auto; */
    float: left;
    /* margin-top: 35px; */
}
#menu .ke .kentrarisma a{
    background-color: red;
    text-decoration: none;
    display:block;
    float: left;
}
.cntr{
    height: 100px;
    width: 300px;
    background-color: red;
    /* margin-left:auto; */
    /* margin-right: auto; */
    margin: 0 auto;
    margin:0 auto 0 auto;
}

Στο #menu .ke .kentrarisma a{ προσθέτω: height: 100%; Για να κατέβει στο μέσον ο μεγενθ. φακός προσθέτω και line-height με τιμή όσο το ύψος του γονέα σε px. Δηλαδή line-height: 35px;

Δοκιμάζω την επίδραση στο p π.χ. line-height: 5px; και βλέπω ότι οι γραμμές αλληλοκαλύπτονται.

Με την κονσόλα βλέπω το πλάτος του a και το ρυθμίζω στα 30px με στοίχιση κειμένου στο κέντρο οπότε γίνεται τελικά:

#menu .ke .kentrarisma a{
    background-color: red;
    text-decoration: none;
    display:block;
    float: left;
    height: 100%;
    line-height: 35px;
    width: 30px;
    text-align: center;
}

Ομοίως βλέπω και στη συνέχια ρυθμίζω το πλάτος του input π.χ. σε 150px.
Δηλαδή #menu .ke .kentrarisma input{ > width: 150px;
Οπότε μαζί a και input έχουν 150+30=180px.

Για να τα μετατοπίσω προς το κέντρο βάζω στο input margin-left: 100px; ή όσο υπολογίσουμε. Προσοχή δεν είναι responsive! Θα το δούμε μετά!

Συμπέρασμα: Εγκιβωτίζουμε τα πάντα μέσα σε divs. Έτσι κάνουμε ομαδοποίηση πολλά στοιχεία μαζί.

Τελικός κώδικας

<body>
    <h1>Αρχική</h1>
<div id="menu">
    <div class="ar box"></div>
    <div class="ke box">
        <div class="kentrarisma">
            <input type="text">
            <a href="#">🔍</a>
        </div>
    </div>
    <div class="de box"></div>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni necessitatibus fuga aspernatur corporis dolor deleniti soluta aliquam veniam animi totam quibusdam, reiciendis non ex, unde velit, hic ipsa natus excepturi.</p>
</body>

body{
    margin: 0px;
}
#menu{
    height: 100px;
    background-color: green;
}
#menu .box{
    height: 100px;
    float: left;
    width: 33.33%;
}
#menu .ar{
    background-color:brown;
}
#menu .de{
    background-color: blue;
}
#menu .ke{
    background-color:darkgoldenrod
}
#menu .ke .kentrarisma{
    background-color: greenyellow;
    height: 35px;
    margin: 0 auto;
    margin-top: 35px;
}
#menu .ke .kentrarisma input{
    height: 30px;
    display: block;
    /* margin: 35px auto 0 auto; */
    float: left;
    width: 150px;
    margin-left: 100px;
    /* margin-top: 35px; */
}
#menu .ke .kentrarisma a{
    background-color: red;
    text-decoration: none;
    display:block;
    float: left;
    height: 100%;
    line-height: 35px;
    width: 30px;
    text-align: center;
}

Position

https://www.w3schools.com/css/css_positioning.asp

Δημιουργούμε 4 p με bgrd-clr.

Προφανώς έχει position static εξορισμού και τοπθετείται με τη φυσιολογική ροή των στοιχείων της ιστοσελίδας.

Για τη 3η p δημιουργώ class .move

.move{
    background-color: dodgerblue;
    position:left

}

chrome > F12 για devtools > Computed > γράφω position + check “Show all”:
βλέπω ότι για την παράγραφο η εξ’ ορισμου τιμή είναι static.

Για static ΔΕΝ δουλεύουν τα top, bottom, left, right.

Προσθέτω στο .move{
top:30px και φυσικά δεν βλέπω καμία διαφορά.

Προσθέτω στο .move{
position: fixed και βλέπω ότι ανεβαίνει στα 30px από την κορυφή της σελίδας.

Προσθέτω στο body:

body{
    margin: 0px;
    height:2000px;
}

ώστε να εμφανιστεί μπάρα κύλισης για τη σελίδα. Όταν την χρησιμοποιώ τότε η παραγραφος .move μένει στη θέση της.

Στo devtools βλέπω (το ξέραμε, απλά επισημαίνεται…) ότι η p είναι block element. Οπότε διαδοχικά προσθέτω:

.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: fixed;
    right: 0;
    bottom: 30px;
    width: 300px;
    border: 2px solid red;
}

Άρα position: fixed σημαίνει ότι πηγαίνει όπου ορίσουμε με top, left, bottom, right και δεν πιάνει τον δικό του χώρο αλλά υπερκαλύπτει!

position:relative

Όταν έχουμε position:relative, σημαίνει ότι με τα top, bottom, left, right μεταφέρουμε το αντικείμενο σε σχέση με την static (κανονική) του θέση. Παραδείγματα με top, bottom (όπου υπερκαλύπτει τις άλλες p) και right, left.
Τα γειτονικά στοιχεία δεν αναδιατάσσονται για να καλύψουν τα κενά. Άρα τα άλλα στοιχεία δεν ξέρουν που βρίσκεται το relative.
Αν βάλω και margin τότε αυτό μπαίνει στην αρχική θέση (που είναι κενή) και όχι στη νέα θέση που βρίσκεται…
Συνήθως το χρησιμοποιούμε σε συνδυασμό με το absolute το οποίο τον έχει για γονέα.

.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: relative;
    top: 30px;
    left: 100px;
    width: 300px;
    border: 2px solid red;
}

position:absolute

Αν και η μετάφραση είναι “απόλυτη” θέση, στην ουσία είναι σχετική με τον πρώτο position:relative γονέα! Εάν δεν έχει γονέα με position:relative τότε είναι σε σχέση με το body.

Για να ξέρουμε ποιόν θεωρεί γονέα μπορούμε, στα γρήγορα να βάζουμε top:0px; left:0px;. Οπότε έαν γράψουμε το παρακάτω, θα πάει σε σχέση με το body, επάνω και αριστερά, στην αρχή του body.

.move{
    background-color: rgba(30, 143, 255, 0.856);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    border: 2px solid red;
}

Δημιουργώ div class=”king” και βάζω μέσα τη 2η, 3η και 4η παράγραφο. Η κλάση είναι:

}
.king{
    background-color: greenyellow;
    position: relative;
    padding: 10px;
}

και βλέπω ότι πλέον ο relative γονέας είναι πλέον το div!

Άρα το στοιχείο που έχει position:absolute ξεκινά να μετρά τα top, left, … από την αρχή (0,0) του πρώτου relative γονέα!
Αν δεν δώσω top, left, right, bottom τότε μένει στη θέση του αλλά δεν πιάνει χώρο και το επόμενο element είναι από κάτω του!

Δημιουργώ έναν σύνδεσμο a μέσα στην 3η παράγραφο. Αν το κάνω position: absolute χώρις κάτι άλλο τότε δεν αλλάζει θέση αλλά δεν πιάνει πλέον χώρο και το επόμενο κείμενο πηγαίνει από κάτω του, σαν να μην το βλέπει. Σημ: καλύτερα να βάουμε bgrd-clr και opacity:0.5 για να φανεί!

Αν βάλω top:0; τότε πηγαίνει προς τα επάνω στην πάνω ακμή του 1ου γονέα με position:relative ενώ αν προσθέσω και left:0; πηγαίνει πάνω-αριστερά του γονέα.

a{
    background-color: tomato;
    position: absolute;
    opacity: 0.5;
    top:0;
    left:0;
}

Συμβουλή: Έαν κάποιο element έχει position absolute ή fixed τότε βάζω top:0;left:0; για να ξέρω από που μετράνε (ή σε ποιό relative γονέα ανήκουν)!

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

CSS: 6ο Μάθημα

Επανάληψη

Νέα ύλη

Float

Τελικός κώδικας

Position

position:relative

position:absolute

In this section

Τελευταία άρθρα

Διδασκαλία Πληροφορικής

Προγραμματισμός

Linux

Python

Διδασκαλία Πληροφορικής

Εκπαιδευτικά

Φύση- Επιστήμη-DIY

Ενδιαφέρουσες σελίδες

Ιστοσελίδες συναδέλφων

Arduino