Visualizzazione dei risultati da 1 a 9 su 9

Discussione: Posizionamento elementi di una pagina HTML

  1. #1

    Posizionamento elementi di una pagina HTML

    Salve ragazzi! Sono un nuovo utente(non ho trovato una sezione di presentazioni,se mi indicate dove trovarla mi presento subito ). Vengo al nocciolo della questione.
    Mi sto avvicinando al mondo HTML per motivi universitari e sto avendo qualche problema con la posizione degli elementi in una pagina HTML. So che a partire da HTML5 sono stati introdotti i nuovi tag per header,footer,articoli e così via. La domanda è,come faccio a sistemare gli elementi in maniera tale che l'header rimanga fisso in alto o il footer fisso in basso? Sono a conoscenza del "comando" position del CSS(ho provato in particolare con il fixed,ma in questo modo rimane sempre fisso quando la pagina viene scrollata). Ciò che io voglio è che rimanga sì "fisso" a fine pagina,ma non come avviene nel caso di un position: fixed. L'altra domanda riguarda elementi di natura diversa da header/footer. Voglio ad esempio inserire una serie di immagini con del testo a fianco. Come faccio a spostare questi elementi in determinate posizioni da me imposte? Usare i tag <br> per staccare gli elementi mi sembra una soluzione pessima. Spero di non essermi arrampicato sugli specchi e di essermi fatto capire! Ringrazio in anticipo

  2. #2
    Ciò che io voglio è che rimanga sì "fisso" a fine pagina,ma non come avviene nel caso di un position: fixed.
    Che significa? Deve rimanere fisso o no? Come dovrebbe rimanere fisso?
    Voglio ad esempio inserire una serie di immagini con del testo a fianco. Come faccio a spostare questi elementi in determinate posizioni da me imposte?
    Se deve stare di fianco serve float! Per altre posizioni dipende da quali! Quando serve va bene anche <br> perché no? Devi essere un po' più preciso nelle domande!
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Mi spiego meglio. Se prendiamo una qualsiasi pagina web di una testata giornalistica, a fine pagina troviamo i dati relativi alla testata(contatti,indirizzi,e così via). Questo footer verrà visto soltanto quando l'utente arriverà fino alla fine della pagina. Io voglio fare in modo che avvenga ciò anche sulla mia pagina,senza ricorrere però al fixed che mi pone si il footer a fine pagina,ma lasciandolo sempre visibile. Per quanto riguarda la seconda domanda,ho inserito un elemento e poi provato con float e sono riuscito ad ottenere il testo accanto all'img(che si trovava a sinistra della pagina). Quando ho però inserito un nuovo elemento,il nuovo testo andava a posizionarsi nella riga immediatamente successiva al testo precedente,e ho dovuto abbassare il tutto usando 5 o 6 tag <br>. Quello che mi chiedo è dunque se esiste un modo che non sia troppo macchinoso per imporre la posizione esatta degli elementi senza che questi si disturbino a vicenda.
    Ultima modifica di Mr. Engineer; 31-01-2018 a 18:38

  4. #4
    Per quanto riguarda tutti gli elementi di una pagina che generalmente si mettono in un contenitore quasi sempre un div, essi seguono il normale flusso della pagina a meno che non gli si imponga di posizionarsi in un modo diverso. Pertanto se metti per primo il div dell'header poi quello del corpo, ed infine il footer, li vedrai sempre in questa posizione, esempio:
    codice:
    <body>
    <div id="header">
        Inserite qui il contenuto per  id "header"
    </div>
    <div id="contenuti_pagina">
        Inserite qui il contenuto per  id "contenuti_pagina"
    </div>
    <div id="footer">
        Inserite qui il contenuto per  id "footer"
    </div>
    </body>
    Per la seconda domanda posta il codice che hai usato e uno screeshoot di ciò che vuoi ottenere
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  5. #5
    perfetto. E' ciò che comunque ho fatto anche io. In questo modo i contenuti posti tra header e footer spingono quest'ultimo verso il fondo della pagina,giusto? E qualsiasi sia la risoluzione dello schermo,il footer si troverà sempre lì o potrà risalire? Ho mandato la mia pagina html ad un collega il quale possiede un portatile con schermo full HD. Il mio footer veniva a trovarsi a metà schermo mentre da me veniva a trovarsi esattamente alla fine della pagina.
    Questo è il codice relativo al CSS:
    codice:
    .about_class img{
        float: left;
        margin-right: 10px;
    }
    Questo relativo all'elemento dentro la pagina HTML:
    codice:
    <div id="about"><div class = "about_class">
    <p><img src="http://www.ufficio.eu/wp-content/uploads/2016/05/felicit%C3%A0-dipendenti.jpg" alt = "Foto dipendenti" height = "200" width = "200"><h1>About Us</h1>La Viaggi SRL nasce dall'idea di due imprenditori milanesi con un unico obiettivo comune: fornire ai propri utenti mete da sogno a prezzi
    contenuti. Oggi Viaggi SRL riesce a soddisfare le esigenze di più di 200.000 viaggiatori in tutta Europa.
    </p>
    </div>
    </div>
    Aggiungendo subito dopo questo elemento:
    codice:
    <div id="contatti"><div class = "contact_class">
    <p><h1>Contattaci: </h1>Viaggi SRL - Via Tizio 20,Milano
       Servizio Clienti: 095 303030 - 366 403020
    </p>
    </div>
    </div>
    Viene a crearsi questo:


    Come puoi vedere,la sezione "Contattaci" va a posizionarsi lì,ma io voglio che si trovi un pò più sotto rispetto al precedente elemento.Per far ciò,ho dovuto inserire parecchi tag <br> (credo sei).
    I dati sono puramente fittizi: volevo creare un sito per agenzie di viaggi.
    Ultima modifica di Mr. Engineer; 31-01-2018 a 19:12

  6. #6
    I tre elementi saranno sempre in quella posizione, se il footer si trova a metà pagina è perché i contenuti sono pochi e non coprono tutto lo spazio della pagina
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  7. #7
    Ho aggiornato il post precedente inserendo quanto mi avevi richiesto!

  8. #8
    Cosi è senza <br> vedi se ti va bene
    DEMO
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <style type="text/css">
    #contenitore {
        background-color: #C9C9C9;
        margin: 0px;
        padding: 20px;
        position: relative;
        float: left;
    }
    #testo {
        padding: 0px;
        float: left;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-left: 20px;
    }
    #immagine {
        float: left;
    }
    #p1 {
        margin: 0 0 20px 0;
    }
    #p2 {
        margin: 20px 0 0 0;
    }
    </style>
    </head>
    
    <body>
    <div id="contenitore">
        <div id="immagine">
          <img src="01.png" width="197" height="199" alt=""/>
        </div>
        <div id="testo">
          <p id="p1"><h1>contenuti.</h1>Oggi Viaggi SRL riesce a soddisfare le esigenze di più di 200.000 viaggiatori in tutta Europa.</p>
          <p id="p2"><h1>Contattaci:</h1>Viaggi SRL - Via Tizio 20,Milano Servizio Clienti: 095 303030 - 366 403020</p>
        </div>
    </div>
    </body>
    </html>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  9. #9
    Grazie Carlo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.