Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Larghezza colonna variabile in layout fluido

    Ciao a tutti,
    Sto scrivendo un CSS per un layout fluido tableless. Il problema è semplice, ma non ho trovato una soluzione "adeguata".

    Ho un container principale che ha dimensione del 70% (min-width: 760px). L'header è composto da due blocchi: a sinistra uno contiene un'animazione flash e deve essere sempre e solo 500 px. A destra vi è un div con del testo. La sua larghezza deve riempire completamente lo spazio restante (sempre all'interno del 70% del container principale). Ciò significa che il div di testo deve avere una larghezza variabile pari al 70% - 500px.

    Non so se mi sono spiegato bene.

    Ecco il codice HTML:

    codice:
    <div class="container">
                    
       <div class="header">
          <div class="border" id="flashobj">
             <object> [...] </object>
          </div>
          <div class="border" id="topdx"> prova prova prova</div>
       </div>
    
    </div>
    Ed ecco il CSS:

    codice:
    div.container{
    	width:70%;
    	min-width:760px:
    	margin:0 auto;
    	background:#fff;
    }
    
    div.header {
    	width:100%;
    	height:192px;
    	position:relative;
    }
    
    div.border {
    	border: 2px solid #E0E8F1;
    	padding: 2px;
    }
    
    div#flashobj {
    	float:left;
    	height: 182px;
    	width:500px;
    	background: url(../images/head.jpg) top left no-repeat;
    }
    
    div#topdx {
            float:right;
    	width: ????;
    }
    Con IE funziona se uso:
    width:expression(70*document.body.clientWidth/100 - 500 +"px") cioè 70% della larghezza del browser (che è la larghezza percentuale del mio layout fluido) - 500pixel del div con il flash...

    Non mi piace nè funziona con firefox.

    Help vi prego, ormai comincio a dare i numeri... anzi i div...

  2. #2
    Come non detto!! Proprio quando stavo mollando tutto ho risolto!!

    E' bastato dichiarare position: absolute per il div di testo, quindi senza dichiarare la larghezza ho dichiarato margin left 500 px (+ i bordi e padding) e margin right!!!

    Quindi:
    codice:
    div#topdx{
    	position:absolute;
    	left:512px;
    	right:0px;
    	height:182px;
    }

  3. #3
    Grave molto grave
    Ho notato che la mia soluzione è perfettamente funzionante con firefox, ma non con IE6 in cui appare obbligatorio specificare la width del div di testo. Praticamente non basta specificare top e right: la larghezza non si adatta a questi limiti ma al contenuto. Per dirla breve, mettendo una sola parola nel div la sua larghezza è quanto basta a contenere la parola e non si estende su tutto lo spazio disponibile.

    Suggerimenti??

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