Ciao a tutti, dovrei realizzare un layout di pagina di questo tipo:
Non credo sia difficile, ma ho dei problemi a definire l'altezza o la larghezza "adattabile", se metto un 100% mi sballa il layout perché setta il relativo div al 100% dello finestra assoluta e non al 100% della parte di finestra libera...
Qualcuno mi da una mano?
Raga, io non sono riuscito a farlo, pensavo fosse facile ma non essendoci stata risposta non lo è così tanto
L'ho fatto con le tabelle e non ho avuto nessuno problema! Anzi secondo me per queste cose le tabelle "reggono meglio", sono compatibili anche sui browser più vecchi e non presentano comportamenti differenti su diversi browser (in particolare su ie)
E oltretutto il codice è più pulito (ovviamente sempre utilizzando gli stili sulle celle)
Ecco il file (tasto dx -> salva oggetto con nome):
http://anyhub.net/file/1ZCX-fluido.html
Originariamente inviato da Ceras
...Anzi secondo me per queste cose le tabelle "reggono meglio", sono compatibili anche sui browser più vecchi e non presentano comportamenti differenti su diversi browser (in particolare su ie)
E oltretutto il codice è più pulito (ovviamente sempre utilizzando gli stili sulle celle)Originariamente inviato da ricman
Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari Le tabelle si usano per i dati tabellari ... ...
Intanto ancora non c'è una soluzione css ma c'è una soluzione tabellareOriginariamente inviato da carlomarangoni
Ho trovato un esempio css di due elementi affiancati orizzontalmente, uno dei due a larghezza fissa, l'altro elastico. Ebbene:
1) non sono riuscito a fare la stessa cosa in verticale
2) ci sono delle strane dipendenze tra gli attributi altezza (es se in un div fisso l'altezza a 200, l'altro deve essere a 232)
3) il codice dei css è ai limiti della comprensione, al contrario del codice con le tabelle che è leggero e fluido quanto il risultato prodotto (se mi trovate un esempio lo confrontiamo)
4) usando solo css per produrre elasticità, si usano attributi come left e padding in maniera anomala, distaccandosi dal loro scopo reale. Insomma per ottenere l'elasticità si fa un uso forzato e non appropriato degli attributi css, esattamente come per ottenere l'elasticità si fa un uso non appropriato delle tabelle (di fatto è la stessa cosa)
5) il risultato prodotto solo coi css (mi riferisco solo all'effetto elasticità) non è uguale per tutti i browser, non funziona per le vecchie versioni, e c'è anche un fastidioso effetto di sovrapposizione quando rendo la finestra molto piccola (cosa che non c'è nel tabellare)
Sia chiaro, non voglio essere sacrilego, onore ai css per tutto quello che riescono a fare e per i grandi vantaggi che offrono in termini di separazione tra rappresentazione e contenuto.
Ma secondo me per i dimensionamenti elastici e automatici ancora non ci siamo: probabilmente prima o poi si standardizzerà qualche nuovo attributo "dedicato" allo scopo, senza forzature e utilizzi impropri di altri attributi.
Dimostratemi che mi sbaglio! Intanto:
p.s. ecco il codice pulito e concisouno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle uno a zero per le tabelle
Codice PHP:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>fluido</title>
<style>
html,body: {
width:100%; height:100%;
}
.container {
width:100%; height:100%;
background-color:#666666;
}
.header {
height:100px;
background-color:#FF8888;
}
.footer {
height:100px;
background-color:#88FF88;
}
.navigation {
width:200px;
background-color:#8888FF;
}
.mapBox {
}
.timelineBox {
height:150px;
background-color:#FFFF88;
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<table class="container" height="100%">
<tr>
<td class="header" colspan="2"></td>
</tr>
<tr>
<td class="navigation" rowspan="2"></td>
<td class="mapBox"></td>
</tr>
<tr>
<td class="timelineBox"></td>
</tr>
<tr>
<td class="footer" colspan="2"></td>
</tr>
</table>
</body>
</html>
Il problema di base, secondo la mia modesta opinione, è che fare una layout del genere risulta difficile coi css perché è concettualmente errato, ovvero è un ibrido tra un sito fluido ed uno fisso. Che senso ha lasciare quei due/tre elementi fissi? se io ho uno schermo da 30" e guardo il tuo sito l'header e il footer diventeranno delle striscioline che si perdono, se lo guardo con un 15" invece lo spazio dedicato al contenuto risulterà davvero esiguo in rapporto alla grandezza degli elementi fissi. Allora perché nn farlo completamente fluido, e dare un'altezza percentuale a header e footer, una larghezza percentuale al nav e così via?
Originariamente inviato da bionicoz
Il problema di base, secondo la mia modesta opinione, è che fare una layout del genere risulta difficile coi css perché è concettualmente errato, ovvero è un ibrido tra un sito fluido ed uno fisso. Che senso ha lasciare quei due/tre elementi fissi? se io ho uno schermo da 30" e guardo il tuo sito l'header e il footer diventeranno delle striscioline che si perdono, se lo guardo con un 15" invece lo spazio dedicato al contenuto risulterà davvero esiguo in rapporto alla grandezza degli elementi fissi. Allora perché nn farlo completamente fluido, e dare un'altezza percentuale a header e footer, una larghezza percentuale al nav e così via?
Il progetto a cui sto lavorando prevede lo sviluppo di un software web con un'interfaccia sul client simile ad un development software.
Pensa a questa interfaccia di netbeans (è la prima che mi è venuta in mente ma ce ne sono tantissime, perfino office)
Se ridimensiono la finestra, il pannello di sinistra è fisso in larghezza, mentre i 2 pannelli successivi (code editing) si ridimensionano di conseguenza, mantenendo una larghezza del 50% tra loro. Inoltre il pannello di sinistra è diviso in verticale in 2 sottopannelli, dei il primo si adatta e il secondo è fisso.
Posso capire che per un sito generico non sempre è consigliabile avere parti fisse e parti elastiche (benché anche i migliori siti sfruttano questo criterio), ma quando si parla di un software client-server basato su web (nel mio caso un sw per una ricerca di dati spazio-temporali), ci possono essere delle specifiche ben definite come quelle che ho elencato in partenza.
Quindi non è per nulla e a priori "concettualmente errato", ma dipende sempre dal contesto.
Permessi di invio
Rispondi quotando