Nuovi posts

Cerca

Header con logo centrale e link con img

Skizzo-1980

il 10 set 2020, 11:09

26 risposte

Skizzo-1980

Pochi posts

Iscritto da: set, 2020

Messaggi:: 21

Header con logo centrale e link con img

10 set 2020, 11:16

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

26 Risposte

ninja72
Utente Attivo
Iscritto da
mag, 2020
Messaggi:
79
Re: Header con logo centrale e link con img
10 set 2020, 12:56
Scusa hai del codice html da mostrare, non si capisce se vuoi utilizzare flex solo per il logo oppure anche per il menu.
S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 08:39
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

ninja72

Utente Attivo

Iscritto da: mag, 2020

Messaggi:: 79

Re: Header con logo centrale e link con img

11 set 2020, 09:32


<!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>

S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 09:40
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
S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 09:43
Ah forse mi serve sapere come inserire le icone img al lato dei link

ninja72

Utente Attivo

Iscritto da: mag, 2020

Messaggi:: 79

Re: Header con logo centrale e link con img

11 set 2020, 10:36

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>

S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 11:01
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"?
S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 11:06
Ho risolto per le img a fianco grazie mille
ninja72
Utente Attivo
Iscritto da
mag, 2020
Messaggi:
79
Re: Header con logo centrale e link con img
11 set 2020, 11:17
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;
        }
```
S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 11:27
Mi riferisco per allineare le immagine all asse y vicino al link come da allegato
Allegati:

29428_d72d3b79d7ee10538c46b91cfea6f56a.png
ninja72
Utente Attivo
Iscritto da
mag, 2020
Messaggi:
79
Re: Header con logo centrale e link con img
11 set 2020, 11:47
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.

Skizzo-1980

Pochi posts

Iscritto da: set, 2020

Messaggi:: 21

Re: Header con logo centrale e link con img

11 set 2020, 11:53

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>

ninja72

Utente Attivo

Iscritto da: mag, 2020

Messaggi:: 79

Re: Header con logo centrale e link con img

11 set 2020, 15:25

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>

S
Skizzo-1980
Pochi posts
Iscritto da
set, 2020
Messaggi:
21
Re: Header con logo centrale e link con img
11 set 2020, 15:30
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