-
Primo mio sito con DIV
Ciao a tutti, sto cercando di rifare il mio sito personale che nativamente era costruito utilizzando i frame, per passare a una soluzione con i DIV. Ho cominciato a impostare la pagina index.html ma adesso mi trovo con il problema di dover linkare i menu senza fare tutte le volte il refresh di tutta la pagina.
In pratica il div logo e menù devono rimanere fermi mentre deve variare solo il contenuto del contenitore (scusate il gioco di parole).
Di seguito posto il codice HTML e CSS di quello che ho fatto finora. Grazie a chiunque di voi abbia la cortesia di aiutarmi.
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>Documento senza titolo</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<!--APRO WRAPPER-->
<div class="wrapper">
<!--APRO LOGO-->
<div class="logo">
LOGO
</div>
<!--CHIUDO LOGO-->
<!--APRO MENU-->
<div class="menu">
<a href="index.html">HOMEPAGE</a>
-
<a href="chi.html">CHI SIAMO</a>
-
<a href="cosa.html">COSA FACCIAMO</a>
-
<a href="contatti.html">CONTATTI</a>
</div>
<!--CHIUDO MENU-->
<!--APRO CONTENITORE-->
<div class="contenitore">
CONTENITORE
</div>
<!--CHIUDO CONTENITORE-->
<!-- CHIUDO WRAPPER-->
</div>
</body>
</html>
Codice:
@charset "UTF-8";
/* CSS Document */
body {}
img {}
a {}
a:hover {}
h1 {}
h2 {}
h3{}
/*CLASSI CHE DEFINISCONO IL MIO SITO*/
.wrapper {
background-color:#E5E5E5;
width:100%;
max-width:960px;
min-height:300px;
margin-left:auto;
margin-right:auto;
margin-top:25px;
}
.logo {
background-color:#EEE;
width:100%;
min-height:90px;
margin-bottom:10px;
}
.menu {
background-color:#DADADA;
width:100%;
min-height:40px;
margin-bottom:10px;
}
.contenitore {
background-color:#666;
width:100%;
min-height:400px;
-
Io ti consiglierei di aggiornare ogni volta la pagina, ma di usare pagine generate dinamicamente con PHP.
Se però non vuoi far aggiornare tutta la pagina, prova con ajax (sono richieste asincrone).
Una implementazione facile è tramite jQuery.
Ciao!
