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 © 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.