FILE AUDIO (uno accanto all'altro)

di
daveHack
il
5 risposte
D
daveHack
Pochi posts
Iscritto da
giu, 2018
Messaggi:
28

FILE AUDIO (uno accanto all'altro)

Salve a tutti, sto creando una pagina dove caricare dei file audio, pero non riesco, nè trovo qualcosa sul internet, che mi aiuti a mettere i file uno accanto all'altro, oppure a creare delle celle.

In poche parole, io vorrei mettere sotto una canzone, anche il titolo e magari una breve descrizione e poi accanto a questa, fare la stessa cosa per un altra canzone e cosi via, poi magari continuare sotto. Tipo fare una tabella di 2 righe e 4 colonne per intenderci. Si puo fare una cosa del genere?

Vi posto qui sotto il codice che ho scritto inizialmente, che però mi mette gli audio uno sotto all'altro.
<html>
    <body>
        <div>
            <p>ASCOLTAMI: Rino Gaetano - Ahi Maria</p>
            <audio controls>
                <source src="music/Rino Gaetano - Ahi Maria.mp3" type="audio/mp3">
            </audio>
        </div>
    </body>
    
    <body>
        <div>
            <p>ASCOLTAMI: Rino Gaetano - Aida</p>
            <audio controls>
                <source src="music/Rino Gaetano - Aida - Storia dell'Italia.mp3" type="audio/mp3">
            </audio>
        </div>
    </body>
    
    <body>
        <div>
            <p>ASCOLTAMI: Ligabue - Made in Italy</p>
            <audio controls>
                <source src="music/Ligabue - Made in Italy (Official Video).mp3" type="audio/mp3">
            </audio>
        </div>
    </body>
    
</html>

5 Risposte

  • D
    daveHack
    Pochi posts
    Iscritto da
    giu, 2018
    Messaggi:
    28

    Re: FILE AUDIO (uno accanto all'altro)

    Ho inserito la sezione <div></div> per creare le sezioni pero non riesco a mettere le sezioni uno accanto all'altro.
  • Hexah
    Hexah
    Utente Attivo
    Iscritto da
    giu, 2018
    Messaggi:
    57

    Re: FILE AUDIO (uno accanto all'altro)

    Dovrai utilizziare degli attributi di CSS.
    Ed in secondo luogo non dovresti mai avere due elementi <body>.
  • blivio
    blivio
    Pochi posts
    Iscritto da
    mar, 2018
    Messaggi:
    9

    Re: FILE AUDIO (uno accanto all'altro)

    Se intendi mettere accanto ognuno dei div contenenti audio e descrizione dovresti(fra le tante soluzioni) con i css renderli inline-block 
    div{
display:inline-block;7
}
    Di default un div è un elemento di blocco che va automaticamente a capo e se non specificato occupa l'intero spazio in larghezza.
  • D
    daveHack
    Pochi posts
    Iscritto da
    giu, 2018
    Messaggi:
    28

    Re: FILE AUDIO (uno accanto all'altro)

    Allora ho modificato il codice per come volevo, solo che vorrei chiedervi una cosa: Ogni qualvolta clicco sull'immagine, vorrei che partisse l'audio senza che andasse in un altra pagina. E' possibile fare una cosa del genere? Vi posto il codice qui sotto: 
    <html>
    <head>
        <link rel="stylesheet" href="newDispMusicCss.css">
    </head>
    
    <body>
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
    </body>
</html>

    FILE .css 
    div.principale{
    margin:10px;
    border:1px solid #ccc;
    float:left;
    width:120px;
    height:200px;
}

div.principale:hover{
    border:3px solid steelblue;
}

div.principale img{
    width:100%;
    height:100px;
}

div.desc{
    padding:15px;
    text-align:center;
}
    ovviamente ho messo la stessa immagine e la stessa canzone per far prima. Avevo provato a mettere anche il tag <audio> sotto ogni tag <img> in modo da avere l'audio control, ma questo sforava i limiti del tag <div>. Quindi un altra domanda è: posso modificare le impostazioni di dimensione del tag <audio> in modo da farlo entrare dentro il <div>?

    Spero di essere stato chiaro.

    Grazie in anticipo
  • Acid
    Acid
    Utente Attivo
    Iscritto da
    lug, 2018
    Messaggi:
    129

    Re: FILE AUDIO (uno accanto all'altro)

    daveHack ha scritto:

    Allora ho modificato il codice per come volevo, solo che vorrei chiedervi una cosa: Ogni qualvolta clicco sull'immagine, vorrei che partisse l'audio senza che andasse in un altra pagina. E' possibile fare una cosa del genere? Vi posto il codice qui sotto: 
    <html>
    <head>
        <link rel="stylesheet" href="newDispMusicCss.css">
    </head>
    
    <body>
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
        
        <div class="principale">
            <a target="_blank" href="MUSIC SECTION/music/Rino Gaetano - Ahi Maria.mp3">
                <img src="rino.jpeg" alt="rino" width="300" height="200">
            </a>
            <div class="desc">Rino Gaetano - Ahi Maria.mp3</div>
        </div>
    </body>
</html>

    FILE .css 
    div.principale{
    margin:10px;
    border:1px solid #ccc;
    float:left;
    width:120px;
    height:200px;
}

div.principale:hover{
    border:3px solid steelblue;
}

div.principale img{
    width:100%;
    height:100px;
}

div.desc{
    padding:15px;
    text-align:center;
}
    ovviamente ho messo la stessa immagine e la stessa canzone per far prima. Avevo provato a mettere anche il tag <audio> sotto ogni tag <img> in modo da avere l'audio control, ma questo sforava i limiti del tag <div>. Quindi un altra domanda è: posso modificare le impostazioni di dimensione del tag <audio> in modo da farlo entrare dentro il <div>?

    Spero di essere stato chiaro.

    Grazie in anticipo
    Ciao,
    Come hai inserito il tag audio? potresti postare il codice html?
    Seconda cosa: rispondendo al tuo dubbio, si, puoi modificare via css le dimensioni dell'elemento audio, facendolo entrare dentro il div
Devi accedere o registrarti per scrivere nel forum
5 risposte