div dentro tab

**stefanoi** · 20-03-2006, 14:44

ciao,
spero che qualcuno possa aiutarmi..

ho un div dentro una tabella, ma il contenuto (testo) essendo più lungo della tabella, mi sfora ed esce dalla stessa sovrapponendosi..

l'id ha stile:
#container{ position:relative; width:380px; height:220px; z-index:100; margin:10px;}

se serve posso fornirvi altre info più dettagliate..

ma nn so proprio da dove partire per risolvere il problema..

grazie, ciao

**andrea.paiola** · 20-03-2006, 15:24

Originariamente inviato da stefanoi
ma nn so proprio da dove partire per risolvere il problema..

è molto semplice: non puoi mettere un div dentro una tabella

**stefanoi** · 20-03-2006, 15:34

ho semplificato il contenuto ai soli elementi problematici.

la tabella esterna mi serve non solo come contenitore (potrei usare un div e altri div per ricrearmi l'header, due colonne affiancate centrali, e il footer, quest'ultimo con un clear) ma anche per andarmi a posizionare diversi elementi in vari tr e td che qui ho unito in una sola tr e un solo td, per semplificare..

ho usato bordi solid per la tabella, dashed (tratteggiata) per evidenziare i div.

come si potete vedere il conenuto del div è molto più lungo del div stesso, ed io ho bisogno che sia il div che la tabella contenitore si allunghino in altezza in proporzione al testo...

provando a eliminare l'attributo height dal div #container nel codice semplificato la tab mi si allunga come dovrebbe, ma non nella struttura del sito originale che sto costruendo è che è più complesso...

intanto eccovi l'html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{margin:0; padding:0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;

background-color:#FF7800;

}

/**/

#contenitore{
border-left:6px solid #FFCC00;
border-right:6px solid #FFCC00;
background-color:#FFFFFF;
width:770px;

}

#conenitoreLeft{width:180px;}

h1.titoloMenu{

font-family:arial,verdana,sans-serif;
background:#FF7800;
margin:0px;
font-size:11px;
letter-spacing:1px;
font-weight:bold;

color:#fff;
padding-right:10px;
height:18px;
text-align:right;
cursor

ointer;

}
h1.titoloMenu:hover{
font-family:arial,verdana,sans-serif;
background:#FFC000;
margin:0px;
font-size:11px;
letter-spacing:1px;
font-weight:bold;
height:18px;
color:#000;
padding-right:10px;
text-align:right;
cursor

ointer;

}

.titoloMenuOver{
font-family:arial,verdana,sans-serif;
background:#FFC000;
margin:0px;
font-size:11px;
letter-spacing:1px;
font-weight:bold;
height:18px;
color:#000;
padding-right:10px;
text-align:right;
cursor

ointer;

}

/* SOTTO MENU: */
ul.sottomenu {
width:168px;
list-style:none; /* elimino i punti elenco */
margin-top:0;margin-left:0; margin-right:0;margin-bottom:12px; padding:0; /* elimino i rientri delle liste */
}
ul.sottomenu li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
height:6px;line-height:6px; /* altezza del link: height e line-height devono avere il medesimo valore */
padding-top:6px;
padding-bottom:6px;
padding-right:2px;
}
ul.sottomenu li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.sottomenu li a:link, ul.sottomenu li a:visited {

border-top:0px solid #FFAE27;
border-bottom:1px dotted #FFAE27;
border-right:0px solid #f90;
border-left:0px solid #fff;

color:#787878;
font-family:verdana,arial,sans-serif;
font-size:10px;
font-weight:normal;
letter-spacing:1px;

text-align:right;

} /* colori per il link */
ul.sottomenu li a:hover, ul.sottomenu li a:active {
font-weight:normal;
text-align:right;
border-top:0px solid #FFAE27;
border-bottom:1px dotted #FFAE27;
border-right:0px dotted #f90;
border-left:0px solid #f90;
color:#000;
/*background-color:#FFE1AE;*/

} /* colori per l'effetto roll-over */

/* FINE SOTTOMENU */

td.centro{
padding-top:0;
padding-bottom:15px;
padding-left:4px;
padding-right:0;

}

</style>

</head>

<body>

</p>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="contenitore" style="border:2px solid #000; ">
<tr>
<td valign="top">

<style type="text/css">
body, td { font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px; }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
a:link { color:#33c }
a:visited { color:#33c }
/* excludes ns4 and other older browsers */
@media all {
h1, h2, p { margin:0 0 .8em 0 }
}

/* Specifications for container for layers to show/hide.
Most browsers need both width and height set. */
#container { position:relative; width:380px; height:220px; z-index:100; margin:10px; }
/* Include id's for all your layers here, with commas between. */
#lyr1, #lyr2, #lyr3 {
position:absolute; visibility:hidden; left:0; top:0; z-index:1 }
</style>
<script type="text/javascript">

// resize fix for ns4
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

// link style change
var cur_link;
function doLinkClass(lnk) {
if (lnk && lnk.blur) lnk.blur(); // remove marquee
if (!lnk || cur_link == lnk) return;
if (cur_link) cur_link.className = "done";
lnk.className = "on";
cur_link = lnk;
}

var cur_lyr; // holds id of currently visible layer
function swapLayers(lnk,id) {
doLinkClass(lnk);
if (cur_lyr) hideLayer(cur_lyr);
showLayer(id);
cur_lyr = id;
}

function showLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "visible";
}

function hideLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "hidden";
}

function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? getLyrRef(id,document): null;
if (el) el.css = (el.style)? el.style: el;
return el;
}

// get reference to nested layer for ns4
// from old dhtmllib.js by Mike Hall of www.brainjar.com
function getLyrRef(lyr,doc) {
if (document.layers) {
var theLyr;
for (var i=0; i<doc.layers.length; i++) {
theLyr = doc.layers[i];
if (theLyr.name == lyr) return theLyr;
else if (theLyr.document.layers.length > 0)
if ((theLyr = getLyrRef(lyr,theLyr.document)) != null)
return theLyr;
}
return null;
}
}

function init(id,lyr) {
var lnk = getElemRefs(id);
swapLayers(lnk,lyr);
}

</script>

<div id="header" style="border:2px dashed blue; ">
<ul>
<li id="liID0" onClick="changeClass('liID0', 'current');
changeClass('liID1', 'no'); "
class="current"> Mostra div 1 (default)
<li id="liID1" onClick="changeClass('liID1', 'current');
changeClass('liID0', 'no'); "
> Mostra div 2
[/list]
</div>

<div id="container" style="border:2px dashed green; ">
<div id="lyr0">
categoria: per la Creatività

titolo: Teatro

stato: in corso

programma: parte1

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

parte2

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

parte1

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

parte2

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

parte3

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

parte4

xxx sadkljasd saldsalkdsad saldsadasld asldaksdal sdaods aldsk asodaj sdaoj daojsd asjd aosjd asjd aosjd asjd aojs daojsdaosdaodiajhdoiadoaidhasodnada dsaj doaj doadaojd oasd alsj dajfw9uehrwnrnr324lj wlfe wojf lf afdla sdaodbwje worwoj fwoejf woef wojf l

periodo: settembre-maggio

ore/settimana: 6

fascia d'età: tutte

</div>
<div id="lyr1">
sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... sintesi... </div>

</div>

<script>init('lnk0','lyr0');</script></td>
</tr>
</table>
</body>
</html>

**stefanoi** · 20-03-2006, 15:36

Originariamente inviato da andrea.paiola
è molto semplice: non puoi mettere un div dentro una tabella

come no?! Io so che si può...

Mi scuso per la lunghezza del codice...

**Vincent.Zeno** · 20-03-2006, 16:39

Originariamente inviato da stefanoi
ho un div dentro una tabella, ma il contenuto (testo) essendo più lungo della tabella, mi sfora ed esce dalla stessa sovrapponendosi..

l'id ha stile:
#container{ position:relative; width:380px; height:220px; z-index:100; margin:10px;}

codice:

div#container {
width: 100%;
height: 100%;
}

funziona sia su IE che FF, se dai dimensioni fisse FF non si adatta ai contenuti....

Ciao

**stefanoi** · 20-03-2006, 16:49

Originariamente inviato da Vincent.Zeno

codice:

div#container {
width: 100%;
height: 100%;
}

funziona sia su IE che FF, se dai dimensioni fisse FF non si adatta ai contenuti....

Ciao

ho provato, ma non funziona...

**Vincent.Zeno** · 20-03-2006, 16:52

Originariamente inviato da stefanoi
ho provato, ma non funziona...

funge, funge...
evidentemente c'è un contrasto con altre regole da te imposte...
scusa ma non posso ripassarmi tutto il codice

**stefanoi** · 20-03-2006, 17:07

In realtà i due div sono cosi strutturati:

con style:

#container{ position:relative; width:380px; height:220px; z-index:100; margin:10px; }

#lyr1, #lyr2, #lyr3{ position:relative; visibility:hidden; left:0; top:0; z-index:1; }

prima #lyr aveva position:absolute. Cambiandola in relative, su IE la lunghezza della tab si adatta benissimo alla lunghezza del div visualizzato. Ma non su FF che continua a presentare lo stesso problema...

altri suggerimenti?

**stefanoi** · 20-03-2006, 17:18

Ricollegandomi a quanto appena detto, ovvero che sostituendo relative a absolute per i tre #lyr, è vero che risolvono il problema su IE (tra l'altro ho appena scoperto che eliminando l'attributo height in #contanier, il problema si risolve anche su FF !), però si pone il nuovo problema che i div, quando richiamati tramite link, si visualizzano a partire dalla posizione che il div caricato (anche se hidden) e precedente nell'html finisce.

In altre parole se il livello (div) caricato è il secondo o terzo, esso viene visualizzato dopo uno spazio (in altezza) vuoto, che è proprio pari dallo spazio che occuperebbe i div precedenti. Questo perchè i tre div non vengono caricati uno sopra l'altro, ma uno dopo (sotto) l'altro...

Come si fa?

**Toh!pisa** · 21-03-2006, 19:41

In quella pagina c'è di tutto e di più per tre contenuti in croce. Perché non ci fai un bel disegno di ciò che vuoi ottenere?

Discussione: div dentro tab

Strumenti discussione

Ricerca discussione

Visualizza

div dentro tab

Re: div dentro tab

Re: Re: div dentro tab

Re: div dentro tab

Re: Re: div dentro tab

Re: Re: Re: div dentro tab

Permessi di invio