Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16

Discussione: Css e proprietà float

  1. #1

    Css e proprietà float

    All'interno del mio codice ho un blocco <div> al cui interno, spostato sulla sinista, c'è un altro blocco con proprietà float:left. Inserisco il testo (che mi viene posizionato a destra del div), ma il numero di caratteri del testo non supera la lunghezza vertivale del box con proprietà float. il blocco <div>, conterrà quindi il testo senza tenere conto della lunghezza verticale del blocco float, che si sovrappone in maniera alquanto strana sopra di esso. COme risolvo il problema?

    Questo il risultato:
    Pagina di prova

    Importante: lo stesso difetto mi si presenta anche se al posto del blooco Float metto un'immagine con allineamento left


    Questo il dodice del CSS:
    html,body{
    text-align: center; /*centra in IE 5.x */
    margin: 0px auto;
    padding: 0px;
    height:100%;
    }


    div#container{
    width: 960px;
    margin: 0px auto; /*centra negli altri browsers*/
    text-align: left; /*ripristina l' allineamento*/
    height:100%;
    }

    /*blocco centrale*/
    #desc{
    float:left;
    width:810px;
    margin:0px;
    height:100%;
    }

    /*blocco destro*/
    #block{
    background: url(image/blocklog.jpg) repeat-y;
    width:150px;
    float:right;
    padding: 0px;
    height:100%;
    }

    /*blocco interno al blocco destro*/
    .box{
    background:#CCCCCC url(image/block.jpg) repeat-y;
    margin:4px;
    border:1px solid black;
    font: 10px/10px Arial,sans-serif;
    }


    .boxint{
    margin:2px 0px 2px 4px;
    font: 10px/10px Arial,sans-serif;
    }

    /*titolo*/
    .tit{
    background-color:#CC9999;
    font: bold 11px Arial,sans-serif;
    color:white;
    }

    /*footer*/
    #footer{
    clear:left;
    text-align:center;
    background-color:#666666;
    font: bold 11px Arial,sans-serif;
    color:white;
    }


    /*ulteriore blocco interno*/
    #descint{
    margin:10px;
    background-color:#CCCCCC;
    font: 12px/12px Arial,sans-serif;
    border:2px solid white;
    }



    /*blocco interno posizionato a destra con un float*/
    #info{
    background: url(image/blocklog.jpg) repeat-y;
    float:left;
    margin:3px;
    border:2px solid white;
    width:170px;
    }
    qvantvm potem tantvm avde

  2. #2
    Utente di HTML.it L'avatar di span
    Registrato dal
    Jan 2004
    Messaggi
    1,644
    con firefox è tutto sballato, se ti può servire: http://atomsurfer.altervista.org/xht...s_floating.php

    spiega come fare il telaio di un layout con la proprietà float ed ottenere un risultato un po' più compatibile

  3. #3
    in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore? :master:
    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

  4. #4
    Utente di HTML.it L'avatar di span
    Registrato dal
    Jan 2004
    Messaggi
    1,644
    Originariamente inviato da herrel
    in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore? :master:
    prova ad aprire la pagina con un browser che non sia IE, e vedi che i problemi sono anche altri

  5. #5
    non legge il css
    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

  6. #6
    Utente di HTML.it L'avatar di span
    Registrato dal
    Jan 2004
    Messaggi
    1,644
    ah... per quello basta scriver @import url(stile.css) tutto attaccato :tongue:

  7. #7
    Originariamente inviato da span
    ah... per quello basta scriver @import url(stile.css) tutto attaccato :tongue:
    infatti ho scaricato tutto e provo in locale...
    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

  8. #8
    Originariamente inviato da span
    con firefox è tutto sballato, se ti può servire: http://atomsurfer.altervista.org/xht...s_floating.php

    spiega come fare il telaio di un layout con la proprietà float ed ottenere un risultato un po' più compatibile
    Oibò, non mi ero accorto dell'errore .Ho semplificato il codice prima di postarlo (infatti il codice originale funge sia su mozilla che su opera), evidentemente devo aver fatto qualche errore. ora lo risistemo


    in pratica vuoi che il div "info" sia contenuto senza uscire dal suo contenitore?
    .

    Proprio così, grassie.
    qvantvm potem tantvm avde

  9. #9
    Utente di HTML.it L'avatar di span
    Registrato dal
    Jan 2004
    Messaggi
    1,644
    Originariamente inviato da UnNamed
    Proprio così, grassie.
    ok, allora per quello, dopo la chiusura del <div id="info">, hai del testo (che è quello che va nella colonna centrale.... alla fine di quel testo inserisci questo:

    <div style="clear: both;">

    dovrebbe funzionare

  10. #10
    prova:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
    <html>
    <head>
    <title>NEWBLACKHORIZONT</title>
    <style type="text/css">@import url (stile.css);
    html,body{
    text-align: center; /*centra in IE 5.x */
    margin: 0px auto;
    padding: 0px;
    height:100%;
    }


    div#container{
    width: 960px;
    margin: 0px auto; /*centra negli altri browsers*/
    text-align: left; /*ripristina l' allineamento*/
    height:100%;
    }

    /*blocco centrale*/
    #desc{
    float:left;
    width:810px;
    margin:0px;
    height:100%;
    }

    /*blocco destro*/
    #block{
    background: url(image/blocklog.jpg) repeat-y;
    width:150px;
    float:right;
    padding: 0px;
    height:100%;
    }

    /*blocco interno al blocco destro*/
    .box{
    background:#CCCCCC url(image/block.jpg) repeat-y;
    margin:10px;
    border:1px solid black;
    font: 10px/10px Arial,sans-serif;
    }


    .boxint{
    margin:2px 0px 2px 4px;
    font: 10px/10px Arial,sans-serif;
    }

    /*titolo*/
    .tit{
    background-color:#CC9999;
    font: bold 11px Arial,sans-serif;
    color:white;

    }

    /*footer*/
    #footer{
    clear:left;
    text-align:center;
    background-color:#666666;
    font: bold 11px Arial,sans-serif;
    color:white;
    }


    /*ulteriore blocco interno*/
    #descint{
    margin:10px;
    background-color:#CCCCCC;
    font: 12px/12px Arial,sans-serif;
    border:2px solid white;
    min-height: 300px;
    height: auto !important;
    height: 300px;
    }



    /*blocco interno posizionato a destra con un float*/
    #info{
    background: url(image/blocklog.jpg) repeat-y;
    float:left;
    margin:3px;
    border:2px solid white;
    width:170px;

    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    </head>

    <body bgcolor="#CCCCCC">
    <div id="container">

    <div id="desc">
    <div id="descint">
    <div class="tit" align="center">QUI</div>
    <div id="info">
    <div class="box" align="center">
    <div class="tit">QUO</div>
    [img][/img]
    </div>
    <div class="box">
    dsfj djkfaslkjdf alksdf akj lkdfjalk dkfjaldjfk ajfkjadslkfksjdldsl kfjlkasd lkjflksd fklsdlkjfdj
    kjsdòlkf jdlkjfl kfjadkf jsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
    lkadjkf aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
    lkadjkf aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald
    lkadjkf aldkfja djf lsd
    </div>
    <div class="box">
    <div class="tit">QUA</div>
    sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf aldkfja djf lsd
    </div>
    </div>
    1234sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf aldkfja
    djf lsd sdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk asdjf fkdj fdjfka df fjdald lkadjkf
    aldkfja djf lsdsdjklf aksdf kfjsadlf l fkjds djfkajsd kldfjk

    </div>
    </div>
    <div id="block">
    <div class="box">
    <div class="tit">BLA</div>
    <div class="boxint">
    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk

    [CG] hjkljhkhlkjhk


    </div>
    </div>


    </div>
    <div id="footer">footer</div>
    </div>
    </body>
    </html>
    Anche io leggo barze-bastarde
    Athlon 64 X2 4400@2500 daily - Zalman CNPS9500 - Asus A8n-Sli Premium - Crucial Ballistix Tracer PC4000 500mhz Sinc. - Sapphire Radeon X1900XT 512mb - Zalman VF900Cu - Seagate 320Gb 7200.10 - LG H22N 18x - T.t. Soprano - LcPower Titan 560W

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.