div immagine codice

..: :..

Codice Home su base grafica

<!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>Home su base grafica</title>

<style type="text/css">
/*
Penelope - Iltelaiodipenelope.it
*/
body {background-color:#dbcbb5;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
text-align:center;
margin-top:90px;
}
h1{margin-bottom:5px; font-size: 140%; 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;
}
/* Contenitore base */
div#contenitore {
border: none;
background-image: url('images/penelope_diario.jpg');
text-align:center;
width:928px;
height:677px;
margin-left:auto;
margin-right:auto;
}
/* Colonna */
div#navigazione {
position: absolute;
left:390px;
top:166px;
border: none;
text-align:center;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
width: 250px;
height: 530px;
}
/* Corpo pagina */
div#pager {
position: absolute;
left: 714px;
top: 119px;
border: none;
text-align:center;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
width: 336px;
height: 558px;
}
/* Menu link */
.menu_link_colonna{
width: 230px;
text-align:left;
margin-left:auto;
margin-right:auto
}
.menu_link_colonna ul{
list-style-type: none;
margin: 5px 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: 16px;
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: 230px;
}
.menu_link_colonna ul li a:visited{
color: #c89496;
}
.menu_link_colonna ul li a:hover{
color: #3a9693;
border-bottom: 1px dotted #3a9693;
background-image:url('images/bullet_avio.png');
}
</style>

<script type="text/javascript">

</script>
</head>

<body>
<div id="contenitore"></div>

<div id="navigazione">
<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>
<br>

<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/farfalla_old_telaio.png" width="83" height="83" alt=""><br><br>
Il telaio di Penelope ♥<br>
Sito esempio css div<br>
<a href="https://www.iltelaiodipenelope.it/tutorial/index.php">Tutorial Home</a>
</div>

<div id="pager"><h1>Nome sito</h1>
Breve descrizione spazio...<br>
testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo, testo...<br><br>

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

<h3>Titoletto info</h3>
Testo, testo, testo, testo, testo, testo, testo, testo,<br>
testo, testo, testo, testo, testo, testo, testo, testo,<br>
testo, testo, testo, testo, testo, testo, testo, testo,<br>
testo, testo, testo, testo, testo, testo, testo, testo<br>
testo, testo, testo, testo...<br><br>
<a target="_blank" href="https://url pagina"># Clicca qui per vedere il codice sorgente</a>
</div>
</body>

</html>