+ Rispondi alla Discussione
Risultati da 1 a 15 di 15

Due colonne larghezza variabile la seconda vuota

Ultimo Messaggio di digital00 il:
  1. #1
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313

    Due colonne larghezza variabile la seconda vuota

    Salve, ho un menu orizzontale composto da due sezioni di dimensione variabile: quella di sinistra contiene i link (impostati a larghezza fissa e con float left per affiancarsi), mentre quella di destra vuota ma con il colore di sfondo impostato e che nelle intenzioni dovrebbe riempire lo spazio rimanente.
    La sezione di sinistra mi serve variabile in quanto a seconda della pagina cambia il numero di link e lo sfondo deve rimanere trasparente.

    come si pu risolvere?

    io ho fatto cos:

    <div id="menu">
    <div id="sinistra"><a class="link">link1</a><a class="link">link2</a>...</div>
    <div id="destra"></div>
    </div>

    #menu {float:left; width:100%}
    #sinistra {border-left:10px; float:left}
    #destra {float; left; margin: 0px; background-color:#CCCCCC;}
    .link {float:left; width: 50px; display:block; background-color:#CCCCCC; margin-rigt:5px;}

    putroppo senza ottenere l'effetto voluto, ossia il contenitore "destra" non mi riempie lo spazio restante.

    Dove sbaglio?
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  2. #2
    Utente Premium L'avatar di Mas245
    Data Registrazione
    Aug 2006
    Localit
    Riccione
    Messaggi
    184
    Se a larghezza variabile e rimane vuoto a cosa si adatta?
    Ultima modifica di Samyorn; 10-12-08 alle 15:14 Motivo: Curare le maiuscole.

  3. #3
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    Allo spazio rimasto vuoto.
    Ultima modifica di Samyorn; 10-12-08 alle 15:14 Motivo: Curare maiuscole e punteggiatura.
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  4. #4
    Utente Premium L'avatar di Mas245
    Data Registrazione
    Aug 2006
    Localit
    Riccione
    Messaggi
    184
    Non funziona cos, la colonna si adatta a del testo o qualcos'altro non allo spazio rimasto vuoto.
    Ultima modifica di Samyorn; 10-12-08 alle 15:15 Motivo: Curare maiuscole ed ortografia.

  5. #5
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    Quindi un problema irrisolvibile?
    Ultima modifica di Samyorn; 10-12-08 alle 15:15 Motivo: Curare le maiuscole.
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  6. #6
    User L'avatar di king7880
    Data Registrazione
    May 2005
    Messaggi
    33
    Ciao hai provato a mettere width:100% al div di destra?
    Ultima modifica di Samyorn; 10-12-08 alle 15:16 Motivo: Curare le maiuscole.

  7. #7
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    Si, la prima cosa che ho provato, senza successo.
    Ultima modifica di Samyorn; 10-12-08 alle 15:16 Motivo: Curare l'uso delle maiuscole.
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  8. #8
    User L'avatar di digital00
    Data Registrazione
    Apr 2006
    Messaggi
    49
    Ci sono due errori ortografici:
    Codice:
    #destra {float; left;
    (punto e virgola al posto dei due punti)
    e in .link:
    Codice:
    margin-rigt:5px;}
    Correggi e facci risapere.

    EDIT: non capisco perch vuoi usare quel #destra quando puoi applicare il background all'intero menu, e se vuoi che #sinistra non erediti il colore basta impostare un altro background a quest'ultima. Forse se mi fai vedere un rendering grafico di questo menu posso darti una soluzione pi precisa (prima correggi gli errori).

    Ciao!
    Ultima modifica di digital00; 09-12-08 alle 20:41 Motivo: aggiunta

  9. #9
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    Gli errori li avevo gi corretti.
    In pratica ho bisogno di mostrare lo sfondo appartenente al contenitore principale al di sotto del margin-rigt:5px; (trasparente, appunto) di ogni link.
    Pertanto #destra non pu avere uno sfondo, mentre #sinistra deve apparire come un link allungato fino alla fine del contenitore.
    Non so se ho reso l'idea.
    Ultima modifica di Samyorn; 10-12-08 alle 15:17 Motivo: Curare l'uso delle maiuscole.
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  10. #10
    User L'avatar di digital00
    Data Registrazione
    Apr 2006
    Messaggi
    49
    Senti, sar l'ora, o sar scemo io, ma preferisco essere sincero, non lasciarti senza risposta, e dirti che c'ho capito poco . Soprattutto con
    Pertanto #destra non pu avere uno sfondo, mentre #sinistra deve apparire come un link (???) allungato fino alla fine del contenitore.
    Scusa la mia tardezza di comprendonio. Se magari fai un immaginetta con la tua idea di menu e ce la linki risolviamo tutto. Con l'ultima frase e con "sfondo al di sotto del margin-right: 5px trasparente" mi hai un po scombussolato le idee. Sciao!

    p.s. se non hai gi fatto, correggi anche border-left: 10px
    p.p.s se noti che sono io troppo tardo di comprendonio non stare nemmeno a fare l'immagine e aspetta qualche altra risposta

  11. #11
    User Attivo L'avatar di karedas
    Data Registrazione
    May 2007
    Localit
    Impruneta (Firenze)
    Messaggi
    1,102
    Ciao Mytom
    Vediamo.
    Se metti al div di destra una larghezza di 100% ovvio che quel div pretender l'intera fascia orizzontale in relazione a chi a sua volta lo contiene. Nel tuo caso si andrebbe a posizionare sotto il div di sinistra poich essendo di una certa dimensione impedirebbe la larghezza 100% a quello di destra.

    Ci che invece puoi fare sono due cose:
    O dare una dimensione fissa anche al div di destra oppure usare le percentuali, esempio:
    Codice HTML:
    #sinistra{
     width: 30%;
    }
    #destra{
    width:70%
    }
    Ovvio che non avrai pi una dimensione basata sui pixel per il men di sinistra. L'unica alternativa infatti quella di utilizzare appunto i valori fissi per entrambi.

    Per quanto riguarda l'altezza te la illustro successivamente in base alla tua risposta

    ciao!
    Easysystem- Software and hardware solutions

  12. #12
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    L'altezza dovrebbe essere apposto cos. Per ora mi sono arrangiato con i valori fissi, e penso che cos possa andare bene.
    Grazie.
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  13. #13
    User L'avatar di digital00
    Data Registrazione
    Apr 2006
    Messaggi
    49
    Grazie al link del pvt ho finalmente capito. Una soluzione questa (testata su ie e ff):
    Codice:
    #MainContainer {
      width: 100%;
      background-color: #CCCCCC;
      overflow: hidden;
    }
    #LinkContainer {
      float:left; 
      width: 50px;
      background: #CCCCCC url(img/back.gif) repeat-x;
      overflow: hidden;
      padding-right: 5px;
    }
    .Link {  
      display: block; 
      background-color: #CCCCCC; 
      text-align: center
    }
    <div id="MainContainer">
    <div id="LinkContainer"><div class="Link">First</div></div>
    <div id="LinkContainer"><div class="Link">Second</div></div>
    </div>
    Il risultato quello che volevi: il #MainContainer copre il ruolo del tuo #destra; il #LinkContainer mantiene "lo sfondo sotto il margin-right: 5px" . Applica l'immagine di background del tuo attuale menu a #LinkContainer (magari imposta repeat-x, a seconda di come tagli l'immagine di back), e fatta.

    Ciao!
    fammi sapere se hai problemi

  14. #14
    Utente Premium L'avatar di Mytom
    Data Registrazione
    Jan 2007
    Messaggi
    313
    grazie per i suggerimenti
    www.mytom.it il mio blog su tecnologia, letture, opinioni e Juventus

  15. #15
    User L'avatar di digital00
    Data Registrazione
    Apr 2006
    Messaggi
    49
    Mi raccomando, se c' qualcosa che non ti torna dimmelo. Testa il codice, ottieni il risultato che cercavi, basta modellarlo secondo le tue esigenze.

    Ciao!

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] Attivato
  • Il codice [VIDEO] Attivato
  • Il codice HTML Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.