Spazio vuoto al fine della tabella CSS e il testo successivo

**HCL** · 15-12-2008, 00:35

Nella visualizzazione di una pagina, con testo e tabelle, alla fine della tabella rimane uno spazio vuoto di diverse righe.

Ho cercato sul Forum se esistesse un caso precedente, ma non ho rintracciato nulla.

Questa è la pagina di test per osservare lo strano comportamento:
http://www.mostachetti.net/test/test.html

Questo è l'HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Xxxx xxx xxx</title>
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
</head>
<body>

<div class="container">
<div class="header">
<div class="title">
<h1>In hac habitasse</h1>
</div>
</div>

<div class="main">
<div class="content">
<h1>Sed vulputate elementum nisl</h1>

In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum.</p>

Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

<h1>Questi cristalli risultano composti da:</h1>

<div id="container">

<div class="tabella_sx_15" style="top: 0px;">Contenuto</div>
<div class="tabella_dx_15" style="top:-19px;">%</div>

<div class="tabella_sx_15" style="top:-20px;">Acqua</div>
<div class="tabella_dx_15" style="top:-39px;">18,539 </div>

<div class="tabella_sx_15" style="top:-40px;">Acido carbonico</div>
<div class="tabella_dx_15" style="top:-59px;">1,109</div>

<div class="tabella_sx_15" style="top:-60px;">Cloro</div>
<div class="tabella_dx_15" style="top:-79px;">37,666</div>

</div>

Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam</p>

Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat.</p>

</div>

<div class="sidenav">
<h1>Frutta</h1>
<ul>[*]xxx[*]yyy[/list]
<h1>Piante</h1>
<ul>[*]zzz[/list]
</div>

<div class="clearer"><span></span></div>
</div>

</div>
</body></html>

================================================== ======================

Mentre questo è il codice CSS:

/*
Template name: Coffee N Cream
Template URI: http://templates.arcsin.se/coffee-n-...site-template/
Release date: 2006-08-24
Description: A smooth coffee style template.
Author: Viktor Persson
Author URI: http://arcsin.se/

This template is licensed under a Creative Commons Attribution 2.5 License:
http://templates.arcsin.se/license/
*/

/* standard elements */
* {
margin: 0;
padding: 1px;
}
a {
color: #c60;
}
a:hover {
color: #C60;
text-decoration:none;
}
a:link {
color: #C60;
text-decoration:none;
}
a:visited {
color: #C60;
text-decoration:none;
}
body {
background: #655A46 url(img/bg.gif);
color: #400;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
h1 {
font-size: 1.4em;
margin-bottom: 4px;
}
code {
background: #FFE;
border: 1px solid #EED;
border-left: 6px solid #938262;
color: #554;
display: block;
font: normal 1.1em "Lucida Sans Unicode",serif;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}
blockquote {
background: url(img/quote.gif) no-repeat;
color: #666;
display: block;
font: normal 1.3em "Lucida Sans Unicode",serif;
padding-left: 28px;
}
h1,h2,h3 {
color: #654;
padding-top: 6px;
}

/* misc */
.clearer {
clear: both;
}

/* structure */

#container {position: relative;}
#container div {border: 1px solid black;}
#container div {margin: 0; padding-left: 3px; padding-right: 3px; }

.container {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 780px;
}

.tabella {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 300px;
}

.tabella_sx_15 {
position: relative;
width: 200px;
height: 15px;
left: 0px;
}

.tabella_dx_15 {
position: relative;
width: 100px;
height: 15px;
left: 207px;
}

/* header */
.header {
background: url(img/bgheader.gif) repeat-x;
height: 120px;
margin: 0 auto;
width: 760px;
}

/* title */
.title {
padding: 32px;
}
.title h1 {
color: #E4DBCF;
font: normal 3.4em "Lucida Sans Unicode","Trebuchet MS",sans-serif;
}

/* navigation */
.navigation {
background: #FFF url(img/bgnavigation.gif) repeat-x;
font: bold 1.2em Verdana,sans-serif;
height: 44px;
margin: 0 auto;
padding: 0 18px;
width: 725px;
}
.navigation a {
color: #543;
text-decoration: none;
padding: 3px 4px;
margin-right: 12px;
line-height: 44px;
}
.navigation a:hover {
background: #CEBDA1;
color: #420;
}

/* main */
.main {
clear: both;
padding: 0 10px 12px 28px;
}

/* sub navigation */
.sidenav {
float: right;
width: 218px;
}
.sidenav h1 {
background: #BCB39F url(img/sidenavh1.gif) repeat-x;
border-bottom: 1px solid #999;
border-top: 1px solid #CCC;
color: #4A4A44;
font-size: 1.2em;
height: 22px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
margin: 0;
padding: 0;
}
.sidenav li {
border-bottom: 1px solid #A98;
border-top: 1px solid #DDC;
list-style: none;
}
.sidenav li a {
background: #CCC3AF;
color: #554;
display: block;
padding: 2px 4px 2px 12px;
text-decoration: none;
}
.sidenav li a:hover {
background: #D6CCB9;
color: #654;
}

/* content */
.content {
padding-top: 12px;
float: left;
width: 68%;
}
.content .descr {
color: #987E57;
font-size: 1.1em;
margin-bottom: 6px;
}
.content li {
list-style: url(../img/li.gif);
margin-left: 18px;
}

/* footer */
.footer {
background: #958463 url(img/bgfooter.gif) repeat-x;
color: #FED;
font-size: 1.1em;
line-height: 40px;
margin: 0 auto;
text-align: center;
width: 760px;
}
.footer a {
color: #FFD;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}
.footer .left, .footer .right {padding: 0 12px;}
.footer .right, .footer .right a {color: #C0B8A6;}
.footer .right a:hover {color: #FFE;}

/* floats */
.left {float: left;}
.right {float: right;}
.center {float: center;}
.clearer {clear: both;}

================================================== ============

Ringrazio di cuore per l'aiuto.
Giancarlo

**cavicchiandrea** · 15-12-2008, 01:00

Sorry

**digital00** · 15-12-2008, 01:56

Allora:
1 - ti consiglio di non chiamarlo #container quando esiste già un .container
2 - Non mi sembra carino e ordinato utilizzare il posizionamento (position: relative) per fare una tabella. Puoi usare benissimo dei div e l'attributo float.
3 - Aggiungendo height: 80px a #container risolvi. Ho già testato con Firebug.

Sciao

**HCL** · 15-12-2008, 22:43

Nel CSS ho sostituito il #container con
#carnauba1 {position: relative; height: 80px ;}
#carnauba1 div {border: 1px solid black;margin: 0; padding-left: 3px; padding-right: 3px;}

e quindi nell'HTML ho sostituito <div id="container"> con <div id="carnauba1"> .

Funziona perfettamente, ma l'height 80px vale solo per questa tabella, quando inserisco una tabella maggiore o minore devo creare un carnauba2 e poi un carnauba3 etc. cadauno con il suo height.

Il fatto che lo avessi chiamato #container è dovuta al fatto che si trattava di un copia-incolla, e non avevo notato i due nomi identici.

Di fatto sono totalmente a digiuno di CSS, ma quando trovo un esempio semplice e chiaro so poi svilupparlo.

Se non ti dispiace, scrivermi un esempio del CSS con i div e l'attributo float di cui parli e di come si inserisce il richiamo nell'HTML mi renderesti un grande favore.

Ho cercato manuali per il CSS in rete, ma ho trovato generalmente testi in inglese, che non parlo, che mi creano più confusione che aiuto.

**ricman** · 16-12-2008, 09:44

Ma soprattutto... non vedo tabelle... una volta tanto che che sembra ci siano dati tabellari usiamole...

**HCL** · 17-12-2008, 01:39

Originariamente inviato da ricman
Ma soprattutto... non vedo tabelle... una volta tanto che che sembra ci siano dati tabellari usiamole...

Non capisco cosa vuoi dire.

**ricman** · 17-12-2008, 09:53

Originariamente inviato da HCL
Non capisco cosa vuoi dire.

..che quando si intabellano dati (come mi sembra di capire dal tuo esempio) si usa il tag Table

**HCL** · 17-12-2008, 12:03

Purtroppo, come avevo scritto nel primo post, sono a digiuno di nozioni sul CSS, oggi apprendo che esiste il tag Table, ma di fatto non lo conosco, e non saprei come usarlo.

Avevo chiesto un breve esempio (funzionante) 10/15 righe del CSS e dell'HTML relativo, perché credo che l'esempio valga più di mille parole.

Ma andrebbe bene anche sapere dove trovare un manuale HTML (in italiano) in internet.

Dirmi che le librerie ne sono piene non ha senso, in quanto risiedo nello stato del Ceara (Brasile), e l'attuale scarsa conoscenza del portoghese non mi consente di utilizzare eventuali manuali in tale lingua.

Ti ringrazio.

**ricman** · 18-12-2008, 16:03

Originariamente inviato da HCL
Ma andrebbe bene anche sapere dove trovare un manuale HTML (in italiano) in internet.

Intanto qui inizi con qualcosa di abbastanza buono...

http://basic.html.it/
http://css.html.it/
http://xhtml.html.it/

Esempio:

codice:

<table>
 <tr><th>Col 1</th><th>Col 2</th></tr>
 <tr><td>dati 1</td><td>dati 2</td></tr>
 <tr><td>dati 1</td><td>dati 2</td></tr>
</table>

**HCL** · 18-12-2008, 22:28

Originariamente inviato da ricman
Intanto qui inizi con qualcosa di abbastanza buono...

http://basic.html.it/
http://css.html.it/
http://xhtml.html.it/

Esempio:

codice:

<table>
 <tr><th>Col 1</th><th>Col 2</th></tr>
 <tr><td>dati 1</td><td>dati 2</td></tr>
 <tr><td>dati 1</td><td>dati 2</td></tr>
</table>

Ora incomincio finalmente a capirci qualcosa di più.
Ti ringrazio dei link, in particolare dell http://css.html.it/, dove i vari esempi mi stanno aiutando più che mille parole.

Giancarlo

Discussione: Spazio vuoto al fine della tabella CSS e il testo successivo

Strumenti discussione

Ricerca discussione

Visualizza

Spazio vuoto al fine della tabella CSS e il testo successivo

Permessi di invio