Imparare html

**Fabioxx78** · 17-09-2021, 10:47

Originariamente inviata da ninja72

Ho già risposto ad un'altro ragazzo nella sezione "css" ad un problema simile, è impossibile ragionare su un layout con blocchi su position: absolute, cerca di lavorare a blocchi impostati su flexbox quando possibile, non voglio scoraggiarti ma penso che tu abbia bisogno di skillarti maggiormente su questi argomenti, che oltretutto sono vastissimi e sempre in costante aggiornamento.

ps. le immagini sono con percorso relativo e non assoluto.

no figurati sto cercando di imparare se sbaglio è giusto che me lo fai notare,quindi le immagini meglio caricarle su css?quindi se imposto flexbox devo lasciar perdere display inline block position ecc?ma poi con flexbox posso distribuire a mio piaciemnto più elementi sulla stessa riga?

**Fabioxx78** · 17-09-2021, 12:53

Originariamente inviata da ninja72

Ho già risposto ad un'altro ragazzo nella sezione "css" ad un problema simile, è impossibile ragionare su un layout con blocchi su position: absolute, cerca di lavorare a blocchi impostati su flexbox quando possibile, non voglio scoraggiarti ma penso che tu abbia bisogno di skillarti maggiormente su questi argomenti, che oltretutto sono vastissimi e sempre in costante aggiornamento.

ps. le immagini sono con percorso relativo e non assoluto.

le immagini non è meglio caricarle nella struttura html e averle in una cartella separata?

**Vincent.Zeno** · 17-09-2021, 20:10

.

**ninja72** · 17-09-2021, 21:12

Visto che stai imparando prendi per buoni i consigli che ti do:

1) Quando hai dei dubbi usa la documentazione online https://developer.mozilla.org/en-US
2) Usa un editor moderno "Visual studio code" o "Atom".
3) Investi un minimo di tempo e denaro nelle tue competenze future, video corsi (Udemy), libri, ecc.
4) Cerca di sviluppare piccoli progetti (se su github è meglio) per mettere in pratica quello che hai appreso e fissare meglio i concetti.
5) Altra risorsa che potrebbe esserti utile https://www.youtube.com/c/Freecodecamp (hanno anche un sito sempre in inglese).
6) Non avere fretta di imparare tutto e subito.

**Fabioxx78** · 18-09-2021, 08:57

Originariamente inviata da ninja72

Visto che stai imparando prendi per buoni i consigli che ti do:

1) Quando hai dei dubbi usa la documentazione online https://developer.mozilla.org/en-US
2) Usa un editor moderno "Visual studio code" o "Atom".
3) Investi un minimo di tempo e denaro nelle tue competenze future, video corsi (Udemy), libri, ecc.
4) Cerca di sviluppare piccoli progetti (se su github è meglio) per mettere in pratica quello che hai appreso e fissare meglio i concetti.
5) Altra risorsa che potrebbe esserti utile https://www.youtube.com/c/Freecodecamp (hanno anche un sito sempre in inglese).
6) Non avere fretta di imparare tutto e subito.

ciao grazie per le info, posso chiederti solo un cosa?potresti drimi come impostare un immagine di sfondo che prenda il width 100% un heigth 120px e sopra tramite flexbox voglio metterci tre immagini, o in questo modo non si può fare?ho guardato un pò di video su flexbox e adesso comincio a capire qualcosa.

**ninja72** · 18-09-2021, 10:31

codice:

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

    <style>
        :root {
            --social-c: aliceblue;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #header {
            background-image: url('https://data.1freewallpapers.com/download/nature-mountain-forest-landscape-fog-lake-ultrahd-4k-free.jpg');
            height: 120px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position-y: center;
            display: flex;
            align-items: end;
            justify-content: right;
        }

        .social img {
            width: 50px;
            height: 50px;
            padding: 5px;
            margin: 10px;
            border-radius: 50%;
            transition: all .5s ease;
        }

        .social img:hover {
            background-color: var(--social-c);
            transform: scale(120%);
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="social">
            <a href="#facebook">
                <img src="https://cdn.icon-icons.com/icons2/832/PNG/512/fb_icon-icons.com_66689.png" alt="facebook">
            </a>
        </div>
        <div class="social">
            <a href="#whatsapp">
                <img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202050chatlogosocialsocialmediawhatsapp-115638_115663.png"
                    alt="whatsapp">
            </a>
        </div>
        <div class="social">
            <a href="#instagram">
                <img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202090instagramlogosocialsocialmedia-115598_115703.png"
                    alt="instagram"></a>
        </div>
    </div>
</body>

</html>

**Fabioxx78** · 18-09-2021, 15:26

Originariamente inviata da ninja72

codice:

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

    <style>
        :root {
            --social-c: aliceblue;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #header {
            background-image: url('https://data.1freewallpapers.com/download/nature-mountain-forest-landscape-fog-lake-ultrahd-4k-free.jpg');
            height: 120px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position-y: center;
            display: flex;
            align-items: end;
            justify-content: right;
        }

        .social img {
            width: 50px;
            height: 50px;
            padding: 5px;
            margin: 10px;
            border-radius: 50%;
            transition: all .5s ease;
        }

        .social img:hover {
            background-color: var(--social-c);
            transform: scale(120%);
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="social">
            <a href="#facebook">
                <img src="https://cdn.icon-icons.com/icons2/832/PNG/512/fb_icon-icons.com_66689.png" alt="facebook">
            </a>
        </div>
        <div class="social">
            <a href="#whatsapp">
                <img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202050chatlogosocialsocialmediawhatsapp-115638_115663.png"
                    alt="whatsapp">
            </a>
        </div>
        <div class="social">
            <a href="#instagram">
                <img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202090instagramlogosocialsocialmedia-115598_115703.png"
                    alt="instagram"></a>
        </div>
    </div>
</body>

</html>

grazie gentilissimo

Discussione: Imparare html

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio