• User Newbie

    Div che si allungano secondo il testo inserito

    Ciao,
    a tutti sono nuova del forum e volevo chiedere aiuto su un problema con i div. Ho realizzato un template con Photoshop e poi trasformato in html. Diciamo che il layout può essere suddiviso in tre parti: header, body e footer, tutte e tre contenute in un div principale e ognuna di queste parti ha diversi div. Ora io vorrei che tutti i div del body, cioè nella parte centrale, si allungassero seguendo il testo che viene inserito anche in uno solo di essi. Si può fare? E come?


  • User Attivo

    Ciao violet81 e benvenuta 🙂
    Ogni div si dimensiona sempre il relazione al proprio contenuto. Però si può simulare l'effetto che vuoi ottenere tu tramite l'uso degli sfondi. Questa tecnica si chiama False Colonne (faux column).
    Ne abbiamo già parlato qualche volta qua sul forum:
    http://www.giorgiotave.it/forum/tags/faux-column/
    http://www.giorgiotave.it/forum/search.php?searchid=300112

    :ciauz:


  • User Newbie

    ciao grazie per i suggerimenti, ho provato un pò a capire come fare...

    dunque io ho ben 7 div nella zona centrale, questi div sono contenuti in un div con position:absolute e larghezza fissa. Ho capito che bisogna utilizzare l' attributo float, che può avere due valori left e right. Ma come utilizzarli con 7 div uno accanto all' altro?


  • User Attivo

    @violet81 said:

    ciao grazie per i suggerimenti, ho provato un pò a capire come fare...

    dunque io ho ben 7 div nella zona centrale, questi div sono contenuti in un div con position:absolute e larghezza fissa. Ho capito che bisogna utilizzare l' attributo float, che può avere due valori left e right. Ma come utilizzarli con 7 div uno accanto all' altro?

    Ciao,
    ma i div sono gia posizionati?
    Devi solo creare un immagine di sfondo al div contenitore che simuli le tue 7 colonne.

    :ciauz:


  • User Newbie

    si i div sono già posizionati. ho messo un' immagine di sfondo ma in dreamweaver si allungano inserendo testo ad oltranza, ma se ne allunga solo uno e non tutto il resto come vorrei. Poi salvando e visualizzando nel browser resta tutto come prima e il testo viene visualizzato fino alla lunghezza predefinita del div


  • User Attivo

    Si questo è normale. Ogni div si allunga in relazione al proprio contenuto.
    Tu hai questa situazione:

    <div class="contenitore">
    <div>1</div>
    <div>2</div>
    .....
    <div>7</div>
    </div>
    

    Poniamo che il div contenitore sia largo 140px, e che ogni sotto div sia largo 20px (per fare i conti facilmente).
    Il trucco sta nel creare un immagine di sfondo da applicare al contenitore affinché simuli le 7 colonne create dai 7 div, quindi ad esempio creare un immagine di sfondo larga 140px e divisa in 7 colonne da 20px ognuna colorata in modo diverso.

    Via i CSS i div li lascia "trasparenti" cioè senza sfondo, ne bordi cosicché sembri che ci siano queste 7 colonne tutte alte uguali.


  • User Newbie

    Allora ho creato un nuovo div contenitore per la parte centrale e incluso in questo div tutti quelli che dovrebbero "allungarsi". Ho settato come immagine di sfondo del div contenitore una che disegnasse tutte le colonne (2):

    Il contenitore centrale:

    #cont_cent {
    position:absolute;
    left:49px;
    top:331px;
    width:800px;
    background-image:url(images/cont_cent.jpg);
    background-repeat:repeat-y;
    }

    gli altri div sono tutti con absolute e senza altezza.

    1)il div che contiene il footer non scende
    2)non visualizzata l' immagine di sfondo che si ripete
    3)si vede un prolungamento dei div che contengono il testo che ovviamente si visualizza oltre il footer


  • User Attivo

    Ciao violet81,
    a questo punto abbiamo bisogno del CSS e dell'html della tua pagina. Così a occhio è impossibile aiutarti.

    Se l'immagine va oltre il footer e posto che questo sia subito sotto il contenitore, sembrerebbe un problema di clearing. Prova ad esempio a dare al footer:

    clear: both;
    

  • User Newbie

    ho provato con clear: both; ma non succede niente.
    La pagina è a questo indirizzo: http://www.nemoprincess.it/template/
    I div che dovevano estendersi sono commentati e ho messo l' immagine di sfondo del div centrale anche nel div stesso, come verifica della correttezza del percorso. Inoltre ho incluso l' ultimo div, il footer nel div centrale.


  • User Attivo

    Ciao violet81,
    ho provato a fixare il tuo layout con la webdeveloper toolbar ma non sono riuscito.

    Il codice generato da ImageReady è quanto di più illeggibile possa esistere. Usa i div come se fossero tabelle, posizionati in modo assoluto e contenenti immagini strutturali.
    Questo non è desgin con iCSS 🙂

    Debuggarlo come si deve comporterebbe più tempo che ricostruirlo da capo.

    Ti consiglio di leggerti una guida ai fogli di stile, perché sono davvero semplici. Usare tool che generano codice di quel tipo non porta da nessuna parte, e al primo problema i limiti vengono fuori.

    Mi spiace ma di più non riesco a fare :bho:


  • User Newbie

    ok grazie mille lo stesso, ma volevo chiedere un' ultima cosa...
    per creare un layout quali sono i passi partendo dalla creazione grafica con photoshop?


  • User Attivo

    @violet81 said:

    ok grazie mille lo stesso, ma volevo chiedere un' ultima cosa...
    per creare un layout quali sono i passi partendo dalla creazione grafica con photoshop?

    Quando si progetta con i CSS, il punto cardine è sempre quello di utilizzare le immagini che definiscono la struttura attraverso la proprietà background.

    Dopo che hai creato il tuo layout in Photoshop sta a te poi decidere dove, come e quanti div usare e poi ritagliare a mano di conseguenza. Devi pensare per "sfondi".

    Se hai bisogno di una dritta per cominciare abbiamo le FAQ in rilievo in cui sono segnalate molte guide utili.
    Poi c'è il Layout-izzatore che è un foglio di stile che ti permette di creare velocemente la struttura di un layout bi-colonna da personalizzare, con relativa guida all'uso, molto comodo anche per imparare le tecniche base di design.

    Io ti consiglio di partire dalle basi e procedere per passi. Capisco che quella di Phostohop + ImageReady sia la strada più breve, però ti assicuro che è quella sbagliata. Inoltre, ripeto, i CSS sono molto più semplici di quello che sembrano 🙂

    Se la cosa ti interessa ti auguro in bocca al lupo, e per qualsiasi necessità ricordati che questo forum è a tua disposizione 🙂

    :ciauz:


  • User Newbie

    grazie davvero per tutti i consigli e per la disponibilità, studierò i css allora...
    Ah crepi il lupo!!