Una controllata al sito...

**orenoren** · 02-10-2010, 13:54

Buongiorno,

sto realizzando, da autodidatta, un sito internet... per il momento ho fatto la home page cercando di utilizzare al meglio i CSS... Ora, prima di proseguire con le altre pagine (la struttura sarà ovviamente uguale, tranne i contenuti: testo e qualche immagine) vorrei chiedervi una gentilezza...

Se posto codici html e css della home c'è qualcuno tra voi che può vedere se ho costruito una pagina con mille errori o no??

Grazie

**codencode** · 02-10-2010, 15:57

Posta.

**orenoren** · 02-10-2010, 18:18

CODICE CSS

/* Global Styles */

body {
margin:0px;
}

/* ID Styles */

#navigation a {
color: #FFFFFF;
border-bottom: 1px solid #D90000;
background-color: #D90000;
border-top: 1px solid #D90000;
}

#navigation a:hover {
color:#D90000;
background-color: #FFFFFF;
}

#navheader {
font:24px georgia;
color: #1F2669;
letter-spacing:.4em;
padding:10px;
line-height:30px;
}

#immagine_header {
font:11px Arial, Helvetica, sans-serif;
color: #FF9900;
line-height:14px;
padding-left: 0px;
text-align: left;
padding-bottom: 0px;
vertical-align: bottom;
}

#menu {
font:11px Arial, Helvetica, sans-serif;
color: #FF9900;
line-height:14px;
padding-left: 110px;
font-weight: bold;
}

#monthformat td {
border-bottom: 1px solid #FFFFCC;
}

#dateformat {
font:11px Arial, Helvetica, sans-serif;
color: #FFFF00;
letter-spacing:.4em;
}

#dateformat a {
font: 11px Arial, Helvetica, sans-serif;
color: #FFFF00;
letter-spacing:0.1px;
text-decoration: none;
}

#dateformat a:hover {
color: #FFFFCC;
}

/* Class Styles */

.bodyText {
font:12px Arial, Helvetica, sans-serif;
color:#000000;
line-height:20px;
letter-spacing:1px;
text-align: justify;
padding-left: 40px;
vertical-align: top;
}

.intestazione{
font:22px Arial, Helvetica, sans-serif;
color: #D90000;
line-height:20px;
padding: 3px 0px 2px 0px;
letter-spacing: 1px;
padding-left: 40px;
border-bottom: 1px solid #D90000;
}

.intestazione_sx{
font:22px Arial, Helvetica, sans-serif;
color: #D90000;
line-height:20px;
padding: 3px 0px 2px 0px;
letter-spacing: 1px;
border-bottom: 1px solid #D90000;
padding-left: 0px;
border-top: 1px solid #D90000;
}

.immagine {
vertical-align: bottom;
text-align: center;
}

.logo {
padding-left: 40px;
margin-bottom: 30px;
}

.smallText {
font:11px Arial, Helvetica, sans-serif;
color:#000000;
text-align: center;
line-height: 10px;
}

.navText {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: center;
display: block;
padding: 8px;
font-weight: normal;
letter-spacing: 1px;
}

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>
<title>Home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="asilo.css" type="text/css" />
<style type="text/css">

</style>
</head>
<body background="#FFFFFF"><table width="886" height="1023" border="0" align="center" cellpadding="0" cellspacing="0">

<tr bgcolor="#220103">
<td colspan="3" nowrap="nowrap" bgcolor="#FFFFFF" id="logo"></td>
</tr>
<tr bgcolor="#220103">
<td height="40" colspan="3" nowrap="nowrap" bgcolor="#FFFFFF" id="logo"><table width="900" border="0" cellpadding="0" cellspacing="1" id="navigation">
<tr>
<td width="148"><div align="center">home</div></td>
<td width="149">il nostro asilo</td>
<td width="149">lo staff </td>
<td width="149">un giorno al nido </td>
<td width="149">il menù </td>
<td width="149">vieni a trovarci </td>
</tr>
</table></td>
</tr>
<tr bgcolor="#220103">
<td height="172" colspan="3" nowrap="nowrap" bgcolor="#FFFFFF" id="logo"><table width="900" height="248" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="385" height="248">[img]../La Coccinella/Header/Logo/Logo_scritta.png[/img]</td>
<td width="515" class="immagine">[img]../La Coccinella/Header/Immagini/Img_jpeg/Casette.jpg[/img]</td>
</tr>
</table></td>
</tr>

<tr bgcolor="#220103">
<td height="19" colspan="3" nowrap="nowrap" bgcolor="#FFFFFF">[img]../La Coccinella/Content/Int_alto3.jpg[/img]</td>
</tr>

<tr bgcolor="#FF080E">
<td height="18" colspan="3" bgcolor="#FFFFFF"> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="580" class="intestazione">Benvenuti!</td>
<td width="30" class="pageName"></td>
<td width="250"></td>
<td width="40" class="pageName"></td>
</tr>
<tr>
<td rowspan="4" class="bodyText">

This Home Page layout makes a great starting point for your website. Virtually all of the content is customizable, including the images, the text, and the links. You can decide whether to keep the existing graphics or swap them out for pictures of your own.</p>

The text on this page is intended to help you jumpstart your design by suggesting the sort of content you may want to include, but don't let it limit you. The same is also true for the link text - feel free to change the names of the links to better suit your particular needs. If you have any questions about using Contribute to edit these pages, refer to the Read Me file included with the download or to the Contribute Help System. Have fun and make a great website!</p></td>
<td rowspan="4" class="PageName">

</p> </td>
<td>[img]../Immagini/2770.jpg[/img]</td>
<td rowspan="4"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>[img]../Immagini/2765.jpg[/img]</td>
</tr>
<tr>
<td></td>
</tr>
</table></td>
</tr>

<tr>
<td height="182" colspan="3">[img]../La Coccinella/Content/Int_basso3.jpg[/img]</td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF" class="smallText">

©</p></td>
</tr>
</table>
</body>
</html>

**orenoren** · 03-10-2010, 12:39

Dovrebbe essere tutto... se manca qualcosa fatemi sapere...
Grazie

**Mich_** · 04-10-2010, 09:18

Originariamente inviato da orenoren
Dovrebbe essere tutto... se manca qualcosa fatemi sapere...
Grazie

Hai usato male il forum. Cosi` non si capisce.

Per postare il codice, usa il tasto [ code ] che trovi sopra l'area di inserimento, e rispetta le indentazioni.

Comunque e` dura visualizzare un sito dal suo codice. Meglio se posti un link (anche provvisorio in un sito "gratuito"), in modo che il lavoro lo fa il browser e non lo deve fare chi vuol darti una mano.

PS: visto che stai iniziando, faresti meglio usare una DTD piu` moderna: ad esempio XHTML 1.0 Strict (che viene visualizzata QUASI uguale in tutti i browser piu` comuni), oppure HTML5, (che pero` non viene interpretata nei browser piu` vecchi).

Ed evita di usare formattazione HTML (va in conflito con i CSS). Se usi una DTD Strict, i validatori ti aiutano molto anche a tenere il codice pulito.

**codencode** · 04-10-2010, 10:12

Mi associo alle considerazioni di Mich_ aggiungendo che, dal momento che sei all'inizio, ti converrebbe studiare i layout tableless ovvero la realizzazione di layout senza l'uso di tabelle mediante l'utilizzo dei div. Inoltre darei uno sguardo alle guide di HTML.it che parlano di codice di marcatura semantico.

**orenoren** · 04-10-2010, 19:02

Ok grazie per i consigli, ma proprio perchè sn all'inizio non mi sarebbero dispiaciute due dritte su ciò che ho già fatto, per sapere se ci sono proprio cazzate o meno... anche perchè ciò che ho fatto l'ho realizzato "modificando" semplicemente le caratteristiche dei css di alcuni "esempi" presenti in Dreamweaver...

In ogni caso, anche se non se so tanto più di prima

, grazie per l'interessamento.

**orenoren** · 04-10-2010, 22:55

Eccomi... ho postato la home su questo indirizzo gratuito, così - credo - è più facile darmi qualche dritta e correggere html e css dove c'è bisogno... http://provaperilsito.altervista.org/

Aspetto notizie... Grazie 1000!

**Mich_** · 05-10-2010, 09:01

Con quel codice HTML non sono in grado di aiutarti.

La sintassi da te usata e` vecchia di piu` di 10 anni, e va in conflitto con i CSS.

Visto che stai iniziando, inizia con il piede giusto.

Anzitutto cambia la DTD: passa a XHTML 1.0 strict : ne guadagnera` il tuo fegato quando vorrai che la cosa funzioni in tutti i browser.

Poi elimina le tabelle di formattazione: sembra che aiutino, ma sono un grave errore semantico e rendono la pagina non accessibile ad alcune categorie di utenti (quelli piu` deboli); inoltre rendono piu` difficile sistemare i CSS: dato che sono fatte per dati tabellari, i default dei browser rendono complicato usarle peer formattare.

Infine elimina tutte le formattazioni HTML (se usi la strict il validatore HTML ti puo` aiutare) e trasformale in formattazioni CSS.

Se quello che hai fatto te lo ha proposto un editor, cambia strumento: non e` una cosa adatta al giorno d'oggi (oppure vedi se il tuo strumento puo` funzionare con le tecniche moderne).

Ci sono validi esempi di layout realizzati correttamente con l'uso di CSS: fatti un giro tra quelli (alcuni riferimenti tra i "link utili")

**furbostandby** · 05-10-2010, 09:10

Mi permetto di darti un consiglio estetico: il menu in alto non è molto bello a rettangoli, io farei dei bottoni come quello sull'immagine sotto.

Ciao

Discussione: Una controllata al sito...

Strumenti discussione

Ricerca discussione

Visualizza

Una controllata al sito...

Permessi di invio