Peroblema con tabella

**piero06** · 03-05-2003, 17:42

Ho una tabella con tre colonne:
-in quella di sisnistra c'è il menù di destra che è frutto di un include file
-in quella di destra c'è il menù di destra ache questo frutto di un include file
- in quella centrale invece c'è il contenuto delle varie pagine

Il mio problema è quando in una pagina il contenuto è molto lungo, la tabella si allunga utomaticamente e allunga anche i due menù .

Come posso fare in modo che aumentando la colonna centrale le dimensioni , le due colonne si allunghino solo creando ad esempio uno spazio bianco dove invece si dovrebbe allungare e allungare anche il menù?

ciao

**sazeMaster** · 03-05-2003, 17:50

Sei italiano?

Magari se scrivi un attimino meglio posso aiutarti...così non si capisce nulla

**piero06** · 03-05-2003, 17:56

OK!

Scusate se non scrivo come un giornalista !

Scherzo :gren:

In una pagina in cui il contenuto è più lungo dei menù,le celle contenenti i menù si allungano e allungano il menù e allungando le celle del menù. Io vorreic he quando il contenuto supera di lunghezza il menù, sulla tabella ( del menù ) compaia uno spazio vuoto bianco o di qualsiasi sfondo per riempire lo spazio senza allungare la tabella .

Spero di essermi spiegato !

ciao

**Mackho** · 03-05-2003, 18:04

Originariamente inviato da piero06
OK!

Scusate se non scrivo come un giornalista !

Scherzo :gren:

In una pagina in cui il contenuto è più lungo dei menù,le celle contenenti i menù si allungano e allungano il menù e allungando le celle del menù. Io vorreic he quando il contenuto supera di lunghezza il menù, sulla tabella ( del menù ) compaia uno spazio vuoto bianco o di qualsiasi sfondo per riempire lo spazio senza allungare la tabella .

Spero di essermi spiegato !

ciao

scusa ma io non ho capito...

non hai un link di esempio?

**piero06** · 03-05-2003, 18:09

OK!

Aspetta che lo cerco!

**sazeMaster** · 03-05-2003, 18:13

Originariamente inviato da piero06
OK!

Scusate se non scrivo come un giornalista !

Scherzo :gren:

In una pagina in cui il contenuto è più lungo dei menù,le celle contenenti i menù si allungano e allungano il menù e allungando le celle del menù. Io vorreic he quando il contenuto supera di lunghezza il menù, sulla tabella ( del menù ) compaia uno spazio vuoto bianco o di qualsiasi sfondo per riempire lo spazio senza allungare la tabella .

Spero di essermi spiegato !

ciao

Basta creare una tabella che contenga il menù e allinearla in alto, dentro la tabella del menù. In questo modo anche allungandosi avrai 2 tabelle: la prima, quella con sfondo bianco che verrà allungata a seconda del contenuto della pagina, la seconda invece sarà una tabella che rimarrà sempre delle stesse dimensioni e sarà sempre allineata in alto.

Questo creare tabelle nelle tabelle si chiama ANNIDAMENTO.

**piero06** · 03-05-2003, 18:20

Grazie del consiglio ma forse ho trovato un tutorial con il link per fare ciò che indendevo :

http://pro.html.it/esempio/css/13/layout_pro7.html

Ma come faccio invece che avere lo spazio bianco ad avere un mio sfondo ?

ciao

**blakwolf** · 03-05-2003, 18:22

peccato che l'annidiamento non è valido secondo le direttive W3 e infatti provoca problemi giganteschi con i browser di 3a generazione specialmente in xml o xhml.

per sapere le alternative

www.constile.org

**piero06** · 03-05-2003, 18:33

Il codice completo è

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>
<title>HTML.it</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html {
height: 100%;
} 
body {
background-color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;

}

#box {
background-color: #FFFFFF;
background-image: url(sfondo.gif);
text-align: left;
width: 768px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto; 
height: 100%; 
}

#top {
background-color: #000066;
background-image: url(sfondo.gif);

}

#barretta {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
border-top: 2px solid #CCCCCC;
border-bottom: 2px solid #CCCCCC;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 2px;
}

#barretta a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
margin-right: 2px; 
}

#barretta a:hover {
color: #000000;
background-color: #FFFF66;
text-decoration: none;
}

#left {
background-color: #CCCCCC;
background-image: url(sfondo.gif);
float: left;
width: 130px; 
height: 100%;
margin: 0px;
}

#middle {
background-color: #FFFFFF;
width: 508px;
float: left;
height: 100%;
margin: 0px;
}

#right {
background-color: #FF66FF;
background-image: url(sfondo.gif);
background-repeat: repeat; 
float: left;
width: 130px; 
height: 100%;
margin: 0px;
}

.homepage {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
padding-left: 1px;
border-bottom: 1px solid #000000;
}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
}

.menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #6699FF;
display: block;
width: auto;
border-bottom: 1px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
border-top: 1px solid #FFFFFF;
padding: 1px;
}

.menu a:hover {
background-color: #FFFF66;
}

.preferiti {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #a0bcd9;
padding: 5px 1px 1px 1px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
line-height: 1.5em;
}

.testopref {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background-color: #21528e;
padding: 2px 1px 2px 1px;
}

#ricerca {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background-color: #21528e;
text-align: center;
margin: 0px;
width: auto;
padding-top: 2px;
padding-bottom: 5px;
}


#ricerca img {
vertical-align: middle;
}
form {
margin: 0px;
padding: 0px;
}

input {
vertical-align: middle;
}

#pillola {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
padding: 5px 3px 5px 3px;
background-color: #acd0e6;
}

.classpill {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
}

#contenuto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 490px;
margin-right: 9px;
margin-left: 9px;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}

#contenuto img {
float: right;
margin-left: 3px;
}

#articoli {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
width: 490px;
margin-right: 9px;
margin-left: 9px;
margin-top: 15px;
}

#articoli img {
float: left;
margin-right: 5px;
border: 1px solid #000000;
}

.titoletto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF;
font-weight: bold;
}

.descrizione {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}


-->
</style>
</head>
<body>
<div id="box">
<div id="top">
[img]layimg/logo_pro.gif[/img]
</div>
<div id="barretta"> CD| CORSI| LIBRI| 
SHOP| NEWSLETTER| B2B| NEWS| 
PRO| HOSTING| ADSL| PROGR.| 
LINUX| FLASH| ASP| PHP| 
CGI| GIF| FONT| HOMEPAGE 
</div>
<div id="left">
<div class="homepage">Home page</div>
<div class="menu"> 
Pillole
Grafica
Leggi e lavoro
Linguaggi
Multimedia e 3D
Software
Web Design e contenuti
Web promotion
Forum
Area download
Torna ad HTML.it
</div>


</p>
<div class="preferiti">
I tuoi preferiti [img]layimg/what.gif[/img] [img]layimg/on.gif[/img]
</div>
<div class="testopref"> 
Non hai salvato nessun articolo.


Per aggiungere un articolo ai preferiti clicca sull'icona accanto al 
titolo dell'articolo letto.
</div>
<div class="preferiti"> Elimina gli articoli letti

Elimina tutti gli articoli

</div>


</p> 
</div>
<div id="middle">
<div id="ricerca">
<form action="#" method="get">
Ricerca un termine: 
<input type="text" name="textfield" />
[img]layimg/cerca.gif[/img] 
</form>
</div>
<div id="pillola"> [img]layimg/tips_anim.gif[/img]Pillola: 
<span class="classpill">Posizionare immagini o testo in punti precisi della 
pagina </span></div>
<div id="contenuto">
<h1>Approfondimenti di Web Publishing</h1>


[img]layimg/home_piuvotati.gif[/img][img]file:///D|/Cesare/zeromedia/layimg/home_piuvisti.gif[/img][img]file:///D|/Cesare/zeromedia/layimg/home_piurecenti_on.gif[/img]</p>
<p class="imgart"></p>
</div>
<div id="articoli"> 


[img]layimg/dreamweaver.gif[/img]<span class="titoletto">Banner 
animato con l'estensione Banner Image Builder </span>

<span class="descrizione">Creiamo un banner animato con Dreamweaver e 
l'estensione Banner Image Builder</span>

<span class="descrizione">Categoria: Dreamweaver </span></p>


[img]layimg/dmw-mx.gif[/img]<span class="titoletto">Il 
nuovo Dreamweaver MX </span>

<span class="descrizione">Novit&agrave;, pregi e difetti del nuovo editor 
HTML di Macromedia

Categoria: Dreamweaver</span></p>

</div> 
</div>
<div id="right"> </div>
</div> 
</body>
</html>

**blakwolf** · 03-05-2003, 18:37

scusa ma tu non usi le tabelle

Discussione: Peroblema con tabella

Strumenti discussione

Ricerca discussione

Visualizza

Peroblema con tabella

Permessi di invio