Return to CSS 3

CSS: 8ο Μάθημα

Επανάληψη

CSS:7o Μάθημα

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;
}

Permanent link to this article: http://users.sch.gr/nikmavr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/css/css-8%ce%bf-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/