Tutti sanno che per dare l'illusione di colonne colorate che si estendono verticalmente come le celle delle tabelle occorre assegnare un background al div contenitore.
Ma se le colonne hanno larghezza variabile in percentuale?
Ho provato spostando il background on i css, ma le prcentuali non funzioano come unità di misura...
#contenitore { background: #FFF url(immagine.gif) repeat-y top 80%; }
Any idea? :master:
/* Let's Lead the Web to Its Full Potential */
il sistema che indichi non è il solo e ha il limite di non funzionare con layout liquidi
quello più usato è usarne più di uno sfondo, uno al contenitore che riproduce quello di alcune colonne e un altro assegnato a una colonna che dovrà essere però sempre quella più alta in modo da trascinare il contenitore e quindi lo sfondo delle altre due colonne, questo sistema ha il limite del numero di sfondi, due soli differenti
c'è anche un terzo sistema che non pone limiti agli sfondi e alla liquidità del layout, sempre però quello di conoscere la colonna più alta delle altre, ti cerco un esempio che ho fatto recentemente
http://www.gommalayout.mondoquarto.o...atLiquide.html
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
Non ho ben capito!!
Ma l'80% di che cosa? Se non metti il body al 100% mi sa che potresti avere dei problemi.
Ciao
www.meteowebcam.it
La migliore raccolta di webcam meteo Italiane
www.creazionigrafiche.com
Grafica e siti web d'autore
VVoVe: Porca vacca Jerry!
Mi ci vorrà del tempo per capire il tuo metodo, per capirlo parola per parola... l'esempio è calzante...
Grazie dell'aiuto. Oggi mi ci metto.
PS: Visto che sei tanto disponibile, colgo l'occasione per porti un paio di riflessioni da webmaster in conflitto...
SOGNANDO UN WEBSENZA TRICKS ED HACKS
Premetto che sostengo in tutto e per tutto gli standard W3C, ma non trovi che, se per ottenere un effetto tanto scontato (almeno per come si è abituati con il layout a tabelle), bisogna complicare così tanto la struttura, alla fine è una specie di sconfitta dei CSS?
Tutti la prima volta che si pongono il problema di estendere verticalmente delle colonne, mettono istintivamente un height:100%;. Non funziona, ma probabilmente sarebbe una soluzione logica, sarebbe un parallelismo col comportamento di width:100%;...
Quello che voglio dire è che per risolvere certe situazioni, occorre comunque ricorrere a dei trucchetti anche se si progetta tutto standard... Ma allora lo standard a cosa serve? Anche la tabelle erano un trucchetto... Ne è passato di tempo da CSS 1, ma perchè i CSS non sono ancora uno strumento maturo al 100% per prendere definitivamente il posto dei layout tabulari? Secondo me non è solo colpa del supporto difettoso di certi browser (o meglio del browser per antonomasia), ma è proprio il fatto che non sono ancora uno strumento definitivo.
Forse che il W3C si sia posto il problema delle colonne estensibili in CSS 3 ?
Fiducioso in un web senza più hack....
Ciao e grazie ancora
/* Let's Lead the Web to Its Full Potential */
Un meteodo è quello poroposto da html.it nella guida layout senza css ma modificato.
Il sistema prevede 3 sfondi: due per le colonne laterali e larghi 300px, ed un per il content.
Il tutto e' stato espesso in percentuale per avere un layout liquido ed è stato aggiundo un hr alla fine del content:
Qui html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout a tre colonne con float e background</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("style.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
<h1>Html.it</h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[*]Altro link[/list]
</div>
<div id="extra">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
<div class="newsbox">
<h2>Largezza totale</h2>
Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
</div>
<div id="content">
<h2>Layout a tre colonne - versione con i float</h2>
Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>
In quanto alla non meglio specificabile sezione extra questa può contenere, come abbiamo visto nell' introduzione,
svariate funzionalità del sito: news, sondaggi, banner, navigazione supplementare e quant'altro: dovrebbe comunque
essere facilmente consultabile, non troppo scarna, nè troppo densa. Questo tipo di layout, proprio per la presenza
di una sezione logica (e fisica) aggiuntiva è indicatissimo per impaginare siti dinamici attraverso linguaggi lato
server quali php o asp e comunque siti con molti contenuti e/o aggiornamenti frequenti.</p>
Resta l' idea che la sezione dei contenuti dovrebbe essere la più corposa, e quindi la colonna centrale
la più lunga. Come per il layout a due colonne, la versione a tre colonne con i float rispetto all' analogo con posizionamenti
ha il pregio di non imporre vincoli sulla lunghezza relativa delle colonne.
D' altra parte vincola l' ordine di codifica dell' html.
visualizza il css di questo layout</p>
<hr /></div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
</div>
</body>
</html>
qui il css:
/*stili per il layout fisso con background*/
html,body{margin: 0;padding:0 width: 100%}
body{font-family: arial,sans-serif;font-size: 76%;text-align:center}
div#container{width:80%; margin:0 auto;
border-width: 0 1px; border-style:solid; border-color: #ccc;
background: url(3rightcol.jpg) repeat-y top right}
div#container2{background: url(3leftcol.jpg) repeat-y top left;text-align: left}
/*stili generici, su header e footer*/
div#header{height: 80px;background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{float: left;width: 20%;\width:25%;w\idth:20%;padding: 1em 0 0 5%}
div#extra{float: right; width: 20%;\width:25%;w\idth:20%;padding: 1em 5%}
div#content{margin: 0 25%;padding: 1em 10px; background: url(xxxx.jpg) }
div#footer{clear:both; text-align:center; padding: 5px 0;
background-color: #69c; color: #000}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}
/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}
hr {
display: block;
visibility: hidden;
clear:both;
}
in questo modo anche se le colonne laterali sono piu lunghe arrivano sempre a toccare il fondo. Qualche problema potrebbe sorgere se si usano alte risoluzioni (>1024) e basse (<600).
qui ce l'esempio:
http://ptransidico.altervista.org/prova/
ciao a tutti
www.meteowebcam.it
La migliore raccolta di webcam meteo Italiane
www.creazionigrafiche.com
Grafica e siti web d'autore
la complicazione è dovuta al fatto che browser datati con supporto limitato ai css sono ancora molto diffusi e temo lo saranno ancora per molto, le proprietà css per fare di tutto e di più ci sono da tempo, il punto debole è il browser.
ad esempio se provi:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
.contenitore {
width:80%;
display:table;
background:green;
height:auto
}
.cella{
width:30%;
display:cell;
float:left;
background:yellow;
height:100%;
}
.rossa {background:red}
</style>
</head>
<body>
<div class="contenitore">
<div class="cella">
testo qualsiasi un po' più corto del successivo
</div>
<div class="cella rossa">
testo qualsiasi un po' più lungo del precedente per vedere l'effetto di display:table e display:cell con mozilla
</div>
</div>
</body>
</html>
se provi questo su mozilla vedi che sarebbe semplicissimo fare quello che chiedi, e come questo tante altre cose ma ie da questo orecchio non ci sente
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
Per ptransidico
Con i css puoi spostare il background, non solo mettendolo top|bottom (...), ma anche esprimendo un'unità di misura. Il fatto è che se metti le percentuali (ovviamente mettendo il width:100%; sul div contenitore), lo sfondo viene spostato, ma non si capisce bene cosa sia il 100%. A rigor di logica dovrebbe essere la larghezza del parent. Se fosse così sarei a cavallo, perchè avendo una colonna larga al 20% float:right;, spostando a destra lo sfondo del parent dell'80%, avrei l'illusione della colonna colorata. E invece non funzia...Originariamente inviato da ptransidico
Ma l'80% di che cosa? Se non metti il body al 100% mi sa che potresti avere dei problemi.
Grazie, mò provo anche questa...Originariamente inviato da ptransidico
Un meteodo è quello poroposto da html.it nella guida layout senza css ma modificato..(...)
Per Jerry
Interessante il display:table;... Non ho mai capito a cosa servisse... grazie!
Ho provato a giocare col tuo metodo, (4 colonne liquide solidali a una dominante) ma come dici tu nell'esempio, possono succedere casini in caso di ridimensionamento caratteri (e anche finestra, azz!).
Quando dici:
Originariamente inviato da Jerry Masslo
quello più usato è usarne più di uno sfondo, uno al contenitore che riproduce quello di alcune colonne e un altro assegnato a una colonna che dovrà essere però sempre quella più alta in modo da trascinare il contenitore e quindi lo sfondo delle altre due colonne, questo sistema ha il limite del numero di sfondi, due soli differenti
Non ho capito bene. Che gli sfondi siano solo due a me va anche bene, perchè uso un layout a tre colonne ed è solo la float:right; quella colorata. Il mio problema è che le colonne sono larghe in percentuale: Testando a diverse risoluzioni, la colonna più alta non è sempre la stessa.
Perciò è un bel casino.
Dovrò ricorrere a min-height con tutte le precauzioni del caso, anche se il risultato non potrà mai essere preciso al 100%, oppure come suggerisci tu, il display:table; con qualche trucco per renderlo anche in IE...
Stavo già pensando ad una bella gif trasparente spacer in onore dei vecchi tempi...
/* Let's Lead the Web to Its Full Potential */
Purtroppo dettaglio per me non trascurabile...Originariamente inviato da ptransidico
Qualche problema potrebbe sorgere se si usano alte risoluzioni (>1024) e basse (<600).
/* Let's Lead the Web to Its Full Potential */
il display:table non era un suggerimento ma la risposta alle tue perprellisità sui css
se non hai sempre una colonna dominante l'affare si fa complesso, personalmente sono riuscito a realizzare due colonne liquide che non hanno bisogno di una dominante ma il metodo è discutibile, ti cerco il link:
http://www.gommalayout.mondoquarto.o...ipendenti.html
la stessa cosa immagino si possa fare usando un'immagine di sfondo, cioè, mettere due float dentro un contenitore e fare un'immagine larga migliaia di pixel, tanto con certi formati pesa lo stesso poco,dal centro verso sinistra la parte di una colonna e il rimanente per l'altra e piazzarla orizzontalmente al centro, cioè bakcground:url(SfondoSimulaColonne.png) top center repeat-y;
in tutti e due i casi penso si possa aggiungere un'ulteriore colonna attraverso un contenitore che quindi si allungherà insieme alle altre due o meglio insieme al loro contenitore e che quindi con la limitazione che questa terza colonna dovrà essere sicuramente sempre più corta
in tutto questo personalmente non capisco tutta sta mania per le colonne, fosse semplice capierei, ma ie ha molti limiti quindi perché non scegliere qualcosa di più semplice o accettare il fatto che una colonna possa visualizzarsi più corta?
4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore
il problema da me suggerito presenta il problema con mozilla e netscape poiche questi due hanno dei problemi con il clear.
ciao
www.meteowebcam.it
La migliore raccolta di webcam meteo Italiane
www.creazionigrafiche.com
Grafica e siti web d'autore
Permessi di invio
Rispondi quotando