[HTML]Creare una pagina web senza usare tabelle [Archivio]

DesmoColo

29-04-2007, 16:01

Come da oggetto, mi hanno consigliato di usare solo div e span, o cmq di non usare tabelle. Il problema è che in questo modo tutti gli oggetti della mia pagina vengono messi in cascata, mentre io vorrei che fossero messi di fianco. Come posso risolvere senza ricorrere alle tabelle?

Leron

30-04-2007, 07:36

Come da oggetto, mi hanno consigliato di usare solo div e span, o cmq di non usare tabelle. Il problema è che in questo modo tutti gli oggetti della mia pagina vengono messi in cascata, mentre io vorrei che fossero messi di fianco. Come posso risolvere senza ricorrere alle tabelle?

i DIV li puoi allineare a destra, al centro o a sinistra usando i css

leggi qui

http://www.constile.org/template/nuovo_layout_a_tre_colonne/

DesmoColo

30-04-2007, 08:34

però mi vengono sempre uno sotto l'altro:
un div a sinistra, poi un div al centro ma sotto quello di prima...

Leron

30-04-2007, 08:48

se sono più grandi della larghezza della pagina è ovvio

se dai un size ai div e poi dai un float:left / float:right funziona tutto bene

e se non funziona hai sbagliato qualcosa :D

DesmoColo

30-04-2007, 12:00

OK, il problema era quello. Grazie:cool:

tutmosi3

01-05-2007, 17:54

Io pongo un'altra domanda.
Come mai questo astio verso le tabelle?
Ciao

Leron

01-05-2007, 18:41

Io pongo un'altra domanda.
Come mai questo astio verso le tabelle?
Ciao

perchè le tabelle non servono per impaginare, i div si

in generale (da html.it) :

1. le tabelle servono per dati tabellari, non per creare layout

2. i fogli di stile garantiscono una migliore separazione tra contenuti e presentazione e quindi:

o alleggerimento del codice html
o aumento della velocità di caricamento
o minori spese per la banda
o restyling e modifiche di layout sono molto più semplici per un sito ben strutturato

3. l'uso delle tabelle determina con forza l'ordine del codice html

4. i fogli di stile aiutano a mantenere la consistenza di un intero sito web

6. migliore accessibilità e visibilità verso media alternativi: palmari, cellulari, screen readers, text browsers e stampanti

in una risposta semplice: le tabelle servono per scopi diversi dalla definizione dei layout. per i layout ci sono strumenti più adatti.

tutmosi3

01-05-2007, 19:16

perchè le tabelle non servono per impaginare, i div si

in generale (da html.it) :

1. le tabelle servono per dati tabellari, non per creare layout

2. i fogli di stile garantiscono una migliore separazione tra contenuti e presentazione e quindi:

o alleggerimento del codice html
o aumento della velocità di caricamento
o minori spese per la banda
o restyling e modifiche di layout sono molto più semplici per un sito ben strutturato

3. l'uso delle tabelle determina con forza l'ordine del codice html

4. i fogli di stile aiutano a mantenere la consistenza di un intero sito web

6. migliore accessibilità e visibilità verso media alternativi: palmari, cellulari, screen readers, text browsers e stampanti

in una risposta semplice: le tabelle servono per scopi diversi dalla definizione dei layout. per i layout ci sono strumenti più adatti.

Leron, so benissimo quello che mi dici.
Avrei preferito che la risposta fosse arrivata da DesmoColo che nell'occasione avrebbe anche specificato la natura della sua pagina.
Ho peccato di mancanza di QUOTE.

Ciao

Leron

01-05-2007, 19:22

Leron, so benissimo quello che mi dici.
Avrei preferito che la risposta fosse arrivata da DesmoColo che nell'occasione avrebbe anche specificato la natura della sua pagina.
Ho peccato di mancanza di QUOTE.

Ciao

beh se quello che volevi fare è cercare conferma del fatto che molti aborrano le tabelle o i frame per "principio" non sapendone il motivo, questo lo so anche io :D

ma i motivi ci sono, o meglio più che dei motivi si tratta solamente di scegliere lo strumento più adatto per fare qualcosa

tutmosi3

01-05-2007, 19:29

beh se quello che volevi fare è cercare conferma del fatto che molti aborrano le tabelle o i frame per "principio" non sapendone il motivo, questo lo so anche io :D

ma i motivi ci sono, o meglio più che dei motivi si tratta solamente di scegliere lo strumento più adatto per fare qualcosa

Amico, so che molti prendono le tabelle come la peste nera.
Visto che DesmoColo è alle prime armi volevo approfondire questa sfumatura con lui.
Sono consapevole che se uno fa una pagina internet dove deve mettere una ricetta di cucina, al di fuori di un elenco puntato e poco altro non ci deve mettere.

Ciao

DesmoColo

04-05-2007, 09:00

Eccomi! So che mia vete cercato!:D
Dicevo che appunto, mi avevano sconsigliato di usare le tabella ma di fare tutto con i div, tag che nella mia ignoranza da principiante non conoscevo. IL problema incontro è che a fare la pagina solo con i div, quando faccio il resize i div si accavallano uno sotto l'altro...
Ho optato per una soluzione intermedia: UNa tabella con width=100% con all'interno un div per ogni cella...
In questo modo quando faccio resize il problema dell'accavallamento scompare.
Ho sbagliato in questo tipo di approccio? Che strada mi consigliate?

DesmoColo

20-05-2007, 21:06

Ho sviluppato l'intero sito con i div, e ho imparato ad apprezzarne le potenzialità!
Adesso però ho un problemuccio su explorer ma penso mi possiate aiutare.
Ho un div che contiene i bottoni del menu, che nel foglio di stile ho definito così:

.menu {
background-color:#9F9F9F;
}

in pratica ho definito solo il colore. In questo div vi sono dei png per rappresentare i bottoni, a cui ho associato un javascript per l'effetto rollover.

Inoltre, ho un altro div definito così:

.line
{
height:2px;
background-color:#ffff00;

}

In pratica voglio che sopra il div menu vi sia il div line.

Su mozilla firefox nessun problema, mentre su explorer ho le seguenti grane a cui non vengo a capo:
- Sotto i bottoni mi appaione delle "macchiette", ovvero delle strane righette blu che non so come far sparire
- la linea non mi appare alta 2px, ma molto di più (a occhio circa 10px)

Mi potete suggerire un rimedio?

Sholn

21-05-2007, 12:08

Ho sviluppato l'intero sito con i div, e ho imparato ad apprezzarne le potenzialità!
Adesso però ho un problemuccio su explorer ma penso mi possiate aiutare.
Ho un div che contiene i bottoni del menu, che nel foglio di stile ho definito così:

.menu {
background-color:#9F9F9F;
}

in pratica ho definito solo il colore. In questo div vi sono dei png per rappresentare i bottoni, a cui ho associato un javascript per l'effetto rollover.

Inoltre, ho un altro div definito così:

.line
{
height:2px;
background-color:#ffff00;

}

In pratica voglio che sopra il div menu vi sia il div line.

Su mozilla firefox nessun problema, mentre su explorer ho le seguenti grane a cui non vengo a capo:
- Sotto i bottoni mi appaione delle "macchiette", ovvero delle strane righette blu che non so come far sparire
- la linea non mi appare alta 2px, ma molto di più (a occhio circa 10px)

Mi potete suggerire un rimedio?

perchè non posti il link alla pagina o il codice html e css?

Leron

21-05-2007, 12:44

Eccomi! So che mia vete cercato!:D
Dicevo che appunto, mi avevano sconsigliato di usare le tabella ma di fare tutto con i div, tag che nella mia ignoranza da principiante non conoscevo. IL problema incontro è che a fare la pagina solo con i div, quando faccio il resize i div si accavallano uno sotto l'altro...
Ho optato per una soluzione intermedia: UNa tabella con width=100% con all'interno un div per ogni cella...
In questo modo quando faccio resize il problema dell'accavallamento scompare.
Ho sbagliato in questo tipo di approccio? Che strada mi consigliate?

niente è sbagliato, semplicemente il tuo approccio non ha senso e perde totalmente il valore dei div, allora con quel tanto fai tutto a tabelle e buona notte :D

DesmoColo

21-05-2007, 13:35

La pagina ancora non è in rete, però ecco il codice html:

<!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=utf-8" />

<title>My Template</title>



<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/lib/prototype.js"></script>
<script type="text/javascript" src="Scripts/scriptaculous.js"></script>
<script type="text/javascript" src="Scripts/niftycube.js"></script>

<script type="text/javascript">
var preloadFlag = false;
function newImage(arg){
if(document.images){
rslt = new Image();
rslt.src = arg;
}
}
function RounderBorder(){

Nifty("div#main","normal");
Nifty("div#borderdiv","normal");
}
function preloadImages() {
RounderBorder();
if (document.images) {
/*Home = newImage("../Images/buttons/home.png");
Home_Up = newImage("../Images/buttons/home_Up.png");
Home_Down = newImage("../Images/buttons/home_Down.png");
Chisiamo = newImage("Images/buttons/chisiamo.png");
Chisiamo_Up = newImage("Images/buttons/chisiamo_Up.png");
Chisiamo_Down = newImage("Images/buttons/chisiamo_Down.png");
Corsi = newImage("Images/buttons/corsi.png");
Corsi_Up = newImage("Images/buttons/corsi_Up.png");
Corsi_Down = newImage("Images/buttons/corsi_Down.png");
Bambini = newImage("Images/buttons/karateBambini.png");
Bambini_Up = newImage("Images/buttons/karateBambini_Up.png");
Bambini_Down = newImage("Images/buttons/karateBambini_Down.png");
Gallery = newImage("Images/buttons/gallery.png");
Gallery_Up = newImage("Images/buttons/gallery_Up.png");
Gallery_Down = newImage("Images/buttons/gallery_Down.png");
Video = newImage("Images/buttons/video.png");
Video_Up = newImage("Images/buttons/video_Up.png");
Video_Down = newImage("Images/buttons/video_Down.png");
Forum = newImage("Images/buttons/forum.png");
Forum_Up = newImage("Images/buttons/forum_Up.png");
Forum_Down = newImage("Images/buttons/forum_Down.png");
Contattaci = newImage("Images/buttons/contattaci.png");
Contattaci_Up = newImage("Images/buttons/contattaci_Up.png");
Contattaci_Down = newImage("Images/buttons/contattaci_Down.png");*/

preloadFlag = true;

}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}

}
</script>
</head>

<body onload="preloadImages();">
<div id="borderdiv"class="divborder">
<div id="main" class="main">
<div class="header">
<div class="logo"><img src="Images/crocegray.gif" alt="logo"/></div>
<div class="scritta"><img src="Images/scritta.gif" alt="scritta" width="450" height="100" /></div>
<div class="jump"><img src="Images/salto.gif" alt="salto" width="160" height="100" border="0" /></div>

</div>
<div class="line"></div>
<div id="menu" class="menu">
<a href="index.php" onmouseover="window.status='Home'; changeImages('Home', 'Images/buttons/home_Up.png'); return true;"
onmouseout="window.status='Home'; changeImages('Home', 'Images/buttons/home.png'); return true;"
onmousedown="window.status='Home'; changeImages('Home', 'Images/buttons/home_Down.png'); return true;"
onmouseup="window.status='Home'; changeImages('Home', 'Images/buttons/home.png'); return true;">

<img src="Images/buttons/home.png" alt="Home" name="Home" border="0"/> </a>

<a href="index.php" onmouseover="window.status='Chisiamo'; changeImages('Chisiamo', 'Images/buttons/chisiamo_Up.png'); return true;"
onmouseout="window.status='Chisiamo'; changeImages('Chisiamo', 'Images/buttons/chisiamo.png'); return true;"
onmousedown="window.status='Chisiamo'; changeImages('Chisiamo', 'Images/buttons/chisiamo_Down.png'); return true;"
onmouseup="window.status='Chisiamo'; changeImages('Chisiamo', 'Images/buttons/chisiamo.png'); return true;">

<img src="Images/buttons/chisiamo.png" alt="chi siamo" name ="Chisiamo" border="0"/> </a>
<a href="index.php" onmouseover="window.status='Corsi'; changeImages('Corsi', 'Images/buttons/corsi_Up.png'); return true;"
onmouseout="window.status='Corsi'; changeImages('Corsi', 'Images/buttons/corsi.png'); return true;"
onmousedown="window.status='Corsi'; changeImages('Corsi', 'Images/buttons/corsi_Down.png'); return true;"
onmouseup="window.status='Corsi'; changeImages('Corsi', 'Images/buttons/corsi.png'); return true;">

<img src="Images/buttons/corsi.png" alt="corsi" name="Corsi" border="0" /> </a>
<a href="index.php" onmouseover="window.status='Bambini'; changeImages('Bambini', 'Images/buttons/karateBambini_Up.png'); return true;"
onmouseout="window.status='Bambini'; changeImages('Bambini', 'Images/buttons/karateBambini.png'); return true;"
onmousedown="window.status='Bambini'; changeImages('Bambini', 'Images/buttons/karateBambini_Down.png'); return true;"
onmouseup="window.status='Bambini'; changeImages('Bambini', 'Images/buttons/karateBambini.png'); return true;">
<img src="Images/buttons/karateBambini.png" alt="karateBambini" name="Bambini" border="0" /> </a>
<a href="index.php" onmouseover="window.status='Gallery'; changeImages('Gallery', 'Images/buttons/gallery_Up.png'); return true;"
onmouseout="window.status='Gallery'; changeImages('Gallery', 'Images/buttons/gallery.png'); return true;"
onmousedown="window.status='Gallery'; changeImages('Gallery', 'Images/buttons/gallery_Down.png'); return true;"
onmouseup="window.status='Gallery'; changeImages('Gallery', 'Images/buttons/gallery.png'); return true;">
<img src="Images/buttons/gallery.png" alt="gallery" name="Gallery" border="0" /> </a>
<a href="index.php" onmouseover="window.status='Video'; changeImages('Video', 'Images/buttons/video_Up.png'); return true;"
onmouseout="window.status='Video'; changeImages('Video', 'Images/buttons/video.png'); return true;"
onmousedown="window.status='Video'; changeImages('Video', 'Images/buttons/video_Down.png'); return true;"
onmouseup="window.status='Video'; changeImages('Video', 'Images/buttons/video.png'); return true;">
<img src="Images/buttons/video.png" alt="video" name="Video" border="0" /> </a>
<a href="index.php" onmouseover="window.status='Forum'; changeImages('Forum', 'Images/buttons/forum_Up.png'); return true;"
onmouseout="window.status='Forum'; changeImages('Forum', 'Images/buttons/forum.png'); return true;"
onmousedown="window.status='Forum'; changeImages('Forum', 'Images/buttons/forum_Down.png'); return true;"
onmouseup="window.status='Forum'; changeImages('Forum', 'Images/buttons/forum.png'); return true;">
<img src="Images/buttons/forum.png" alt="foum" name="Forum" border="0"/> </a>
<a href="index.php" onmouseover="window.status='Contattaci'; changeImages('Contattaci', 'Images/buttons/contattaci_Up.png'); return true;"
onmouseout="window.status='Contattaci'; changeImages('Contattaci', 'Images/buttons/contattaci.png'); return true;"
onmousedown="window.status='Contattaci'; changeImages('Contattaci', 'Images/buttons/contattaci_Down.png'); return true;"
onmouseup="window.status='Contattaci'; changeImages('Contattaci', 'Images/buttons/contattaci.png'); return true;">
<img src="Images/buttons/contattaci.png" alt="contattaci" name="Contattaci" border="0" /></a> </div>
<div class="line"></div>
<div class="content-panel">


EditRegion
ciao! Sono la edit Region! :-)



</div>
<div id= "footer" class="footer"></div>

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

angelodn

29-05-2007, 21:15

perchè le tabelle non servono per impaginare, i div si

in generale (da html.it) :

1. le tabelle servono per dati tabellari, non per creare layout

2. i fogli di stile garantiscono una migliore separazione tra contenuti e presentazione e quindi:

o alleggerimento del codice html
o aumento della velocità di caricamento
o minori spese per la banda
o restyling e modifiche di layout sono molto più semplici per un sito ben strutturato

3. l'uso delle tabelle determina con forza l'ordine del codice html

4. i fogli di stile aiutano a mantenere la consistenza di un intero sito web

6. migliore accessibilità e visibilità verso media alternativi: palmari, cellulari, screen readers, text browsers e stampanti

in una risposta semplice: le tabelle servono per scopi diversi dalla definizione dei layout. per i layout ci sono strumenti più adatti.

benissimo, allora salto a piè pari il capitolo del libro che sto leggendo:
- 8. utilizzare le tabelle per strutturare le pagine -

:asd: