ciao ragazzi, vorrei realizzare un layout senza tabelle molto molto semplice.. ma conoscendo poco o niente di css sono già fermo
allora, quello che mi serve al momento è una semplice colonna di 980pixel che stia al centro..
ai lati 2 colonne di larghezza variabile (dipende dalla risoluzione del monitor) con un'immagine di sfondo..per intenderci, quello che vorrei fare è una cosa del tipo www.deezer.com, due barre ai lati e una al centro con tutto il contenuto.
un aiutino veloce?
You HAVE to assume your visitor is a maniac serial killer, out to destroy your application. And you have to prevent it.
I can accept failure, everyone fails at something - But I can't accept not trying.
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Layout a 3 colonne</title> <style type="text/css"> html{ overflow-y:scroll; } </style> </head> <body style="margin:0px"> <div align="center" style="width:100%"> <div style="background-color:#0099CC; width:1003px"> <div style="background-color:#999999; width:100px; float:left">sinistra</div> <div style="width:803px; background-color:#CCCCCC; float:left">centrale</div> <div style="background-color:#999999; width:100px; float:left">destro</div> </div> </div> </body> </html>
Ok sia con IE7, FF3 e Google Chrome
Ci occupiamo di information design, web design, usabilità e architettura delle informazioni.
Visitate il nostro sito
www.informationdesigners.org
e il nostro blog
www.informationdesigners.org/blog
ehm no.. io intendevo che i due div, sinistra e destra, abbiano laghezza variabile in base alla dimensione del monitor, è fissa solo la parte centrale a 980 px.
tutto il sito, menu, contenuti ecc.. starà nella parte centrale, le parti laterali conterranno solamente un'immagine di sfondo..
You HAVE to assume your visitor is a maniac serial killer, out to destroy your application. And you have to prevent it.
I can accept failure, everyone fails at something - But I can't accept not trying.
980px sono tanti per un monitor a risoluzione a 1024x768.
Con un blocco centrale di 980px vuol dire che gli spazi laterali "variabili" sono di circa 22px ciascuno, e tenendo presente che internet explorer ha la scrollbar di circa 21 px...bhè..gli spazi laterali sparirebbero. 1024-21=1003-980=23/2=11.5px <= la larghezza degli spazi "variabili".
Forse vuoi fare un sito ottimizzato per una risoluzione a 1280x1024 o superiore?
Se così fosse conta che la maggior parte della gente usa una risoluzione di 1024x768.
Ti torna il mio ragionamento o mi sto allontanando da ciò che stai chiedendo?
Ci occupiamo di information design, web design, usabilità e architettura delle informazioni.
Visitate il nostro sito
www.informationdesigners.org
e il nostro blog
www.informationdesigners.org/blog
sisi hai perfettamente ragione, allora invece che 980 punterei a bho.. 960? così da avere 21,5 pixel ai lati (ma lo 0.5 come lo prende?)Originariamente inviato da stoart
980px sono tanti per un monitor a risoluzione a 1024x768.
Con un blocco centrale di 980px vuol dire che gli spazi laterali "variabili" sono di circa 22px ciascuno, e tenendo presente che internet explorer ha la scrollbar di circa 21 px...bhè..gli spazi laterali sparirebbero. 1024-21=1003-980=23/2=11.5px <= la larghezza degli spazi "variabili".
Forse vuoi fare un sito ottimizzato per una risoluzione a 1280x1024 o superiore?
Se così fosse conta che la maggior parte della gente usa una risoluzione di 1024x768.
Ti torna il mio ragionamento o mi sto allontanando da ciò che stai chiedendo?
grazie per il consiglio!
però mi rimane sempre il problema iniziale: parte centrale fissa a 960px, parti laterali variabili..
cioè, quello che con una tabella si risolve con
come lo si fà coi div e css?Codice PHP:<table width="100%">
<tr>
<td>sinistra</td>
<td width="960">centro</td>
<td>destra</td>
</tr>
</table>
You HAVE to assume your visitor is a maniac serial killer, out to destroy your application. And you have to prevent it.
I can accept failure, everyone fails at something - But I can't accept not trying.
Bhè a questo punto sappiamo che la parte centrale è di 960 e i laterali di 21.5.
Facciamo che la parte centrale è 961 così i laterali diventano 21 e puoi utilizzare il codice che ti ho postato prima cambiando i numeri (quelli in rosso dovrebbero andare bene per te):
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Layout a 3 colonne</title> <style type="text/css"> html{ overflow-y:scroll; } </style> </head> <body style="margin:0px"> <div align="center" style="width:100%"> <div style="background-color:#0099CC; width:1003px"> <div style="background-color:#999999; width:21px; float:left"></div> <div style="width:961px; background-color:#CCCCCC; float:left">centrale a 961px</div> <div style="background-color:#999999; width:21px; float:left"></div> </div> </div> </body> </html>
Ci occupiamo di information design, web design, usabilità e architettura delle informazioni.
Visitate il nostro sito
www.informationdesigners.org
e il nostro blog
www.informationdesigners.org/blog
non ci capiamo..
così è si ottimizzato per 1024, ma quelli che hanno la risoluzione più grande vedranno 2 barre di 20 pixel ai lati..
invece nelle 2 barre laterali, voglio metterci un'immagine in fadein... giuarda deezer come esempio, la parte centrale è sempre della stessa dimensione, le barre ai lati invece hanno quei 2 fade in grigio/nero che seguono le dimensioni dello schermo...
nell'esempio con la tabella che ti ho postato io, il funzionamento è lo stesso: parte centrale fissa, barre laterali (che non conterranno il menu, o altri contenuti: ma solo un'immagine di sfondo alta 3 pixel con repeat-y)
cioè a stò punto uso la tabella, metto un'id ai td laterali e nel css le immagini di sfondo
qualcosa del tipo
ma il mio mal di testa è: come faccio quel layout tableless?!Codice PHP:<style>
td#dx{
background-image: url(dx.jpg) repeat-y;
}
td#sx{
background-image: url(sx.jpg) repeat-y;
//..e qui devo dirgli di partire cn l'immagine centrata a dx..bhè è un casino spiegarlo
}
</style>
<table width="100%">
<tr>
<td id="sx">sinistra</td>
<td width="960">centro</td>
<td id="dx">destra</td>
</tr>
</table>
You HAVE to assume your visitor is a maniac serial killer, out to destroy your application. And you have to prevent it.
I can accept failure, everyone fails at something - But I can't accept not trying.
Si ma in questo modo le due colonne laterali non sarebbero liquide come da richiesta ma fisse.
Per renderle liquide (ovvero adattabili a seconda della risoluzione del monitor) devi impostare a quella centrale la larghezza che vuoi in px a quelle laterali imposti come width:100% e poi "scegli la misura" lavorando con i margini negativi..
Questo è come procedo io almeno..
Ti faccio vedere brevemente come faccio per i layout a 2 colonne che è più semplice:
Ovviamente se dici che di css non ne capisci niente non potrai fare granchè ma almeno saprai cosa cercare..codice:<div id=con"> <div id="c1"> Colonna 1 </p> </div> <div id="c1"> Colonna 1 </p> </div> </div> #c1{width: 150px} #c2{width: 100%; margin-left:155px}
si, ti confermo la mia ignoranza in materia CSS..Originariamente inviato da dori88
Si ma in questo modo le due colonne laterali non sarebbero liquide come da richiesta ma fisse.
Per renderle liquide (ovvero adattabili a seconda della risoluzione del monitor) devi impostare a quella centrale la larghezza che vuoi in px a quelle laterali imposti come width:100% e poi "scegli la misura" lavorando con i margini negativi..
Questo è come procedo io almeno..
Ovviamente se dici che di css non ne capisci niente non potrai fare granchè ma almeno saprai cosa cercare..
non è che mi posti un esempio?
in che senso margini negativi?
non sapevo che i div accettassero larghezze in %
You HAVE to assume your visitor is a maniac serial killer, out to destroy your application. And you have to prevent it.
I can accept failure, everyone fails at something - But I can't accept not trying.
Ho modificato lamia risposta inserendo un esempio.
Permessi di invio
Rispondi quotando