Codice Home struttura div e basi in grafica - Contenitori table


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Div grafica</title>

<style type="text/css">
/*
Penelope - Iltelaiodipenelope.it
*/
body {background-image: url('images/sfondo_tutorial_mm.jpg');
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
text-align:center;
margin-top:50px
}
h1{margin-bottom:5px; font-size: 120%; font-style:bold; color:#5b4a37;}
h2{margin-top:5px; margin-bottom:3px; font-size: 110%; font-weight:oblique; color:#5b4a37;}
h3{margin-top:5px; margin-bottom:3px; font-size: 100%; font-weight:oblique; color:#627136;}

/* Link*/
a:link {
text-decoration: none;
cursor:nw-resize;
font-family: "Garamond";
font-size: 16px;
color:#822027;
}
a:visited {
text-decoration:none;
cursor:nw-resize;
font-family: "Garamond";
font-size: 16px;
color:#687036;
}
a:hover {
text-decoration: line-through;
color: #717929;
}
a:active {
font-family: "Garamond";
font-size: 16px;
color: #e27878;
}
div#header {
border:0 none;
background-image: url('images/penelope_tutorial_top_800.png');
text-align:center;
margin-left:auto;
margin-right:auto;
width: 800px;
height:211px
}
div#corpo {
border: 0px none;
background-image: url('images/penelope_tutorial_striscia_800.png');
text-align:center;
font-family : "Garamond";
color : #5e402a;
font-size : 16px;
margin-left:auto;
margin-right:auto;
width: 800px
}
div#footer {
border: 0px none;
background-image: url('images/penelope_tutorial_footer_800.png');
text-align:center;
font-family : "Garamond";
color : #5e402a;
font-size : 16px;
margin-left:auto;
margin-right:auto;
width: 800px;
height:75px
}
/* Table */
table.base{
border:0px;
text-align:center;
font-family: 'Garamond';
font-size: 16px;
color : #785c58;
margin-left:auto;
margin-right:auto
}
/* Menu link */
.menu_link_colonna{
width: 210px;
text-align:left;
margin-left:auto;
margin-right:auto
}
.menu_link_colonna ul{
list-style-type: none;
margin: 3px 0;
padding: 2px;
border: 0px;
}
.menu_link_colonna ul li a{
background: url('images/bullet_brown.png') no-repeat 1px center;
border-bottom: 1px dotted #7f653d;
display: block;
width: auto;
padding-left: 14px;
text-decoration: none;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-family: 'Garamond';
font-size:16px;
color: #523c3a;
padding-right:0;
padding-top:2px;
padding-bottom:2px;
}
* html .menu_link_colonna ul li a{
width: 210px;
}
.menu_link_colonna ul li a:visited{
color: #c89496;
}
.menu_link_colonna ul li a:hover{
color: #879b59;
border-bottom: 1px dotted #a5b232;
background-image:url('images/bullet_green.png');
}
</style>
<script type="text/javascript">
<!-- Original: Andrea Bianchi
// Web Site: https://www.web-link.it
function WebDate() {
var now = new Date();
var year= now.getYear();if (year < 1000) year += 1900;
nameDay = new Array('Domenica','Lunedi','Martedi','Mercoledi','Giovedi','Venerdi','Sabato');
nameMth = new Array('01','02','03','04','05', '06', '07', '08', '09', '10', '11','12');
document.write('' +nameDay[now.getDay()]+ ' ' + now.getDate() + "/" + nameMth[now.getMonth()] + "/" + year+ '');
}
// end -->
</script>
</head>

<body>
<div id="header">
<table class="base" cellpadding="2" cellspacing="2" width="96%">
<tr>
<td colspan="2" height="130">&nbsp;</td>
</tr>
<tr>
<td height="30">&nbsp;</td>
<td width="235" valign="top" rowspan="2"><!-- Inizio Datario -->
<script type="text/javascript">
// Autore sconosciuto
// Spiegato e commentato da https://www.iltelaiodipenelope.it/tutorial/index.php

var saluto = new Date();
var orario = saluto.getHours();

// Saluto dalle 6 am alle 12
if ((orario > 06) && (orario <= 12)) {
document.write("...Buon giorno!");
}
// Saluto dalle 12 alle 18
if ((orario > 12) && (orario <= 18)) {
document.write("...Buon pomeriggio!");
}
// Saluto dalle 18 alle 24
if ((orario > 18) && (orario <= 24)) {
document.write("...Buona sera!");
}
// Saluto dalle 24 alle 6 am
if ((orario >= 00) && (orario <= 06)) {
document.write("...Buona notte!");
}
</script><br>
<script type="text/javascript">WebDate(); </script><br>
<script type="text/javascript">
// Autore sconosciuto - Spiegato da https://www.iltelaiodipenelope.it/tutorial/index.php
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }
function lZ(x){ return (x>9)?x:'0'+x; }
function tH(x){ if(x==0){ x=24; } return (x>24)?x-=24:x; }
function dT(){ if(fr==0){ fr=1; document.write('<span id="tP">'+eval(oT)+'<\/b><\/span>'); } tP.innerText=eval(oT); setTimeout('dT()',1000); }
var fr=0,oT="lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())";</script>
H:. <script type="text/javascript" language="JavaScript">dT();</script>
<!-- Fine Datario --></td>
</tr>
<tr>
<td valign="top">Benvenuti in <em>........</em><br>
Testo, testo, testo, testo, testo,testo, testo, testo, testo</td>
</tr>
</table>
</div>

<div id="corpo">
<table class="base" cellpadding="2" cellspacing="2" width="96%">
<tr>
<td valign="top"><!-- Inizio spazio corpo/pager --><br><h1>Primo titolo...</h1>
Le basi grafiche di questo esempio sono state ridimensionate<br>
affinché la pagina si caricasse più velocemente<br><br>
Questa spazio cresce in base hai contenuti, non c'è un limite per l'altezza<br>
Inserire le table può risultare complicato all'inizio, ma una volta sistemate<br>
basterà solo fare attenzione alla dimensione in larghezza dei contenuti<br><br>

<h2>Titoletto contenuti</h2>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo, testo, testo, testo, testo, testo, testo...<br><br>

<h3>Titoletto info</h3>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo,testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo, testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo,testo, testo, testo, testo...<!-- Fine spazio corpo/pager --></td>
<td width="235" valign="top"><!-- Inizio spazio colonna -->
<div class="menu_link_colonna"><ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul></div><br><br><br>
<img border="0" src="images/penelope_farfalla_buffa.png" width="124" height="109" alt=""><br><br><br>
Il telaio di Penelope &#9829;<br>
Sito esempio css div<br>
<a href="https://www.iltelaiodipenelope.it/tutorial/index.php">Tutorial Home</a>
<!-- Fine spazio colonna --></td>
</tr>
</table>
</div>

<div id="footer">
<table class="base" cellpadding="2" cellspacing="2" width="96%">
<tr>
<td height="60">Spazio footer</td>
<td width="235">&nbsp;</td>
</tr>
</table>
</div>

</body>

</html>