Επιστροφή σε CSS 3

CSS: 10ο Μάθημα

Συνέχεια προηγούμενης άσκησης

  • βγάζουμε τα χρώματα
  • οπτικά είναι καλύτερα χωρίς το border radious
  • μπορώ το border να το βάλω μέσα στο .dropdown:hover και όχι στο .dropdown:hover ul{
  • Προσοχή όταν δηλώνουμε ότι height = 0 το border δεν εξαφανίζεται!

Στην html αντιγράφω πολλές φορές τα li ώστε το μενού να βγαίνει εκτός οθόνης.

Η λύση στο .dropdown:hover ul{ αλλάζω το max-height σε π.χ. 200px; και προσθέτω overflow στον κατακόρυφο άξονα:

.dropdown:hover ul{
    max-height: 200px;
    border:1px solid black;
    overflow-y: auto;
}

Προσθέτω χρώματα στο μενού:

.dropdown ul li a{
    text-decoration: none;
    display: block;
    padding: 4px;
    color:black;
    background-color: #ddd;
}
.dropdown ul li a:hover{
    background-color: #333;
    color:#fff
}

Για επανάληψη στα ψευδοστοιχεία ::after και before:: μπορώ να προσθέσω βέλη στο μενού:

.dropdown span::after{
    content: ' ⬇️';
}
.dropdown:hover span::after{
    content: ' ⬆️';
}

Οπότε υλοποιήσαμε ένα υπερ-ελαφρύ μενού μόνο με CSS χωρίς χρήση javascript (η οποία είναι αρκετά ποιό “βαριά” για τους browsers από ότι η CSS)

Τελικός κώδιξ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Home - Main menu</h1>
    <div class="dropdown">
        <span>Πέρνα από πάνω...!</span>
        <ul>
            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>
            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>            <li><a href="#">Διοίκηση</a></li>
            <li><a href="#">Λογιστήριο</a>
            <li><a href="#">Αποθήκη</a></li>
            <li><a href="#">Πωλήσεις</a></li>
            <li><a href="#">Προώθηση</a></li>            
        </ul>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique at ducimus, molestiae officia sunt cupiditate consectetur tenetur saepe voluptates fuga? Laboriosam recusandae eveniet reprehenderit? Optio aspernatur nisi quos inventore ullam!</p>       
</body>
</html>

body{
    margin: 0;
    background-color: #eee;
}
.dropdown{
    /* background-color: burlywood; */
    width: 200px;
    padding: 4px;
    /* border-radius: 4px; */
    margin: 0 0 0 10px;
    position:relative;
    border:1px solid black;
}
.dropdown:hover{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; 
}
.dropdown span{
    display: block;
}
.dropdown span::after{
    content: ' ⬇️';
}
.dropdown:hover span::after{
    content: ' ⬆️';
}
.dropdown ul{
    list-style: none;
    padding: 0;
    margin:0;
    max-height: 0;
    overflow: hidden;
    /* transition: all 0.5s ease; */
    position:absolute;
    background-color: #fff;
    width:100%;
    top: 26px;
    left:-1px;
}
.dropdown:hover ul{
    max-height: 200px;
    border:1px solid black;
    overflow-y: auto;
}
.dropdown ul li a{
    text-decoration: none;
    display: block;
    padding: 4px;
    color:black;
    background-color: #ddd;
}
.dropdown ul li a:hover{
    background-color: #333;
    color:#fff
}

Επίδειξη πως δουλεύει το μενού με κινητά με χρήση του Chrome devtools.

Τι γίνεται με μεγάλα μενού; πχ με 100-200 ή περισσότερα στοιχεία;

Απλό αριστερό οριζόντιο μενού με ξεχωριστό τμήμα δεξιά

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="horstyle.css">
</head>
<body>
    <ul>
        <li><a href="#">submenu_1</a></li>
        <li><a href="#">submenu_2</a></li>
        <li><a href="#">submenu_3</a></li>
        <li><a href="#">submenu_4</a></li>
        <li class="mright"><a href="#">HELP</a></li>
    </ul>
    
</body>
</html>

body{
    margin:0;
    background-color: bisque;
}
ul{
    list-style-type: none;
    margin:0;
    padding:0;
    background-color: #555;
    overflow: hidden;
}
li{
    /* float:left; */
    display: inline-block;
}
li a{
    display: inline-block;
    color:#fff;
    padding:14px;
    text-decoration: none;
}
li a:hover{
    background-color: #111;
}
li a:active{
    background-color: tomato;
}
.mright{
    background-color: dodgerblue;
    float:right;
}

color-picker στα Windows: Windows Key+Shift+C

3η άσκηση

Θα υλοποιήσουμε την παρακάτω ιστοσελίδα:

Με το παρακάτω μπορώ εύκολα να φτιάξω τα 2 κύρια κουτιά containers. 

<body>
    <div class="header"></div>
    <div class="center"></div>
 </body>

body{
    margin:0;
}
div.header {
    height:120px;
    background-color: red;
    color: white;
}
div.center{
    background-color: cadetblue;
    width:300px;
    height:300px;
    margin:0 auto;
    margin-top:-60px;
}

Β’ τρόπος με position

div.center{
    background-color: cadetblue;
    width:40%;
    height:300px;
    position:absolute;
    top:60px;
    left:30%;
}

Προσθέτουμε στον header:

 &lt;div class="header">
        &lt;h1>Βιογραφικό&lt;/h1>
        &lt;a href="#">my Facebook&lt;/a>
    &lt;/div>

.header h1{
    margin:0;
    float:left;
}
.header a{
    text-decoration: none;
    background-color: dodgerblue;
    color: white;
    padding:6px;
    display: block;
    float:right;
}

Πρέπει να στοιχίσουμε το a και h1 στο κέντρο και να τους δώσουμε το ίδιο συνολικό ύψος των 40px. Οπότε προσθέτω:

.header a{ height: 28px; line-height: 28px;

και

.header h1{ height: 40px;

Για να τα στοιχίσω κατακόρυφα στο κέντρο αρκεί να βάλω margin-top=[120px-40px]/2=40px και στα δύο. Τελικά έχω

.header h1{
    margin:0;
    float:left;
    height: 40px;
    margin-top: 40px;
}
.header a{
    text-decoration: none;
    background-color: dodgerblue;
    color: white;
    padding:6px;
    display: block;
    float:right;
    height: 28px;
    line-height: 28px;
    margin-top: 40px;
}

Μικραίνουμε το μεσαίο κουτί σε width:30% και άρα left: 35%

Μικραίνουμε το ύψος γραμμάτων h1 σε font-size:20px και για στοιχιστεί στο κέντρο προσθέτουμε line-height_40px;

Διορθώνουμε το Padding στο a σε padding:4px 8px;

και πρέπει να διορθώσουμε το height και line-height σε 32 ώστ eσυνολικά το ύψος να παραμείνει 40px.

Προσθέτω border-radious:4px

To κουμπί φαίνεται μεγαλύτερο οπότε αλλάζω:

    height: 20px;
    line-height: 20px;    
    margin-top: 46px;

Το margin-top είναι τόσο γατί = 120-20-2*4=92 άρα 92/2

Μικραίνουμε το font-size:12px; οπότε τελικά όλα γίνονται:

.header a{
    text-decoration: none;
    background-color: dodgerblue;
    color: white;
    padding:4px 8px;
    display: block;
    float:right;
    height: 18px;
    line-height: 18px;
    margin-top: 48px;
    border-radius: 4px;
    font-size:12px;
}

Για να φέρω προς τα μέσα:α) βάζω margin δεξιά αριστερά σε a και h1

β) βάζω padding στον γονέα 20px

Εδώ τελιεώσαμε με το πάνω κουτί. Ο κώδικας είναι ως εξής:

 <div class="header">
        <h1>Βιογραφικό</h1>
        <a href="#">my Facebook</a>
    </div>

body{
    margin:0;
}
div.header {
    height:120px;
    background-color: red;
    color: white;
    padding: 0 20px;
}
.header h1{
    margin:0;
    float:left;
    height: 40px;
    line-height: 40px;
    margin-top: 40px;
}
.header a{
    text-decoration: none;
    background-color: dodgerblue;
    color: white;
    padding:4px 8px;
    display: block;
    float:right;
    height: 18px;
    line-height: 18px;
    margin-top: 48px;
    border-radius: 4px;
    font-size:12px;
}
div.center{
    background-color: cadetblue;
    width:40%;
    height:300px;
    position:absolute;
    top:60px;
    left:30%;
}

Κεντρικό Τμήμα

Θα ξεκινήσουμε με την εισαγωγη της παρακάτω εικόνας ( Photo by Julian Wan on Unsplash).

   <div class="center">
        <img src="julian-wan.jpg" alt="">
    </div>

Η εικόνα εμφανίζεται με το πραγματικό της μεγάλο μέγεθος. Οπότε βάζω:

div.center img{
    width:100%
    border-radius: 4px;
}

Αλλάζοντας όμως το πλάτος του παραθύρου μεταβάλλονται και οι διαστάσεις τις εικόνας. Μπορώ να λύσω το πρόβλημα βάζοντας:

div.center img{
    width:100%
}

Παρατηρώ ότι μικραίνει ανάλογα αλλά αν μικρύνει πολύ τότε καλύπτει το “Βιογραφικό” και το “My Facebook”. Μπορώ να κατεβάσω λίγο παρακάτω το center:

div.center img{ top:80px;

B’ τρόπος 1.03

Συνεχίζουμε με το κείμενο στο center.

Αρχικά βγάζουμε το height:300px;

Τροποποιούμε το center ως εξής:

    <div class="center">
        <img src="julian-wan.jpg" alt="">
        <h3>Όνομα Επίθετο</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque velit temporibus iusto voluptatem animi facere itaque dolore beatae nesciunt consequuntur similique explicabo, esse pariatur voluptate et earum laboriosam vitae odit?</p>
        <span>Γνωρίζω HTML</span>
        <span>Γνωρίζω CSS</span>
    </div>

Αντί για span θα μπορούσα να χρησιμοποιήσω div ή p ή a με ίδιο αποτέλεσμα.

div.center h1{
    text-align: center;
}
div.center span{
    background-color: #e5e5e5;
    display: block;
    text-align: center;
    margin-bottom:10px;
    padding: 10px 0;
    border-radius: 4px;
}

οπότε ο τελικός css κώδικας, διαμορφώνεται ως εξής:

body{
    margin:0;
}
div.header {
    height:120px;
    background-color: red;
    color: white;
    padding: 0 20px;
    /* min-width: 640px;    */
}
.header h1{
    margin:0;
    float:left;
    height: 40px;
    line-height: 40px;
    margin-top: 40px;
}
.header a{
    text-decoration: none;
    background-color: dodgerblue;
    color: white;
    padding:4px 8px;
    display: block;
    float:right;
    height: 18px;
    line-height: 18px;
    margin-top: 48px;
    border-radius: 4px;
    font-size:12px;
}
div.center{
    /* background-color: cadetblue; */
    width:40%;
    position:absolute;
    top:60px;
    left:30%;
}
div.center img{
    width:100%;
    border-radius: 4px;
} 
div.center h1{
    text-align: center;
}
div.center span{
    background-color: #e5e5e5;
    display: block;
    text-align: center;
    margin-bottom:10px;
    padding: 10px 0;
    border-radius: 4px;
}

10μ_τ.1.20

Πράξεις στην CSS!

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

Μόνιμος σύνδεσμος σε αυτό το άρθρο: https://nikmavr.sites.sch.gr/%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-9%ce%bf-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1-2/