Due o trecento cose da chiederti
La prima è che vuole dire Tuttala, l'hai scritto in homepage, poi per caso avevi un sito su Altervista secoli fa riguardo l'autocostruzione di aeromodelli?
Tornando in topic come si dice, mi chiedevo perché fai certe cose
ovvero: (in rosso le cose che non capisco)
<td
height="1659"><h2 align="center">
<strong><u>F-16 Kyosho</u></strong></h2>
<h2 align="center"><strong>Bella riproduzione del famoso caccia</strong></h2>
<br />
<p align="center"><img width="456" height="304" src="/immagini/F-16_Kyosho_01.jpg" alt="F-16 Kyosho 01" /></p>
<p>F-16 Fighting Falcon è uno dei modelli più riprodotti di sempre.<br />
Il modello arriva a casa già completo di tutto. Servi e ventola già installate. <br />
Il lavoro da fare è poco e seguendo le istruzioni non è difficile completarlo in breve tempo. Sono riprodotte le pannellature e perfino alcune rivettature. Belle le decals che gli conferisc
<p align="center"><a href="/file/Link.html" class="collegamenti" target="_top">Vai alla pagina dei link per trovare collegamenti inerenti all’articolo</a>
</span></p>
....snip.....
<br />
</td>
1659 pixel?
a che pro? Le celle hanno il bello che si adattano al contenuto quindi non serve.
I titoli, ovvero Hx sono in modo predefinito strong, ovvero in grassetto, quindi a che pro ripeterlo?
Inoltre perché usi sottolineare i titoli, le sottolineature sono state deprecate perché portano fuori strada, ovvero sono solo e soltanto per i link. A proposito nell'ultimo chiudi uno span di fatto mai aperto!
Detto ciò passo al probabile problema, prima cosa da document type dafinition (DTD) usa la HTML 4.0.1 non usare XHTML se devi usare codice "vecchio" ovvero align=center e simili, non è mica deprecato l'uso di vecchie DTD, diciamo solo "fuori moda"
Poi a parte l'uso di strong che però non inficia la visualizzazione mi chiedo perché vai a capo dopo un titolo o dopo un paragrafo, questi sono già elementi di blocco, ovvero dopo che li hai chiusi vanno a capo da soli, se vuoi aumentare la distanza tra uno e l'altro usa i fogli di stile, tanto ne hai già approntato uno, ti basta aggiungere due righette ed è fatta:
Codice:
@charset "utf-8";
.collegamenti{
color: #F00;
}
h1,h2,h3,h4,p {
margin: 0 1em 0 1em;
padding: 0.5em 0 0.5em 0;
}
Modificando il valore degli em aumenti o diminuisci lo spazio tra gli elementi e tra questi e il bordo.
Nota che ho usato margin per lo spazio dal bordo destro e sinistro della pagina e padding per lo spazio verticale tra gli elementi, il motivo è semplice, per un motivo che non conosco (errore, falsa interpretazione degli standard, vino adulterato) tutti i browser collassano, ovvero se usi margin tra elementi vicini questi non si sommeranno ma faranno una somma algebrica, di fatto elidendosi.
Detto ciò proseguo: se togli i break, cioè i br però avrai un problema, cioè visto che hai usato una sola cella (td) tutto ti si sposterà incasinandoti il layout della pagina, l'aternativa era usare una cella per ogni paragrafo e per ogni immagine, così non avresti avuto il problema che di fatto hai.
Alternative a parte questa? Sì non usare le celle ma usare solo i paragrafi nudi e crudi per impaginare la pagina, per esempio:
Codice:
<div id=contenitore">
<h2>F-16 Kyosho</h2>
<h3>Bella riproduzione del famoso caccia</h3>
<img width="456" height="304" src="/immagini/F-16_Kyosho_01.jpg" alt="F-16 Kyosho 01" />
<p>F-16 Fighting Falcon è uno dei modelli più riprodotti di sempre.<br />
Il modello arriva a casa già completo di tutto. Servi e ventola già installate. <br />
Il lavoro da fare è poco e seguendo le istruzioni non è difficile completarlo in breve tempo. Sono riprodotte le pannellature e perfino alcune rivettature. Belle le decals che gli conferiscono un’ottima riproduzione statica.<br />
Viste le ridotte dimensioni devono rimanere leggeri per volare bene. Mi sono trovato bene sia con le batterie Thunder Power 1320 che con le X-Power 1000. Il modello pesa poco più di 400 grammi senza le batterie. Diventa importante non esagerare con il peso delle batterie perché la spinta è sui 320 grammi (probabilmente si riesce a migliorare usando celle con 35C, anche se in questo momento non sono disponibili nei formati da 1000 mAh). Il consumo misurato a terra è di circa 16 A.<br />
Il modello è facile da lanciare, non ha un volo veloce ma è bello da vedere.<br />
Fa bella mostra di sé anche sul prato in attesa di andare in volo.<br />
Potrebbe essere un ottimo modello da principianti. L’unico problema abituarsi alle ridotte dimensioni. Oppure avere un po’ di esperienza con altri modelli, ecco che potrebbe essere un’ottima prima ventola. </p>
<p>Ecco il mio F-16 kyosho ricolorato ispirandomi alla vera livrea Tiger</p>
<img width="457" height="344" src="/immagini/F-16_Kyosho_02.jpg" alt="F-16 Kyosho 02 Tiger" />
<img width="455" height="341" src="/immagini/F-16_Kyosho_03.jpg" alt="F-16 Kyosho 03 Tiger" />
<p><a href="/file/Link.html" class="collegamenti" target="_top">Vai alla pagina dei link per trovare collegamenti inerenti all’articolo</a></p>
</div>
Ed ecco il semplice codice CSS per farlo funzionare (spero, non l'ho provato
)
Codice:
@charset "utf-8";
body {
background-color: fff;
color: #000;
font: 100 100% Verdana, Tahoma, Sans-Serif;
text-align: center;
}
.collegamenti{
color: #F00;
}
div#contenitore {
width: 960px;
border: 1px solid #000;
margin: 2em auto;
background-color: #ebebeb;
}
img {
border: 1px solid #000;
display: block;
margin: 1em;
}
h1,h2,h3,h4,p {
margin: 0 1em 0 1em;
padding: 0.5em 0 0.5em 0;
}
p {text-align: left;}
h2 {
border-bottom: 2px dashed red;
font-size: 1.6em;
}
h3 {font-size: 1.3em;}
Ti ho messo anche il colore di sfondo per una pagina bianca con colore del testo in nero, è importante darlo perché non tutti hanno il pc impostato come il tuo (ne so io che dieci anni fa ho fatta una presentazione su un pc datomi in prestito con settati lo sfondo in verdino e il colore in giallo...) ovviamente non è perfetto, ci sarà qualche errore, praticamente l'ho buttato giù mentre scrivevo l'articolo ma essendo una pagina elementare dovrebbe funzionare con pochi aggiustamenti.
img {display: block} serve a far divenire le immagini come elementi di blocco, così non devi metterle dentro un paragrafo per farle andare a capo.
Ad h2 ho dato una sottolineatura rossa a trattini, il colore lo puoi cambiare ma i trattini non dovrebbero trarre in inganno riguardo i link.
Per non usare una classe separata, al secondo titolo ho dato valore 3 (h3).
Il sito è font-size = 100% mentre per le modifiche della dimensione del font nei titoli ho usato gli em, il motivo della discrepanza è dovuto ai soliti prodotti Microsoft che non digeriscono bene l'uso di font dimensionati in em nel body. Il vino era decisamente cattivo
