Header con logo centrale e link con img

di Skizzo-1980 il
26 risposte
Pochi posts
Iscritto da
set, 2020
Messaggi
21
Salve a tutti volevo impostare l'header cosi come da allegato usando i flexbox, mi sapreste dare una dritta in merito alle regole css
non sono alle prime armi ma da tempo avevo lasciato stare il codice facendo solo grafica e adesso volevo rispolverare un pò il tutto
per adesso vi ringrazio già solo leggendo questo topic,

Grazie mille
Allegati:
29428_bed8d33d25515a60c5d51c12d96d38dd.png
29428_bed8d33d25515a60c5d51c12d96d38dd.png

26 Risposte

  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Scusa hai del codice html da mostrare, non si capisce se vuoi utilizzare flex solo per il logo oppure anche per il menu.
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Salve grazie per la risposta, no non ho ancora il codice , volevo in linea di massima sapere come impostare il tutto, ciòè fare due mini header una per il logo e una per i link o farne una che contenga tutto

    Grazie
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            border: 1px solid gray;
            padding: 10px 0;
            margin: 5px
        }

        #logo {
            text-align: center;
            background-color: white;
        }

        #logo-img {
            width: 100px;
            height: 100px;
            padding-bottom: 30px;
        }

        #menu {
            display: flex;
            flex-wrap: wrap;
            row-gap: 10px;
            justify-content: center;
        }

        #menu a,
        a:link,
        a:visited {
            font-family: Arial, Helvetica, sans-serif;
            color: #555;
            text-decoration: none;
        }

        #menu a:hover {
            border-bottom: 3px solid aqua;
        }

        #menu>li {
            padding-right: 20px;
        }
    </style>
</head>

<body>
    <header>
        <div class="container">
            <div id="logo">
                <img id="logo-img" src="./img/logo.jpg" alt="logo">
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="#">best seller</a></li>
                    <li><a href="#">tour</a></li>
                    <li><a href="#">fleet</a></li>
                    <li><a href="#">transfers</a></li>
                    <li><a href="#">experience</a></li>
                    <li><a href="#">special offert</a></li>
                    <li><a href="#">covid-19</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

</html>
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Woow Grazie Ninja , ti farò sapere appena lo creo , al momento veramente ti ringrazio, una domanda se ho dubbi posso sempre contattarti?

    Grazie per adesso
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Ah forse mi serve sapere come inserire le icone img al lato dei link
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Non so che tipo di icone vuoi inserire, ma a titolo d'esempio potresti fare cosi:

    nel tag style aggiungi 
    
#menu i {
            border: 1px solid gray;
            border-radius: 50%;
            padding: 2px;
            margin-right: 2px;
        }
    nel tag head :
    
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css' />
    nel body fai queste modifiche :
    
<ul id="menu">
                    <li><i class="far fa-star"></i><a href="#">best seller</a></li>
                    <li><i class="fas fa-umbrella-beach"></i><a href="#">tour</a></li>
                    <li><i class="fas fa-home"></i><a href="#">fleet</a></li>
                    <li><i class="fas fa-exchange-alt"></i><a href="#">transfers</a></li>
                    <li><a href="#">experience</a></li>
                    <li><a href="#">special offert</a></li>
                    <li><a href="#">covid-19</a></li>
                </ul>
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Perfetto grazie erano immagini come da header allegata ma va bene anche la "Fa" per allinearle invece al centro dell'altezza verticale dei link (a sinistra)devo mettere display block nelle img o "fa"?
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Ho risolto per le img a fianco grazie mille
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Scusami non so se ho capito bene, forse ti riferisci al fatto che se aumenti il padding del riferimento "#manu i" i link senza icone non sono allineate al centro, effettivamente è stata una mia svista, aggiungi "align-items: center;" al riferimento stile #menu 
    
#menu {
            display: flex;
            flex-wrap: wrap;
            row-gap: 10px;
            justify-content: center;
            align-items: center;
        }
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Mi riferisco per allineare le immagine all asse y vicino al link come da allegato
    Allegati:
    29428_d72d3b79d7ee10538c46b91cfea6f56a.png
    29428_d72d3b79d7ee10538c46b91cfea6f56a.png
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Bisogna vedere il codice html che stai implementando ora, per capire come stai procedendo. Se non hai risolto posta il codice html relativo al menu e vediamo se risolviamo.
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Ecco qui il codice sotto
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css' />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .header {
            border-bottom: 1px solid gray;
            padding: 10px 10px;
            margin: 5px
        }

        #logo {
            text-align: center;
            background-color: white;
        }

        #logo-img {
            width: 250px;
            height: auto;
            padding-bottom: 30px;
        }

        #menu {
            display: flex;
            flex-wrap: wrap;
            row-gap: 10px;
            justify-content: center;
           
        }

        #menu a,
        a:link,
        a:visited {
            font-family: 'Kumbh Sans', sans-serif;
            color: #555;
            text-decoration: none;
            border-right: 1px solid #dce4e6;
            padding: 15px;
                    }

        #menu a:hover {
            border-bottom: 3px solid aqua;
        }

        #menu>li {
            padding-right: 20px;
        }
        .fa-star {
            padding-right: 5px;
            color: darkorange;
        }
        #icone_destra {
            padding-right: 5px;
            width: 25px;
            height: auto;
            display: inline-block;
            display: flex;
                }
    </style>
</head>

<body>
<header>
        <div class="header">
            <div id="logo">
                <img id="logo-img" src="logo.png" alt="logo">
            </div>
            <nav>
<ul id="menu">
    <li><i class="far fa-star"></i><a href="#">Best seller</a></li>
    <li><i class="fas fa-umbrella-beach"></i><a href="#">Tour</a></li>
    <li><i class="fas fa-home"></i><a href="#">Fleet</a></li>
    <li><i class="fas fa-exchange-alt"></i><a href="#">Transfers</a></li>
    <li><img id="icone_destra" src="ic5.png"><a href="#">Special Offers</a></li>
    <li><img id="icone_destra" src="ic6.png"><a href="#">Special Offers</a></li>
    <li><img id="icone_destra" src="ic7.png"><a href="#">Covid-19</a></li>
</ul>
            </nav>
        </div>
</header>
</body>

</html>
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Vedi se cosi va meglio :
    
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css' />
   <style>
      @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap');

      * {
         margin: 0;
         padding: 0;
         list-style: none;
      }

      .header {
         border-bottom: 1px solid gray;
         padding: 10px 0px;
         margin: 5px
      }

      #logo {
         text-align: center;
         background-color: white;
         padding-bottom: 30px;
      }

      #logo-img {
         width: 250px;
         height: auto;
      }

      #menu {
         display: flex;
         flex-wrap: wrap;
         row-gap: 10px;
         justify-content: center;
         align-items: center;
         border-bottom: 3px solid white;
      }

      #menu a,
      a:link,
      a:visited {
         font-family: 'Kumbh Sans', sans-serif;
         color: #555;
         text-decoration: none;
      }

      #menu i {
         padding-right: 5px;
      }

      .menu-button {
         border-bottom: 3px solid white;
         border-right: 1px solid #dce4e6;
         padding: 15px;
      }

      .menu-button:hover {
         transition: all .3s ease-in-out;
         border-bottom: 3px solid aqua;
      }

      .menu-button img {
         float: left;
      }

      .fa-star {
         color: darkorange;
      }

      .icone_destra {
         padding-right: 5px;
         width: 25px;
         height: auto;
      }
   </style>
</head>

<body>
   <header>
      <div class="header">
         <div id="logo">
            <img id="logo-img" src="logo.png" alt="logo">
         </div>
         <nav>
            <ul id="menu">
               <a href="#">
                  <div class="menu-button">
                     <li><i class="far fa-star"></i>Best seller</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><i class="fas fa-umbrella-beach"></i>Tour</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><i class="fas fa-home"></i>Fleet</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><i class="fas fa-exchange-alt"></i>Transfers</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><img class="icone_destra" src="ic5.png">Special Offers</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><img class="icone_destra" src="ic6.png">Special Offers</li>
                  </div>
               </a>
               <a href="#">
                  <div class="menu-button">
                     <li><img class="icone_destra" src="ic7.png">Covid-19</li>
                  </div>
               </a>
            </ul>
         </nav>
      </div>
   </header>
</body>

</html>
  • Pochi posts
    Iscritto da
    set, 2020
    Messaggi
    21
    Grazie Ninja controllo un attimo e ti avviso, in ogni modo l'idea era di impostarla come l'header di
Devi accedere o registrarti per scrivere nel forum
26 risposte