Newsgroup: it.comp.www.html
Titolo: problema position: absolute;

Scusate, vi devo chiedere una cosa da principiante.
Ho usato per vari anni i CSS con le tabelle, adesso ho deciso di tentare 
per l'ennesima volta di comprendere le gabbie dei CSS che mi tornavano 
ostico.
Ho studiato tutto come altre volte e mi pareva di avere ben capito 
questa volta.
Ho applicato l'esempio del libro di cui dispongo ad un template che già 
avevo, in cui ho due gabbie fisse laterali con posizionamento assoluto e 
due gabbie lasciate nel flusso al centro.
Il problema è che queste ultime non restano indifferenti rispetto a alle 
due laterali posizionate in maniera assoluta, ma finiscono sotto.
Il codice è questo:
CSS:
body {background-color: white; color: #68570a;
       padding-top: 15px; padding-bottom: 20px; padding-left: 20px;
       font-style: normal; font-family: verdana, arial, times new roman;}
.documento {text-align: left; font-size: 12px; line-height: 2.5em;
             font-family: verdana, arial, times new roman;
             color: #68570a; padding-top: 15px; padding-bottom: 20px;
             padding-left: 20px; padding-right: 10px; margin-left: 60px;
             margin-right: 5px; border: 1px solid #CCCCCC;}
.menusx {position: absolute; top: 30px; left: 20px; background-color:
          white; width: 200px; text-align: left; font-size: 12px;
	 line-height: 2.5em; font-family: verdana, arial, times new
          roman; color: #68570a; padding-top: 15px; padding-bottom:
          20px; padding-left: 20px; padding-right: 20px; margin-left:
          10px; margin-right: 10px; border: 1px solid #CCCCCC;}
.menudx {position: absolute; top: 30px; right: 0px; background-color:
          white; width: 200px; text-align: left; font-size: 12px;
	 line-height: 2.5em; font-family: verdana, arial, times new
          roman; color: #68570a; padding-top: 15px; padding-bottom:
          20px; padding-left: 20px; padding-right: 20px; margin-left:
          10px; margin-right: 10px; border: 1px solid #CCCCCC;}
Html:
          <DTD ecc.>
          <html>
          <head>
          Meta tags, ecc.
          </head>
          <body>
 
	 <div class="menusx"> TESTO </div>
 
   	 <div class="documento"> TESTO </div>
 
	 <div class="documento"> TESTO </div>
          <div class="menudx"> TESTO </div>
          </body>
          </html>
Grazie
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 due laterali posizionate in maniera assoluta, ma finiscono sotto.
Riesci a metterlo online da qualche parte?
Non vedo errori, a prima vista, ma non ho nemmeno voglia di ricostruire 
una pagina web rimontando i pezzi solo per provare. :)
Bye.


 due laterali posizionate in maniera assoluta, ma finiscono sotto.
Per fare quello che vuoi (3 colonne fixed-liquid-fixed) di solito si usa 
come struttura l'holy grail o una sua derivazione semplificata:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
Se poi questa struttura va innestata dentro ad altro, per cui la colonna 
di sx non è attaccata al bordo sx, esiste un bug su ie<=7 di cui tenere 
conto (esiste soluzione purtroppo per nulla elegante).
-- 
Z.


 Scusate, vi devo chiedere una cosa da principiante.
    ..._skipped!_
<html><head>
<style>
#corpo {position: relative; text-align: center; margin: 0em auto; width: 98%}
#corpo-colonna1 {
 border: #000000 2px solid; position: absolute;
 background-color: #99ccff; margin: 0px; width: 160px;
 top: 0px; left: 0px;}
#corpo-colonna2 {border: #ff0000 2px solid; background-color: #99eeff; margin: 0px 160px;}
#corpo-colonna3 {
 border: #000000 2px solid; position: absolute;
 background-color: #99ddff; margin: 0px; width: 160px;
 top: 0px; right: 0px;}
</style>
</head>
<body>
<div id="corpo">
<div id="corpo-colonna1">posizione assoluta SX</div>
<div id="corpo-colonna2">colonna centrale</div>
<div id="corpo-colonna3">posizione assoluta DX</div>
</div>
</body>
</html>
-- 
    * b *
  *   y   *
*   Piero   *
#v+
Guardo il cielo e sorrido, spero in una foto satellitare.
#v-



Ti ringrazio, gli darò un occhio per capire meglio i CSS. sono arrivato 
alla soluzione con lo spunto di P/ero, ma ne è risultata una visione 
empirica dei CSS. vorrei capire meglio.


Ho elaborato ciï¿œ che mi hai proposto come soluzione ed ho ottenuto un 
ottimo risultato lavorandoci stanotte alcune ore.
Il punto ï¿œ che in definitiva mi torna molto elaborato e poco chiaro 
capire come si realizza l'impaginazione (posizioni, ecc.) con i CSS.
Ho perï¿œ il dubbio che vi possano essere problemi al test della pagina su 
definitivamente ottenuta, su browser differenti.
Conto comunque di fare molti test, ma mi sarebbe utile se qualcuno mi 
potesse fornire dei link a risorse chiare da capire sui CSS.
Dettagli:
- Ho tolto il relative da body (come era indicato sul testo di cui 
dispongo) e funziona lo stesso.
- Ho notato che togliendo  'top: 0px; left: 0px;' dal menu sinistro e 
'top: 0px; right: 0px;' dal menu destro, salta tutto, ma non ho 
capito/trovato come funzionano.
- Inoltre mi pare marchingegnoso il dover giocare con margin e padding 
sulla colonna centrale per regolare la larghezza di quella laterale e 
per questo ti chiedo se si fa sempre e perchï¿œ.
- Infine segnalo che ho collocato sopra e sotto due toolbar (fatte in 
casa con i CSS), usando position="relative".
Ti ringrazio comunque per gli utili spunti che mi hai fornito.
