Printable View
ciao,
volevo chiedere: é possibile ad esmpio mettere un menu (fatto con div) di alrghezza in px e poi mettere un altro div affiancato di larghezza 100% cioe che occupa tutto il resto?
vorrei fare un layout a tre colonne tipo:
100px | 100% | 100px
é possibile farlo facilmente attraverso i css? se si come? fin'ora son riuscito solo con le misure tutte uguali % con % e px con px...
grazie...ciao!
Non puoi usare una tabella ??
Spero essere stato d'aiuto...Codice HTML:<table border="0">
<td width="100">
//1 div
</td>
<td width="100%">
//2 div
</td>
<td width="100">
//3 div
</td>
</table>
CIAO!
Il layout con le tabelle è deprecato ormai, si fa con i css.
Prova a dare al div di sinistra float: left;position: absolute;, al div di destra float: right;position: absolute; e al div di centro position: relative;
Così funziona: devi creare i 3 div delle colonne.
Quelli laterali avranno width:100px.
Tutti e tre avranno "position: absolute".
Così poi indicherai a ogni colonna dove posizionarsi tramite gli attributi top, left, right (i quali indicano quanto spazio lasciare rispettivamente dall'alto, da sinistra e da destra).
Quando fai tutte queste prove dai anche dei colori di sfondo così ti è più facile individuare se le colonne si posizionano dove desideri.
Codice HTML:<html>
<head>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#colsx, #coldx {
position:absolute;
top:0px;
width:100px;
}
#colsx {
left:0px;
}
#coldx {
right:0px;
}
#colcen {
position:absolute;
top:0px;
left:100px;
right:100px;
}
</style>
</head>
<body>
<div id="colsx"></div>
<div id="colcen"></div>
<div id="coldx"></div>
</body>
</html>
dimenticato di dire che i 3 div sono contenuti in un altro div che é allineato al cnetro con una certa larghezza, ho provato in diversi modi e sembra nn andare, funziona con la colonna sinistra ma quella destra viene sballata...
grazie dell'aiuto! ciao!
EDIT:
per ora ho così:
così funziona, ma appunto vorrei mettere left e right 100px e il centro che si ingrandice automatico.. ho provato anche i vostri sistemi! avete qualche altra soluzione?Codice HTML:#left {
width: 18%;
float: left;
}
#center {
width: 64%;
float: left;
}
#right {
width: 18%;
float: left;
}
#right {
width: 18%;
float: right;
}
Mischiare le misure in pixel e in percentuale è teoricamente possibile, ma, come hai visto, i risultati sono quelli che sono... questo codice dovrebbe funzionare:Due considerazioni:Codice HTML:<style>
#left { width:100px; float:left }
#right { width:100px; float:right }
#center { width:auto }
</style>
...
<div id="left"> ... </div>
<div id="right"> ... </div>
<div id="center"> ... </div>
- l'ordine dei DIV deve essere quello specificato, perché la dichiarazione "auto" funzioni
- avresti potuto inserire 100% al posto di "auto", ma i risultati sarebbero stati diversi tra i browser: IE te l'avrebbe (correttamente?) interpretato come "il 100% della larghezza restante", Firefox invece come "il 100% rispetto alle dimensioni della finestra"
Statemi bene...
dementialsite, ho provato anche il tuo metodo, non funziona,.. viene sfasato...