una tabella sopra una tabella

**ale.mazzini** · 17-10-2012, 17:09

con i css si può posizionare una tabella sopra un'altra tabella?
o cmq un oggetto sopra
mi spiego
io ho una tabella con 2 celle verticali
in mezzo a questa devo inserire una tabella orizzontale con il suo colore

**Mich_** · 18-10-2012, 08:52

La risposta e` si`: si puo` fare.

Ma forse stai facendo errori semantici (uso della tabella per formattare), e questo complica le cose:
- rende piu` difficile programmare i CSS
- rende la pagina non-accessibile per chi non ha un browser visivo
- dequalifica la pagina/il sito nei motori di ricerca

Per sovrapporre due oggetti, in linea di massima questi:
- devono avere un posizionamento (di solito assoluto),
- e` utile che siano figli dello stesso padre (questo semplifica le cose),
- si usa l'attributo z-index (per definirne l'ordine)

**ale.mazzini** · 18-10-2012, 13:57

Originariamente inviato da Mich_
La risposta e` si`: si puo` fare.

Ma forse stai facendo errori semantici (uso della tabella per formattare), e questo complica le cose:
- rende piu` difficile programmare i CSS
- rende la pagina non-accessibile per chi non ha un browser visivo
- dequalifica la pagina/il sito nei motori di ricerca

Per sovrapporre due oggetti, in linea di massima questi:
- devono avere un posizionamento (di solito assoluto),
- e` utile che siano figli dello stesso padre (questo semplifica le cose),
- si usa l'attributo z-index (per definirne l'ordine)

interessante grazie per la risposta
nel frattempo mi documento meglio e faccio delle prove
se ho info posto qui

**ale.mazzini** · 18-10-2012, 16:14

niente mi sto intrecciando facendo dei gran casini
io sto cercando di creare le tabelle come si vede in allegato

**Mich_** · 18-10-2012, 17:12

Io nel tuo schema non vedo tabelle.
Le tabelle servono per intabellare dati, non per formattare

Io ci vedo un body che deve essere largo 100% (e anche l'html - potrebbe essere un oggetto diverso dal body).

Al suo interno vedo un blocco (<div>) largo 900px oppure min-width:900px.

Poi non so cosa siano le barre verticali: potrebbero essere dei blocchi affiancati (float:left).

Riassumendo:

codice:

HTML:
<body>
  <div id="wrapper">
    <div class="barravert">
      ...
    </div>
    <div class="barravert">
      ...
    </div>
  ecc
  </div>
</body>

CSS:
html, body {
  width: 100%;
}
#wrapper {
  min-width: 900px;
  height: ...    /* se serve */
}
.barravert {
  width: ...
  height: ...    /* se serve - potrebbe essere 100%, ma allora deve essere definito height nel wrapper */
  float: left;
}

**ale.mazzini** · 18-10-2012, 17:34

ok
ma perchè dai una largezza al body? cosi incide sulla tabella wrapper e cosi si esclude il min-width

mi interessava mettere la tabella wrapper al centro
cosi si potrebbe rislvere
position:absolute;
right:200px;
width:300px;

ora ho un dilemma enorme
come mettere una cella orizzontale che vada al centro?

codice:

<style> html, body { 
background-color: #000000; width: 90%; }
 
#wrapper { position:absolute; right:200px; width:300px; background-color: #FF0000; min-width: 900px; height: 200px; }

.content { background-color:#666666; width: 50px; height: 600px; float: left; } </style> 

 <div id="wrapper"> 
<div class="content">
 ... 
</div> 
<div class="content">
 ... 
</div> 
ecc 
</div>

**Mich_** · 18-10-2012, 18:30

Per centrare un oggetto in orizz., basta dargli margini automatici (prima l'ho dimenticato)
Nel caso specifico occorre aggiungere al wrapper margin: 0 auto;
Ma si puo` fare solo se il blocco che lo contiene ha dimensioni definite (ecco perche` occorre definire la width del body)

Tieni presente che e` un grave errore di semantica usare tabelle. Si usano blocchi, che di solito sono <div>

Il posizionamento assoluto e` un'arma a doppio taglio: se si puo` evitarlo e` meglio (il problema e` come si comporta la pagina quando l'utente usa dimensioni del brwoser diverse da quelle di test).

**ale.mazzini** · 18-10-2012, 21:34

Originariamente inviato da Mich_
Per centrare un oggetto in orizz., basta dargli margini automatici (prima l'ho dimenticato)
Nel caso specifico occorre aggiungere al wrapper margin: 0 auto;
Ma si puo` fare solo se il blocco che lo contiene ha dimensioni definite (ecco perche` occorre definire la width del body)

Tieni presente che e` un grave errore di semantica usare tabelle. Si usano blocchi, che di solito sono <div>

Il posizionamento assoluto e` un'arma a doppio taglio: se si puo` evitarlo e` meglio (il problema e` come si comporta la pagina quando l'utente usa dimensioni del brwoser diverse da quelle di test).

grazie!
grosso modo credo di aver capito
mi ridocumento e ci riaggiorniamo

**ale.mazzini** · 19-10-2012, 09:43

ero troppo ottimista
credo di non aver capito, volevo posizionare quella cella bianca (footer) sotto la metà dell'altezza delle tabelle verticali e che si ridimensioni in larghezza 100%

osserva questo

codice:

<style> 
html, body { background-color: #000000; width: 90%; } 
#wrapper { 
position:absolute; right:200px; width:300px; 
background-color: #FF0000; min-width: 900px; 
height: 400px; }
 
.content { background-color:#666666; width: 50px; 
height: 600px; float: left; }
 
.footer { background-color:#ffffff; width: 100px; 
height: 
100px; 
position:absolute; 
right:400px; 
width:500px; }

 </style> 

 <div id="wrapper"> 
<div class="footer">
</div> <div class="content">
 ...
 </div> 
<div class="content">
 ...
 </div> 
ecc 
</div>

**ale.mazzini** · 19-10-2012, 10:14

probabilmente dovrei usare i float: left e i clear: left
ma nn riesco ad individuare il modo

Discussione: una tabella sopra una tabella

Strumenti discussione

Ricerca discussione

Visualizza

una tabella sopra una tabella

Permessi di invio