box model con scritte rientranti

[Lucked]

dunque ho questo box model:

<p class="texts">
Indice:

1)Biografia

Ilpersonaggio

Simbolismo

2)Bibliografia

3)Link

</p>

vorrei che il personaggio e il simbolismo apparissero un po' piu a destra in quanto logicamente contenuti nella biografia...il css che uso è questo:

.texts {
float:left;

background: #eee;

border:1px solid #999;

color: #000;

/* padding: 0.5em;
margin: 0.5em; */
width: 80%;
font-size: 100%;
font-family: verdana; }

ho provato con i tag <ul> e[*] ma distrugge il box model...come fare?

[Mauro Accornero]

Temo tu abbia un po' di confusione sul box model, per il tuo caso direi che potresti utilizzare una lista non ordinata (ul) ma visto che hai delle sottovoci ti consiglierei di utilizzare una lista di definizione.
es.

Indice:
<dl> 
<dt>1)Biografia</dt> 
<dd>Ilpersonaggio</dd> 
<dd>Simbolismo </dd> 
<dt>Bibliografia</dt> 
<dt>Link</dt> 
</dl>

Il tag [b] è obsoleto dovresti usare strong, se "indice" è un titolo usa i tag per le testate (h1,h2,h3,h4,h5...) per formattare la lista non usare float, limitati a sistemare margine e padding ed eventualmente la grafica.

[Lucked]

Ciao, grazie...ma vorrei chiederti una cosa, mi consigli di usare la lista di definizione(non l'avevo mai vista) al posto della lista non ordinata perchè svolgono la stessa funzione? E poi cosi facendo, dovrei modificare la visualizzazione della lista di definizione via css, se ho capito bene?

[Mauro Accornero]

Esatto la differenza tra lista non ordinata e lista di definizione sta nel vantaggio di avere più tag da utilizzare per le regole css consentendo di attribuire stili ad elemeni <dd> e <dt> separatamente senza utilizzare classi o id. Con le sole modifiche all'html la lista dovrebbe apparire nidificata almeno con l'interlinea, con poche regole css è possibile rendere un menu di navigazione accessibile.