Επανάληψη
https://www.w3schools.com/css/css_align.asp
Στοίχιση ενός κουτιού στο κέντρο
<div>
Καλησπέρα καλοκαίρι!
</div>
div{
border:2px solid red;
background-color: yellow;
padding:8px;
width: 50%;
margin: auto;
}
B’ τρόπος: μετατρέπουμε το κουτί σε inline-block και το στοιχίζουμε με text-align:center ΑΛΛΑ βάζουμε το css στον γονέα που το περιέχει (π.χ. div class=”container”)
.container{
text-align: center;
}
#box1{
background-color: green;
width: 200px;
height: 100px;
border: 2px solid red;
display: inline-block;
}
Για να στοιχίσουμε και το κείμενο στο κέντρο θα πρέπει να προσθέσουμε στη css:
text-align: center;
Στοίχηση εικόνας:
Προσθέτουμε μια εικόνα κάτω από το div.
α’ τρόπος: η εικόνα είναι inline element, άρα αρκεί να βάλω text-align: center; στον γονέα.
β’ τρόπος: τη μετατρέπω σε display block
Για να κεντράρουμε την εικόνα τότε προσθέτουμε παρομοίως το:
img{
display: block;
width: 30%;
margin: 20px auto;
}
Στοίχηση δεξιά-αριστερά
ttps://www.w3schools.com/css/css_align.asp
Στοίχηση στη μέση κατακόρυφα με padding και line-height
Θυμήσουν ότι το padding για κατακ. στοίχιση στη μέση δεν δουλεύει όταν εχουμε ορίσει height.
ttps://www.w3schools.com/css/css_align.asp
Επίλυση 2ης άσκησης
Η 2η άσκηση μπορεί να λυθεί με πολλούς διαφορετικούς τρόπους:
α) με τα 3 κουτιά του μενού να είναι inline-block elements
β) με τα 3 κουτιά του μενού να είναι απλά divs και χρησιμοποιώντας float:left
γ) και με αρκετούς άλλους τρόπους flexbox, grid ή και με inline και floats αλλά με άλλη μεθοδολογία.
Θα χρησιμοποιήσουμε τον β’ τρόπο:
<div id="menu">
<div class="box aristera"></div>
<div class="box kentro"></div>
<div class="box dexia"></div>
</div>
body{
margin:0px;
height:3000px;
}
#menu{
background-color: red;
height: 100px;
}
.box{
width: 33.33%;
height: 100px;
float:left;
}
#menu .aristera{
background-color: yellowgreen;
}
#menu .kentro{
background-color: dodgerblue;
}#menu .dexia{
background-color: pink;
}
Μέχρι εδώ η σχεδίαση είναι responsive… Δοκιμάστε να αυξομοιώσετε το παράθυρο του browser.
Θα συνεχίσουμε τοποθετώντας αριστερά το παρακάτω png λογότυπο (πηγή: http://clipart-library.com/clipart/8c65qGeEi.htm)
Για στοίχιση στο κέντρο οριζόντια (η img είναι inline-block και άρα συμπεριφέρεται σαν κείμενο) χρησιμοποιώ στο div γονέα text-align: center;
Για στοίχιση στο κέντρα κατακόρυφα βάζω top-margin:10px;
Κάνω το λογότυπο σύνδεσμο στην αρχική σελίδα (ο πιο απλό τρόπος είναι href=”/”) και πλέον η html και η css γίνονται:
<div class="box aristera">
<a href="/">
<img src="freelogo2.png" alt="">
</a>
</div>
#menu .aristera{
background-color: yellowgreen;
text-align: center;
vertical-align: top;
}
#menu .aristera img{
height: 80%;
margin-top:10px;
}
Τελειώσαμε με την αριστερή πλευρά
Στο κέντρο βάζουμε ένα <input type=”text”> και για τη στοίχιση βάζω στον div γονέα αφού είναι inline element!
Σημείωση: Μαζεύω και βγάζω τα text-align:center από αριστερά και κέντρο και τα βάζω μέσα στην κλάση .box
Προσθέτω και emoji μεγενθυτικό φακό (στα win10: “κουμπί Windows”+”.”), το οποίο κάνω link και έχουμε:
<div class="box kentro">
<input type="text">
<a href="#"> 🔍 </a>
</div>
#menu .kentro{
background-color: dodgerblue;
line-height: 100px;
}
#menu .kentro input{
height: 30px;
}
#menu .kentro a{
text-decoration: none;
vertical-align: middle;
font-size: 30px;
}
Σημείωση: όταν μικρύνω την οθόνη τότε μου πετάει από κάτω τον μεγ.φακό. Για να το διορθώσω δίνω:
.box{ min-width: 200px; Δοκιμάζω και πάλι έχει πρόβλημα με τα κουτιά οπότε δίνω και στον γονέα τους:
#menu{ min-width: 600px;
Οπότε τελειώσαμε και με το κεντρικό τμήμα!
Για το δεξί τμήμα/κουτί.
Μορφοποιούμε τα 2 links για να δούμε τι χώρο θα πιάσουν.
<div class="box dexia">
<a href="#">Είσοδος</a>
<a href="#">Καλάθι</a>
</div>
#menu .dexia{
background-color: pink;
line-height: 100px;
}
#menu .dexia a{
background-color: tomato;
padding: 8px 12px;
margin: 8px;
border:1px solid #777;
text-decoration: none;
}
#menu .dexia a:first-child{
background-color: black;
color:white;
border: 1px solid black;
}
#menu .dexia a:last-child{
background-color: transparent;
color: red;
border: 1px solid red;
}
Επιπρόσθετα:
- Αν αυξήσουμε το μέγεθος στα κουμπία δεξιά τότε όταν μειώσουμε το μέγεθος του παραθύρου βλέπουμε ότι το 2ο κουμπί βγαίνει κάτω. Σε αυτή την περίπτωση αυξάνουμε στα κουτιά σε min-width: 240px; και στο #menu σε min-width: 720px;
- αλλάζουμε το bgrd-clr του input σε dodgerblue, το περίγραμμα σε μαύρο και το κείμενο σε άσπρο. Επίσης width:180px και outline: none; για να μην έχει περίγραμμα όταν γίνεται focus (δλδ όταν κάνω κλικ).
- Προσθέτουμε border-bottom στο #menu.
Τοποθέτηση εικόνας:
Το κεντράρισμα μπορεί να γίνει με 2 τρόπους:
Α’ τρόπος: βάζοντας την εικόνα (in-line element και άρα αντιμετωπίζεται σαν κείμενο) μέσα στον γονέα div και ορίζοντας text-align:center
<div class="images">
<img src="nikezoom.jpg" alt="">
</div>
.images{
text-align: center;
}
.images img{
max-width: 100%;
height: auto;
background-color: red;
}
B’ τρόπος: μετατρέποντας την εικόνα σε block element και χρησιμοποιώντας margin:0 auto
.images img{
max-width: 60%;
height: auto;
background-color: red;
display: block;
margin:auto;
}
Τελική υλοποίηση
Αφού σβήσουμε τα χρώματα.
<div id="menu">
<div class="box aristera">
<a href="/">
<img src="freelogo2.png" alt="">
</a>
</div>
<div class="box kentro">
<input type="text">
<a href="#"> 🔍 </a>
</div>
<div class="box dexia">
<a href="#">Είσοδος</a>
<a href="#">Καλάθι</a>
</div>
</div>
<div class="images">
<img src="nike_5.png" alt="">
</div>
</body>
body{
margin:0;
}
#menu{
/* background-color: red; */
height: 100px;
min-width: 600px;
border-bottom: 2px solid ;
}
.box{
width: 33.33%;
height: 100px;
float:left;
text-align: center;
min-width: 200px;
}
#menu .aristera{
/* background-color: yellowgreen; */
vertical-align: top;
}
#menu .aristera img{
height: 80%;
margin-top:10px;
}
#menu .kentro{
/* background-color: dodgerblue; */
line-height: 100px;
/* το vertical-align δεν δουλεύει*/
}
#menu .kentro input{
height: 30px;
width: 180px;
background-color: dodgerblue;
border: 1px solid black;
color: white;
outline: none;
}
#menu .kentro a{
text-decoration: none;
vertical-align: middle;
font-size: 30px;
}
#menu .dexia{
/* background-color: pink; */
line-height: 100px;
}
#menu .dexia a{
background-color: tomato;
padding: 8px 12px;
margin: 8px;
border:1px solid #777;
text-decoration: none;
}
#menu .dexia a:first-child{
background-color: black;
color:white;
border: 1px solid black;
}
#menu .dexia a:last-child{
background-color: transparent;
color: red;
border: 1px solid red;
}
.images{
text-align: center;
}
.images img{
max-width: 60%;
height: auto;
background-color: red;
}
