passare dalle tabelle ai css

**Simon** · 28-05-2005, 23:27

ciao a tutti.

Vorrei fare una pagina web utilizzando i fogli di stili.
So fare la pagina utilizzando le tabelle, ma vorrei provare a farla con i fogli di stile.

la pagina che voglio fare ha questa struttura

TITOLO (centrato nella pagina)
SOTTOTITOLO ( centrato nella pagina)
TESTO giustificato
NOTE AL TESTO centrate nella pagina

se usassi le tabelle la farei cosi

codice:

  <table width="80%" align="center">
   <tr>
    <td align="center">
     TITOLO
	</td>
  </tr>
 <tr>
    <td align="center">
    SOTTOTITOLO
	</td>
  </tr>
  <tr> 
   <td valign="top" align="center">
     <p align="justify">TESTO GIUSTIFICATO</p>
    </td>
  </tr>
   <tr>
    <td align="center">
    CONCLUSIONI 
	</td>
  </tr>
</table>

sto provando con i fogli si stile, ma non riescoad ottenere la stessa impaginazione.

il codice che sto usando e'un foglio esterno fatto cosi

codice:

.unnamed1 {
    font-family: "book antiqua", "times new roman";
    font-size: 11pt;
    font-weight: normal;
    font-style: normal; 
    line-height: 18pt;
    text-align: justify;
}
.unnamed2 {
    font-family: "book antiqua", "times new roman";
    font-size: 10pt;
    font-weight: normal;
    font-style: normal; 
    line-height: 18pt;
    text-align: center;
}

TD
{
    font-family: "book antiqua", "times new roman";
    font-size: 11pt;
    text-align: justify;
}

e poi nel corpo della pagina ho messo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="it">
<head>
 <link href="stile2.css" rel="stylesheet" type="text/css">
  <style type="text/css">
   body{
 
    background: #fff url(foto.jpg);
    background-attachment: fixed
   }
   A:link, A:visited { text-decoration: none }
   </style>
 </head>
<body>
   <span class="unnamed2">TITOLO</span>


   <span class="unnamed2">SOTTOTITOLO</span>


    <span class="unnamed1">
      TESTO GIUSTIFICATO
     </span>


     <span class="unnamed2">
       CONCLUSIONI
     </span>
</body>
</html>

cosa sto sbagliando?????

grazie x l'aiuto
simo

**luxxa** · 29-05-2005, 01:47

Ciao,
l'errore è nella scelta del tag span.
Per ottenere il tuo risultato dovresti utilizzare al posto di <span> il tag <div>, in quanto:

1) <span> viene usato per marcare solo piccole porzioni di testo che si trovano il più delle volte sulla stessa riga e per questo non aggiunge

2) <div> viene usato invece per separare intere divisioni del testo tant'è che la sua chiusura provoca un

quindi ricapitolando se sostituisci:

<span class="unnamed2">TITOLO</span>

<span class="unnamed2">SOTTOTITOLO</span>

<span class="unnamed1">
TESTO GIUSTIFICATO
</span>

<span class="unnamed2">
CONCLUSIONI
</span>

con

codice:

<body>
   <div class="unnamed2">TITOLO</div>
   <div class="unnamed2">SOTTOTITOLO</div>
    <div class="unnamed1">
      TESTO GIUSTIFICATO
     </div>
     <div class="unnamed2">
       CONCLUSIONI
     </div>
</body>

dovresti ottenere proprio il tuo risultato.
ciao,
luxxa

**andrea.paiola** · 29-05-2005, 10:31

Originariamente inviato da luxxa
1) <span> viene usato per marcare solo piccole porzioni di testo che si trovano il più delle volte sulla stessa riga e per questo non aggiunge

2) <div> viene usato invece per separare intere divisioni del testo tant'è che la sua chiusura provoca un

errato: div definisce delle sezioni di pagina ed è un elemento di blocco (per quello va a capo) e infatti e raggruppa degli elementi di blocco
span definisce delle sezioni di pagina ed è un alemento inline e raggruppa degli elementi inline

**Action Slip!!!** · 29-05-2005, 11:56

prova cosi;

codice html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
@import url("stylecss.css");
</style>
</head>
<body>
<div id="contenitore">
<div id="titolo"><h2>titolo</h2></div>
<div id="sottotitolo"><h3>sottotitolo</h3></div>
<div id="testogiustificato">testogiustificato ecc..</div>
<div id="conclusioni">conclusioni</div>

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

css:

html,body{
margin:0;
padding:0;
height:100%;
}

body{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center;
}

div#contenitore{
width:600px;
margin:0 auto;
position:relative;
left:50%;
margin-left:-300px;
border: 1px solid #000000;

}
div#titolo{
height: 50px;
border: 1px solid #003399;
}
div#sottotitolo{
height: 35px;
border: 1px solid #003399;
}
div#testogiustificato{
text-align: justify;
border: 1px solid #000000;

}
div#conclusioni{
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #000000;
}

Spero di non aver commesso errori.

**Simon** · 31-05-2005, 09:26

grazie.
ho provato il codice e fa proprio quello che volevo.
grazie. ho capito!

ciao
simone

**Simon** · 31-05-2005, 10:34

Action Slip ho provato il codice che mi hai scritto e ho provato la validazione e avendo all'interno del testo dei link ad altri siti avendo messo

codice:

 www.html.it

mi dice che non e' valido l'attributo TARGET all'interno dello STRICT....sono curioso di capire perche' hai usato questa dichiarazione

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

e non invece

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" xml:lang="it" lang="it" dir="ltr">

che mi permette di usare l'attributo target.
infatti cosi' la pagina mi viene perfettamente validata.

ciao & grazie per le spiegazioni
simo

**Simon** · 31-05-2005, 10:51

Scusate...ma sono ancora io!

ho provato il codice di Action Slip e facendo delle modifiche ho aggiunto nel body del foglio di stile esterno la possibilita' di avere la barra di scorrimento colorata ( anche se so che non e' valida w3c) e un'immagine di sfondo fissa quando scorro il testo....beh non ne vuole sapere di tenere l'immagine fissa, la vedo ma scrolla con il testo, e sopratutto non ne vuole sapere di colorare la barra di scorrimento.
ho provato il codice in una pagina e funziona, ma se lo allego al foglio di stile esterno non funziona piu'...mi sembra assurdo.

il codice che ho aggiunto nel body e'

codice:

body{ 
SCROLLBAR-FACE-COLOR:#ffffff; 
SCROLLBAR-TRACK-COLOR:#ffffff; 
SCROLLBAR-ARROW-COLOR:#000000; 
SCROLLBAR-SHADOW-COLOR:#fffffff; 
SCROLLBAR-HIGHLIGHT-COLOR:#ffffff; 
SCROLLBAR-3DLIGHT-COLOR:#ffffff; 
SCROLLBAR-DARKSHADOW-COLOR:#000000; 
background: white url(sfondo.jpg);
background-attachment: fixed;
font-family: "book antiqua", "times new roman"; 
font-size: 11pt; 
text-align:center; 
}

grazie!
simo

**andrea.paiola** · 31-05-2005, 11:20

tieni conto che le regole successive sovrascrivono le precedenti

**Mich_** · 31-05-2005, 11:50

Solo una piccola nota per ricordare che la legge 4/04 (che si applica ai siti delle pubbliche amministrazioni) richiede esplicitamente che si usi una DTD strict.

Ed e` noto da anni che l'aperura di nuove finestre (di qualsiasi tipo) e` contrario all'accessibilita`.

**Simon** · 31-05-2005, 12:13

capito per il DTD.

ma pero' non capisco perche' l'apertura delle finestre esterne sia contrario all'accessibilita' ( so che non le avete fatte voi le regole, ma vorrei sapere la vostra opinione al riguardo).
in pratica mi state dicendo che se nel mio sito linko un altro sito lo devo fare senza fare aprire una finestra esterna.
ok, pero' c'e' un piccolo problema, mi e' capitato di vedere siti che utilizzano javascript o altro che in pratica anche se tu usi il tasto INDIETRO per tornare alla pagina precedente rimani sempre nella loro homepage, questo e' ovviamente un problema per il mio sito, perche' se io voglio mette un semplice link ad un altro sito, e poi l'utente rimane 'intrappolato' nel sito che ho linkato, per me non va bene.

e poi Andrea. spiegami per favore perche' mi dici che le regole nuove sovrascrivono le precendenti. ti riferisci al DTD O al fatto che non riesco a colorare la barra con il codice che ho scritto e che nemmeno lo sfondo mi rimane fermo.

perdonami ma non ho capito.

grazie
ciao
simo

Discussione: passare dalle tabelle ai css

Strumenti discussione

Ricerca discussione

Visualizza

passare dalle tabelle ai css

dichiarazione strict o transitional?

Permessi di invio