[help] Sito div + css senza tabelle

**globogsm** · 26-11-2006, 19:17

Salve ragazzi, stavo provando a fare un sito con soli DIV e CSS, ma non avendo mai provato mi ritrovo con alcuni dubbi...

per ora sono arrivato a questo punto:
http://www.globogsm.it/mario/mario.html

1) ma dopo aver iniziato ho letto su qualche guida che i DIV vanno inseriti all'interno di un altro DIV con ID "container" , ma non ho ben capito come funziona.

2) di testa mia per dare una grafica alla pagina, ho aggiunto un immagine ad ogni DIV...è una cosa giusta o le immagini per la grafica vanno inserite in altro modo?

2b) se il metodo usato, citato al punto 2, è giusto, come posso risolvere il problema che con FF vedo tutto bene mentre con IE l'header si stacca dal resto della pagina?

Vi posto il codice HTML e il CSS:

codice:

#logo {
    position: absolute;
    height: 100px;
    width: 100px;
    left: 146px;
    top: 19px;
    z-index: 1;
}
#intestazione h1 {
    position: absolute;
    height: 118px;
    left: 130px;
    top: 15px;
    width: 751px;
    background-image: url(fondo_heading.jpg);
}
#menu {
    position: absolute;
    height: 20px;
    left: 258px;
    top: 92px;
    width: 539px;
}
#testo {
    position: absolute;
    height: 170px;
    left: 130px;
    top: 410px;
    width: 751px;
    background-image: url(fondo_box_sez.jpg);
}
#immagini {
    position: absolute;
    width: 494px;
    left: 130px;
    top: 135px;
    height: 275px;
    background-image: url(fondo_box_swf.jpg);
}
#marchi {
    position: absolute;
    width: 260px;
    left: 621px;
    top: 135px;
    height: 275px;
    background-image: url(fondo_box_prodotti.jpg);
}
#piede {
    position: absolute;
    height: 37px;
    width: 751px;
    left: 130px;
    top: 580px;
    background-image: url(fondo_footer.jpg);
    text-align: center;
    vertical-align: middle;
}

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>Documento senza titolo</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
    background-color: #666666;
}
-->
</style></head>

<body>
<div id="logo">
  <div align="center">
    

Logo</p>
  </div>
</div>
<div id="intestazione"> 
  <h1 align="center"></h1>
</div>
<div id="menu">
  <div align="center">Home | Dove siamo | Servizi | Informatica | Stato | Contatti </div>
</div>
<div id="immagini">
  <div align="center"> Immagini</div>
</div>
<div id="marchi">
  <div align="center">Marchi che scorrono </div>
</div>
<div id="testo">
  <div align="center">
    <pre>Qui ci va tutto il testo </pre>
  </div>
</div>
<div id="piede">
  <div align="center">
    <pre>Copyright &copy; 2006 Tecno Service Assistenza- Tutti i diritti riservati</pre>
  </div>
</div>
</body>
</html>

Il sito dovrebbe venire strutturato in questo modo:

Intestazione con un immagine + logo a sx e sovrapposto all'intestazione + menu navigazione centrato ai piedi dell'intestazione.

box sx sotto intestazione: dovrebbe contenere delle immagini (statiche o in flash) che cambiano in base alla pagina su cui ci si trova.

box dx sotto intestazione: dovrebbe contenere dei marchi che scrollano in verticale.

box testo: dovrebbe contenere il testo di ogni pagina che scorre (se c'è ne bisogno) con una scroll bar verticale.

e il normale footer.

Spero di essere stato chiaro nell'esprimermi e di aver mensionato in modo corretto i termini.
Acceto consigli per portare a termine questo lavoro.
grazie ragazzi.

**salasir** · 27-11-2006, 09:53

Provo a darti qualche risposta.

1) Il div container, solitamente si utilizza per descrivere a livello di CSS la parte di pagina che si intende utilizzare. Il body/html descrive tutta l'area dello schermo compreso l'eventuale background, mentre il container "contiene tutti gli elementi che intendi utilizzare: header, footer, menu, navigazione, contenuto, ....
2) Le immagini per la grafica, dove possibile, devono essere inserite come background nei CSS in modo da alleggerire il codice html.
2b) prova ad intervenire sui margin delle varie sezioni.

codice:

<div id="logo">
  <div align="center">
    

Logo</p>
  </div>
</div>
<div id="intestazione"> 
  <h1 align="center"> </h1>
</div>

Questo esempio che ho estratto da ciò che hai indicato, contiene alcune definizioni superflue e/o errate:

codice:

<div id="logo">
  <div align="center">      <== Inutile: si lavora con text-align:center e margin: 0 auto;
    

Logo</p>
  </div>
</div>
<div id="intestazione"> 
  <h1 align="center"> </h1>   <== meglio definire tutto nel CSS
</div>

Per centrare si lavora con il CSS. È sempre meglio evitare di dare definizioni nel CSS e utilizzare ancora gli attributi a livello di tag. Si rischia di andare in conflitto e di confondersi con i valori che si sovrappongono, oltre ad appesantire il codice.

Ricorda: margin: 0 auto; funziona sui browser standard, mentre per IE è necessario inserire text-align:center; nel div padre (quello che contiene l'elemento da centrare.

Discussione: [help] Sito div + css senza tabelle

Strumenti discussione

Ricerca discussione

Visualizza

[help] Sito div + css senza tabelle

Permessi di invio