Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    10

    Problemi con il comando float

    Stavo cercando di capire come utilizzare il float.
    Il mio programma html :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Titolo</title>
    <link href="CSS.css" rel="stylesheet" style="text/css">
    </head>
    <body>
    <div id="intestazione">
    <h1>Titolo H1</h1>
    <h2>Titolo H2</h2>
    <p>aaaa a a a aaaa a a a a a a.</p>
    </div>
    <ul id="menu">
    <li><a href="new1.html">Chi Siamo</a></li>
    <li><a href="new2.html">I Nostri Prodotti</a></li>
    <li><a href="new3.html">Dove Trovarci</a></li>
    </ul>
    </body>
    </html>

    Volevo utilizzare il float per spostare il box della lista menu sulla sinistra della pagina,e di conseguenza l'altro box intestazione a destra.
    Utilizzando il comando float:right sul box intestazione mi sposta il box sul lato destro il piu' vicino a fine pagina e se provo con il comando width:valorepx mi modifica la larghezza del box.
    Il codice CSS senza il float:

    #intestazione{
    width: 660px;
    border:1px solid blue;
    padding:20px;
    margin:20px;
    }


    #menu{
    width: 120px;
    border:1px solid red;
    padding:20px;
    margin:25px;
    }

    Se qualcuno potesse darmi una mano,grazie in anticipo!

  2. #2
    Ciao
    l'elemento che vorresti rendere "flottante" a sx, lo devi rendere "float:left"

    Al contrario, per l'elemento che vuoi a destra: float:right.

    Quindi, se ho capito bene, avrai:

    #menu{
    width: 120px;
    border:1px solid red;
    padding:20px;
    margin:25px;
    float:left;
    }

    #intestazione{
    width: 660px;
    border:1px solid blue;
    padding:20px;
    margin:20px;
    float:right;
    }

    Il box contenitore dei due elementi "flottanti" lo devi rendere "overflow:hidden"

    Al di sotto dei 2 elementi, se devi metterne altri, prima di questi inserisci un elemento vuoto, che "pulisca" il tutto.

    per es.

    <div style="clear:both;"></div>

    Non ho replicato la tua pagina su un file in locale, spero non ci sia nessuna incongriuenza.

    Saluti




    =================
    www.extrowebsite.com

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    10
    Ho provato il codice che mi hai scritto, e funziona!
    Grazie mille dell'aiuto!

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    10
    Ho riprovato il codice in un secondo momento e mi sono accorto che il flaot funziona,ma come posso spostare il box intestazione (dopo aver fatto il flaot:right a sinistra? Perche' adesso il box si trova troppo a destra e non riesco a trovare un comando che mi permetta di posizionarlo piu' a sinistra vicino al box menu.
    Grazie dell'aiuto in anticipo!

  5. #5
    Ciao
    non conosco il tuo progetto, un link alla pagina sarebbe meglio.
    Comunque, prova a dare un margine a destra, all'elemento.

    #intestazione{
    width: 660px;
    border:1px solid blue;
    padding:20px;
    margin:20px 100px 20px 20px;
    float:right;
    }

    Ovviamente 100px è indicativo. Tu conosci le dimensioni del box contenitore.

    Saluti
    =================
    www.extrowebsite.com

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    10
    Ciao essendo il file hostato in locale,come posso condividerti il link al progetto?

  7. #7
    Ciao, potresti metterlo in una cartella remota del server... semplice.

    saluti
    =================
    www.extrowebsite.com

Tag per questa discussione

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 © 2025 vBulletin Solutions, Inc. All rights reserved.