sos banner
- Creatore Discussione programmo
- Data di inizio
le immagini dovrebbero usicre da sinistra verso destra all'altezza della scritta home page, home page deve apparire sopra.
.-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" type="text/css" href="grapes.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Your name here" />
<meta name="Copyright" content="Copyright (c) Your copyright here 2005" />
</head>
<body>
<div id="container">
<div id="hdr">
<img src="images/foto1.gif" align="right" style="height: 121px; width: 500px;border=12;" /></div>
<h1>HOME PAGE</h1>
<p id="tagline">AGRITURISMO</p>
<!-- e dovrebbero apparire da sotto a sopra sotto la scritta home page -->
<div id="lftcol">
<ul id="nav">
<li><a href="" id="current">Presentazione</a></li>
<li><a href="">Dove Siamo</a></li>
<li><a href="">Galleria</a></li>
<li><a href="">Contatti</a></li>
<li><a href="">News</a></li>
<li><a href="[email protected]">mailto:[email protected]</a></li>
</ul>
<div id="quote">
<p><em>A great source for information...</em></p>
</div>
<h3>More stuff</h3>
<ul>
<li><a href="http://validator.w3.org/check?uri=referer">Validate XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a></li>
<li><a href="http://www.davereederdesign.com/">Authors Website</a></li>
<li><a href="http://www.oswd.org/">OSWD</a></li>
</ul>
</div>
<div id="rgtcol">
<h2>Tenuta Pietra Pinta</h2>
<p>uot;.
<br />
"Grapes" is an Open Source web template which means it can be used without the need to ask permission and you have full rights to use and adapt its images. For more of my work, please see my website which can be found <a href="http://www.davereederdesign.com/">here.</a>
</p>
<p>
I wanted to create a fairly simple yet attractive template which can be used for food or wine related websites, although it can easily be adapted for other uses too.
</p>
<h2>But is it <em>easy</em> to Use?</h2>
<p>"Grapes" should be quite easy to use as I have added plenty of comments and tried to make the <acronym title="Cascading Style Sheet">CSS</acronym> as neat and organised as possible.
</p>
<p>There are also plenty of styles for other tags, including:</p>
<p><code>Text using the code tag, this is ideal for showing code on a page.</code></p>
<p><acronym title="acronym text">acronym text</acronym></p>
<p><strong>strong or bold text</strong></p>
<p><em>em or italic text</em></p>
<p>This is a paragraph of normal text that contains <span>span</span> tags with a class set to <span>special</span>. This means all the <span>big words</span> in this paragraph are words that are placed between opening and closing <span>span</span> tags. These span tags can be used to add meaning to a block of text or to <span>shout out</span> when needed.</p>
</div>
</body>
</html>
----------------questo è il css
* Grapes, web template for business or for fun */
/* By Dave Reeder, www.davereederdesign.com */
body {margin: 0; padding: 0; background: #213205}
* {margin: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif}
/*----------------------------------------------Basic styles------------------------------------------------*/
h1, h2, h3, h4 {font-family: Georgia, Georgia, serif; margin: 15px 0 0 5px; color: #fff; font-weight: normal; text-decoration: none}
h1 em, h2 em, h3 em, h4 em {font-family: Georgia, Georgia, serif; font-weight: normal} /* italic words in titles */
h1 {position: absolute; right: 0px; top: 30px; font-size: 2.25em; letter-spacing: 0.1em; line-height: 1.00em; padding-right: 10px; border-right: 15px solid #fff}
h1:first-letter {font-family: Georgia, Georgia, serif; font-size: 2.25em} /* styles the first letter of the main title to make it large */
p#tagline {position: absolute; right: 0px; top: 125px; font-style: italic; color: #648D20; font-size: 0.90em} /* sits under main title */
h2 {font-size: 1.30em; letter-spacing: 0.05em}
p, ul, ol {margin: 10px 10px 0 7px; font-size: 0.70em; line-height: 1.60em; color: #000; letter-spacing: 0.05em}
code {font-family: monospace; font-size: 1.20em; color: #E20000}
p span {font-size: 1.50em; font-weight: bold} /* shouting words */
a:link, a:visited {color: #792533; font-weight: bold; text-decoration: none; border-bottom: 1px solid #792533}
a:hover, a:active {color: #fff; border-color: #fff}
ul {list-style: inside square} /* general lists */
acronym {font-weight: bold; border-bottom: 1px dashed #000; cursor: help}
/*-----------------------------------------------Layout DIVS------------------------------------------------*/
#container { /* keeps everything together */
position: relative;
margin: 0 auto;
width: 800px;
background: url(images/bkgrnd.gif) 0 0 repeat-y #CCCC33; /* Important image, do not remove */
overflow: hidden
}
#hdr { /* div containing h1, nav and grapes image */
float: left;
width: 620px;
height: 200px;
background: url(images/grapes.jpg) 0 0 no-repeat #CCCC33 /* Image of Grapes */
}
#lftcol { /* left column */
position: absolute;
left: 0px;
top: 200px;
margin-left: 50px; /* leave this so that background image lines up with edge of this div */
width: 200px;
background: transparent;
overflow: hidden
}
#rgtcol {float: right;
width: 500px;
padding-bottom: 30px;
background: transparent;
overflow: hidden} /* right column */
#bttmbar {float: right; text-align: center; font-size: 0.70em; height: 4em; line-height: 4em; width: 570px; background: #CCCC33; border-top: 1px solid #D9D93C}
#quote { /* Quote box in left column */
float: left;
margin: 10px 0 20px 10px;
padding: 10px 0;
width: 170px;
text-align: center;
background: url(images/quote.gif) no-repeat 0 0
}
#quote p {color: #444; font-size: 0.80em; font-weight: bold; line-height: 2.00em} /* Quote box text */
/*---------------------------------------------Main Navigation-----------------------------------------------*/
ul#nav { /* navigation list */
margin: 53px 0 20px 0; /* the 53px is where the nav begins (margin top) */
padding: 0;
list-style: none inside
}
ul#nav li {float: left; display: block}
ul#nav li a {
width: 170px;
margin: 3px 0 0 0; /* a little top margin */
border: 0;
border-left: 10px solid #CCCC33;
padding: 10px 5px;
font-family: Georgia, Georgia, serif;
font-weight: normal;
text-decoration: none;
display: block;
color: #450F1F;
background: #D9D93C
}
ul#nav li a#current {border-color: #fff} /* current page, move id in the xhtml when creating a new page */
ul#nav li a:hover {background: #9EA219; color: #fff}
Discussioni simili
