incolonnamento rapido.. senza utilizzo di tabelle

**xnavigator** · 28-09-2007, 20:05

script: 1.4121 Sec
core: 0.0156 Sec
query: 0.9322 Sec
template: 0.0156 Sec
page: 1.3964 Sec

in pratica ho delle righe di testo cosi come stanno sopra. ( contenute tutte in elenchi ordinati[*]ecc )

i numeri che vedete si possono ottenre tutti uno sotto l'altro senza dover inserire delle tabelle necessariametne?

in pratica dovrebbb essere:

codice:

script:    1.4121 Sec 
core:      0.0156 Sec 
query:     0.9322 Sec 
template:  0.0156 Sec 
page:      1.3964 Sec

**webdemo** · 28-09-2007, 22:55

puoi ad esempio gestire con CSS

es:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>tabtab</title>

<style type="text/css">
<!--
li{
	list-style-type: none;
}
.tab1 {
	position:relative;
	top:20px;
}
.tab2 {
	left:200px;
	position:absolute;	
}
-->
</style>
</head>

<body>
<ul>
<li class="tab1">script: 
<li class="tab2">1.4121 Sec

<li class="tab1">core: 
<li class="tab2">0.0156 Sec

<li class="tab1">query: 
<li class="tab2">0.9322 Sec

<li class="tab1">template: 
<li class="tab2">0.0156 Sec

<li class="tab1">page: 
<li class="tab2">1.3964 Sec 
[/list]</body>
</html>

ciak

**xnavigator** · 29-09-2007, 10:14

grazie per l'esempio.. ma non so questa soluzione non mi piace tanto.. forse rimane da utilizzare le tabelle

ti dispiace comunque spiegarmi i css? top left?

scusami ma non li avevo mai utilizzati prima

**webdemo** · 29-09-2007, 15:02

potresti anche affiancare due div...

ma in realta' la scelta piu' corretta in questo caso e l'incolonnamento tabellare

ciak

**Mich_** · 01-10-2007, 09:41

Attenzione!!

Una lista non ordinata (<ul>) NON e` una buona soluzione dal punto di vista semantico.

Una soluzione piu` corretta e` usara una lista di definizioni (<dl>):

codice:

<dl>
  <dt>script: </dt>
  <dd>1.4121 Sec</dd>

  <dt>core: </dt>
  <dd>0.0156 Sec</dd>
  ...
</dl>

Questo oltre che rispettare la semantica, risulta in un codice piu` chiaro e leggero.

Poi si deve sistemare il CSS:

codice:

dl {
  ...
}
dt {
  width: 20em;      /* ad esempio */
  float: left;
}
dd {
  float: left;
}
dd:after {           /* occorre correggere per IE - vedi pillola sul clearing */
  height: 1px;
  clear: both;
}

Nota: l'uso dei posizionamenti appesantisce ed irrigidisce la pagina: se si puo` non usarli e` tutto di guadagnato.

I CSS fanno parte delle cose necessarie per una programmazione lato client corretta.
Vedi qualsiasi tutirial (ad esempio quello di HTML.it)

Discussione: incolonnamento rapido.. senza utilizzo di tabelle

Strumenti discussione

Ricerca discussione

Visualizza

incolonnamento rapido.. senza utilizzo di tabelle

Permessi di invio