Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1

    Problema per un principiante css, contenitore + 1 box titolo + 2 box allineati

    Salve a tutti e buona domenica, sto studiando da un po' di tempo la soluzione css per eliminare le tabella da un mio piccolo sito così stavo leggendo i vosti tutorial è ho messo giù due righe di codice per un piccolo css come scritto sopra. Qualcuno mi potrebbe aiutare a farmi capire cosa sbaglio ?

    Il mio obbiettivo è questo.
    ho un box contenitore,

    al suo interno ho un altro box che conterrà un titolo generico la cui larghezza e lunghezza non sono fissi.

    Sotto di esso ci andranno altri due box allineati uno di fianco all'altro che contengono una descrizione e un prezzo sulla destra.
    Questa unità qui sopra dovrà ripetersi più volte sempre distanziandosi dalle altre voci.
    Il mio problema è che il risultato è penoso sia con IE che con Firefox.
    Posto il codice, sarei veramente grato a tutti quelli che mi spiegeranno dove sbaglio.

    PS: il box titolo non ha dimensione fissa, e nemmeno il box risultante dall'affiancamento della descrizione e dal prezzo, però se la pagina diventava troppo piccola volevo fare in modo che il box prezzo si posizionasse sotto al box descrizione per questo ho messo float (volevo fare in modo di poterlo leggere da cellulare con opera7)

    <CSS>
    /* regole per il posizionamento dei blocchi */

    body {
    width : 100%;
    font-size : 100%;
    font-family : arial, helvetica, sans-serif;
    background : white;
    }

    #contenitore{
    width : 100%;
    border : 0.1px;
    border-color : #ffffff;
    margin : 0.1em;
    color : #000000;
    }

    #titolo {
    float : left;
    margin : 1px;
    padding : 0.2em;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 100%;
    background : green;
    }

    #testo {
    display : inline;
    margin : 1px;
    padding : 0.2em;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 80%;
    background : red;
    }

    #prezzo {
    margin : 1px;
    display : inline;
    padding : auto;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 10%;
    background : yellow;

    }

    div.clear {
    clear: left;
    height: 0;
    overflow : hidden;
    }
    </CSS>

    <PHP>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>
    <head>
    <title>testlayout</title>
    <?php
    // dichiarazione stile css usato
    echo "<link rel=\"stylesheet\" href=\"test.css\" type=\"text/css\" />";
    ?>
    </head>

    <body>
    <?php
    print "<div id=\"contenitore\">";
    print "<div id=\"titolo\">titolo";
    print "</div>";
    print "<div id=\"testo\">testo";
    print "</div>";
    print "<div id=\"prezzo\">prezzo€";
    print "</div>";
    print "</div>";
    print "<div id=\"clear\"></div>";

    print "<div id=\"contenitore\">";
    print "<div id=\"titolo\">";
    print "</div>";
    print "<div id=\"testo\">testo";
    print "</div>";
    print "<div id=\"prezzo\">prezzo€";
    print "</div>";
    print "</div>";
    print "<div id=\"clear\"></div>";
    ?>
    </body>
    </html>


    </PHP>

  2. #2
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Non puoi mettere all'interno di una stessa pagina due elementi id.
    Mi spiego.
    Gli elementi id, devono essere unici in ogni pagina.
    Gli elementi class, possono essere ripetuti più volte nella pagina.

    Esempio:

    <div id="contenitore">
    </div>

    <div id="contenitore">
    </div>

    Non li puoi mettere nella stessa pagina.

    Puoi invece fare:

    <div class="contenitore">
    </div>

    <div class="contenitore">
    </div>

    Prova a sostituire gli id multipli con le classi



  3. #3
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Un'altra cosa:
    nel css specifichi clear come una classe, e nel codice html lo richiami come id.
    Sistema anche questo..


  4. #4
    Scusa la mia stupidaggine, riposto con le correzioni, ho provato la soluzione ma purtroppo non va ancora bene. Con Firefox il box del titolo mi prende tutta la pagina ed è giusto, però il box del prezzo non arriva fino in fondo, e se ridimensiono la pagina, il box prezzo non si posiziona sotto il box testo ma piuttosto viene mangiato lasciando il testo in overflow.
    Con Explorer 6 invece ho lo stesso problema del box prezzo che non si estende per tutta la pagina, però se la finestra viene ristretta abbastana il box si posiziona correttamente sotto. Come posso risolvere ? Grazie per l'aiuto


    <CSS>
    /* regole per il posizionamento dei blocchi */

    body {
    width : 100%;
    font-size : 100%;
    font-family : arial, helvetica, sans-serif;
    background : white;
    }

    div.contenitore{
    width : 100%;
    border : 0.1px;
    border-color : #ffffff;
    margin : 0.1em;
    color : #000000;
    }

    div.titolo {
    float : left;
    margin : 1px;
    padding : 0.2em;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 100%;
    background : green;
    }

    div.testo {
    display : inline;
    margin : 1px;
    padding : 0.2em;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 80%;
    background : red;
    }

    div.prezzo {
    margin : 1px;
    display : inline;
    padding : auto;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 10%;
    background : yellow;

    }

    div.clear {
    clear: left;
    height: 0;
    overflow : hidden;
    }

    </CSS>

    <PHP>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>
    <head>
    <title>testlayout</title>
    <?php
    // dichiarazione stile css usato
    echo "<link rel=\"stylesheet\" href=\"test.css\" type=\"text/css\" />";
    ?>
    </head>

    <body>
    <?php
    print "<div class=\"contenitore\">";
    print "<div class=\"titolo\">titolo";
    print "</div>";
    print "<div class=\"testo\">testo";
    print "</div>";
    print "<div class=\"prezzo\">prezzo€";
    print "</div>";
    print "</div>";
    print "<div class=\"clear\"></div>";

    print "<div class=\"contenitore\">";
    print "<div class=\"titolo\">titolo";
    print "</div>";
    print "<div class=\"testo\">testo";
    print "</div>";
    print "<div class=\"prezzo\">prezzo€";
    print "</div>";
    print "</div>";
    print "<div class=\"clear\"></div>";
    ?>
    </body>
    </html>


    </PHP>

  5. #5
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Allora come hai fatto tu:
    titolo ha una larghezza di 100%, quindi occuperà tutto lo spazio del contenitore.
    Testo e prezzo sono resi float, e si disporranno accanto a titolo: ma non hanno lo spazio, perchè titolo occupa già tutto lo spazio. E poi tu vuoi che questi due blocchi vadano sotto titolo.

    Quindi:
    prova a Togliere a Titolo il float e metti subito dopo titolo un clear.

    Ora i due blocchi testo e prezzo si dovrebbero sistemare sotto il titolo.


  6. #6
    Non odiarmi perdonami, ho fatto come hai detto tu

    div.titolo {
    /*float : left; */
    margin : 1px;
    padding : 0.2em;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 100%;
    background : green;
    }

    e poi
    print "<div class=\"titolo\">titolo";
    print "</div>";
    print "<div class=\"clear\"></div>";

    Però il problema è sempre lo stesso:
    il Box Titolo si espande per tutta la pagina ed è giusto
    Il box testo è ok, il box prezzo invece non si espande fino alla fine della pagina
    ma diciamo che tiene un margine di circa il 10% dalla lunghezza totale della pagina, come mai ?
    Riducendo la finestra invece, il box prezzo in Firefox non scende sotto il box testo.
    Sigh non ci capisco più niente, help !

  7. #7
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Logicamente:
    larghezza totale: 100%

    larghezza testo: 80%
    larghezza prezzo: 10%

    testo + prezzo = 90%

    Metti a prezzo larghezza 20%....
    Dovrebbe andare ora...

    Speriamo


  8. #8
    Ho risolto mettendo width : 18%;
    Suppongo che sia per via dei margini che guarda caso fanno 1+1 se non sbaglio.
    Altro problema ora
    Nella casella testo ci andrà del testo anche piuttosto lungo, quindi ad altezza variabile, come faccio ad impostare la stessa altezza anche il prezzo ?
    Grazie sei un santo non ne uscivo più fuori, anche se ancora non ho ben capito il discorso del class e id

  9. #9
    Utente di HTML.it L'avatar di LA VALE
    Registrato dal
    Sep 2003
    Messaggi
    667
    Originariamente inviato da Violence77
    Ho risolto mettendo width : 18%;
    Suppongo che sia per via dei margini che guarda caso fanno 1+1 se non sbaglio.
    Esatto, avevo dimenticato di guardare i margini, sorry


    Altro problema ora
    Nella casella testo ci andrà del testo anche piuttosto lungo, quindi ad altezza variabile, come faccio ad impostare la stessa altezza anche il prezzo ?
    Grazie sei un santo non ne uscivo più fuori, anche se ancora non ho ben capito il discorso del class e id
    SantA prego

    Per le classi e id leggiti su html.it la guida css, in cui ti viene spiegata la questione molto meglio di come te l'ho detta io

    Per l'altezza è un altro discorso:
    all'allungarsi in altezza di testo, prezzo non si allungherà. Bello vero?
    Se usi degli sfondi colorati o delle immagini, puoi simulare che anche prezzo si allunghi.
    Comunque, il successivo div testo, andrà tranquillamente sotto il testo precedente, se è questo che ti preoccupa. non ci saranno sovrapposizioni tra testi e prezzi.


  10. #10
    SCUSA ! Vale non avevo letto bene il nick Grazie per la pazienza che dedichi a un testa dura come me
    Ho fatto così correggimi se sbaglio qualcosa.

    div.contenitore{
    width : 100%;
    border : 0.1px;
    border-color : #ffffff;
    margin : 0.1em;
    background-color : yellow;
    color : #000000;
    }

    div.titolo {
    /*float : left; */
    margin : 0.1px;
    padding : 1px;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 100%;
    background : green;
    }

    div.testo {
    display : inline;
    margin : 0.1px;
    padding : 1px;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 80%;
    background : red;
    }

    div.prezzo {
    margin : 1px;
    display : inline;
    padding : auto;
    float : left;
    border : 0.5px solid;
    border-color : #ffffff;
    width : 15%;
    background-color : transparent;
    }

    Ho ottenuto il mio risultato ma questo solo con Esplorer 6 ! Sembra che il transparent non venga riconosciuto da Firefox che mi consigli di fare ?

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.