HTML personalizzare i valori di rientro di un elenco

andrea2002 · 4 Feb 2010

Sono alle prese con un elenco puntato in HTML, desidero modificare i valori di rientro che di default sono eccessivi. Ecco il codice:

<td class="testo12"><ul>
<li>
<div align="left">Oggi sono andato a fare la spesa</div>
</li>
</ul></td>

Il testo contenuto nella celle è di diverse righe e vorrei che tutte distassero dal bordo sinistro 10 px.

Ti ringrazio.
Ciao
Andrea

borgo italia · 4 Feb 2010

ciao,
prova così

HTML:

<html>
<head>

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
.sposta{
margin-left: -20px;

}
-->
</style>
</head>

<body>
<table width="100%"  border="1" cellpadding="0" cellspacing="2" bordercolor="#FF0000">
  <tr>
    <td>
	<ul>
		<li class="sposta">
			<div align="left">Oggi sono andato a fare la spesa</div>
		</li>
	</ul>
	</td>
  </tr>
  <tr>
    <td>
	<ul>
		<li>
			<div align="left">Oggi sono andato a fare la spesa</div>
		</li>
	</ul>
	</td>
  </tr>
</table>

<ul>
<li>
<div align="left">Oggi sono andato a fare la spesa</div>
</li>
</ul>
</body>

la prima scritta in alto è più vicina al bordo

p.s. dimenticavo
io ho messo -20px, però devi fare delle prove

andrea2002 · 4 Feb 2010

Ho risolto tutto perfettamente grazie ai tuoi conbsigli.
Ho impostato il valore a "-22"
Grazie mille !!!
Ciao
Andrea

MarcoGrazia · 8 Feb 2010

Ma perché usi div dentro l'elenco?

borgo italia · 8 Feb 2010

ciao
marcograzia ha ragione, io ho fatto un copia/incolla senza pensarci.

dimenticavo:
basta che, eventualmente, mettere l'allineamento nel css

andrea2002 · 8 Feb 2010

A dir la verità me l'ha fatto Dreamweaver; perchè tu come lo avresti fatto?
Grazie mille
Ciao
Andrea

MarcoGrazia · 8 Feb 2010

Nel modo corretto

Gli editor come quello tendono ad essere prolissi e semanticamente errati.
Se usi i fogli di stile non usare attributi di html come align=left ma usa i fogli di stile.
Ti bastava dichiarare all'inizio li {text-align: left} per avere tutto quello che c'era dentro gli elenchi puntati a sinistra e rendere il documento più leggero

borgo italia · 8 Feb 2010

ciao
marcograzia mi ha preceduto
anche se (credo) che non serva (ne il div ne il css) in quanto di default l'allineamento è a sinistra

andrea2002 · 8 Feb 2010

E' vero di defaul l'allineamento è sempre a sinistra, ma se non lo specifico il testo viene centrato e non capisco perchè dato che tale allineamento non è presente.

Grazie
Ciao
Andrea

MarcoGrazia · 9 Feb 2010

guarda è vero che l'allineamento dovrebbe essere a sinistra in alto, ma come hai notato anche tu non è sempre così, quindi la cosa migliore è sempre quella di specificarlo esplicitamente, anche perché per centrare il layout nella pagina per colpa di Internet Explorer bisogna specificare text-align: center e poi margin: 0 auto.
quindi il tuo layout può essere realizzato così:

Codice:

<style type="text/css">
<!--
body {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        background-color: #fff;
        text-align: center;
        paddin: 0;
        margin: 0 auto;
}
td,th {
        padding: 2px;
        empty-cell: show; /* mostra le celle anche se vuote */
}
table {
        width: 100%;
        border: 1px solid #000;
        border-spacing: 2px;
}

.sposta{margin-left: -20px;}
p, li {text-align: left;}
-->
</style>

Tieni presente che è sempre un bene definire alcune cose e non darle per scontate, per esempio il colore di sfondo, non è che tutti i browser usino il bianco in modo predefinito, io uso il verde mare perché una volta mi è capitato in una presentazione d un sito per un grosso cliente di aver dimenticato di settare il colore di sfondo e mi sono ritrovato il sito in rosso!
Da allora uso un colore di default assurdo proprio per ricordarmi di settare sempre colori di sfondo e di primo piano.

Ora la tua pagina diventa così:

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" dir="ltr" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Una serie di elementi in una tabella</title>

<style type="text/css" media="all">
body {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        background-color: #fff;
        text-align: center;
        paddin: 0;
        margin: 0 auto;
}
td,th {
        padding: 2px;
        empty-cell: show; /* mostra le celle anche se vuote */
}
table {
        width: 100%;
        border: 1px solid #000;
        border-spacing: 2px;
}

.sposta{margin-left: -20px;}
p, li {text-align: left;}
</style>
</head>

<body>
<table>
  <tr>
    <td>
	<ul>
		<li class="sposta">
			Oggi sono andato a fare la spesa
		</li>
	</ul>
	</td>
  </tr>
  <tr>
    <td>
	<ul>
		<li>
			Oggi sono andato a fare la spesa
		</li>
	</ul>
	</td>
  </tr>
</table>

<ul>
<li>
Oggi sono andato a fare la spesa
</li>
</ul>
</body>
</html>
[code]
quello che alla fine non ho ben compreso è l'uso di tutte quelle liste puntate che contengono testo.

borgo italia · 9 Feb 2010

quello che alla fine non ho ben compreso è l'uso di tutte quelle liste puntate che contengono testo.

era solo per far vedere lo spotamento, si trattava solo del copia/incolla del primo codice postato con e senza css (spero che andrea2001 non abbia pedissequamente ricopiato):moira:

andrea2002 · 9 Feb 2010

Ti ringrazio moltissimo per la cortese risposta.
Mi è stata davvero utile.
Grazie mille ancora !!
Ciao
Andrea

MarcoGrazia · 10 Feb 2010

borgo italia ha scritto:
era solo per far vedere lo spotamento, si trattava solo del copia/incolla del primo codice postato con e senza css (spero che andrea2001 non abbia pedissequamente ricopiato):moira:

Ah! Be visto che ti adora, immagio che l'abbia fatto

Ma non capisco perché lo spostamento lo fai in quel modo, puoi pur sempre usare i comandi specifici per le proprietà delle liste per poterlo fare.

Cerca

Cerca

HTML personalizzare i valori di rientro di un elenco

andrea2002

Nuovo Utente

borgo italia

Super Moderatore

andrea2002

Nuovo Utente

MarcoGrazia

Utente Attivo

borgo italia

Super Moderatore

andrea2002

Nuovo Utente

MarcoGrazia

Utente Attivo

borgo italia

Super Moderatore

andrea2002

Nuovo Utente

MarcoGrazia

Utente Attivo

borgo italia

Super Moderatore

andrea2002

Nuovo Utente

MarcoGrazia

Utente Attivo

Discussioni simili