ExBB: Forum flat-db in italiano 
Il codice html per l'elenco di links sarà di questo tipo:
<DIV ID="navmenu">
<UL>
<LI><A href="#">Home</A></LI>
<LI><A href="#">Html</A></LI>
<LI><A href="#">How To</A></LI>
<LI><A href="#">Link</A></LI>
<LI><A href="#">Tips</A></LI>
</UL>
</DIV>
Il foglio di stile associato sarà:
<STYLE TYPE="text/css">
#navmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#navmenu a
{
display: block;
color: #000066;
background-color: transparent;
width: 100px;
padding: 2px 8px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
}
#navmenu a:hover
{
background-color: #003399;
color: #FFFFFF;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#navmenu li { margin-bottom: 2px; }
</STYLE>
Ed ecco l'effeo ottenuto con questo esempio:
Senza il foglio di stille CSS l'elenco di links si presenterà così:
( 0 / 0 ) <FORM><INPUT type="button" value="INDIETRO" onclick="history.go(-1)"></FORM>
<FORM><INPUT type="button" value="AVANTI" onclick="history.go(1)"></FORM>
Esempio:
( 0 / 0 ) <script language="JavaScript">
document.write(document.lastModified)
< /script>
Otterremo questo effetto:
Se vogliamo che la data sia espressa in italiano:
<script language="JavaScript">
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments
}
var DOWArray = new initArray("Domenica","Lunedì","Martedì","Mercoledì",
"Giovedì","Venerdì","Sabato");
var MOYArray = new initArray("Gennaio","Febbraio","Marzo","Aprile",
"Maggio","Giugno","Luglio","Agosto","Settembre",
"Ottobre","Novembre","Dicembre");
var LastModDate = new Date(document.lastModified);
document.write("Questa pagina è stata modificata ");
document.write(DOWArray[(LastModDate.getDay()+1)],", ");
document.write(LastModDate.getDate()," ");
document.write(MOYArray[(LastModDate.getMonth()+1)]," ");
document.write(".");
</SCRIPT> ( 0 / 0 )Il foglio di stile associato è questo:
<style type="text/css">
<!--
/* Tabbed example */
div.tabs {
min-height: 7em;
position: relative;
line-height: 1;
z-index: 0}
div.tabs > div {
display: inline}
div.tabs > div > a {
color: black;
background: #CCC;
padding: 0.2em;
border: 0.1em outset #BBB;
border-bottom: 0.1em solid #CCC}
div.tabs > div:not(:target) > a {
border-bottom: none;
background: #999}
div.tabs > div:target > a,
:target #default2 > a {
border-bottom: 0.1em solid #CCC;
background: #CCC}
div.tabs > div > div {
background: #CCC;
z-index: -2;
left: 0; top: 1.3em;
bottom: 0; right: 0;
overflow: auto;
padding: 0.3em;
border: 0.1em outset #BBB}
div.tabs > div:not(:target) > div {
position: absolute }
div.tabs > div:target > div, :target #default2 > div {
position: absolute;
z-index: -1}
--></style> Le righe di codice html sono queste:
<div class=example>
<div class=tabs>
<div id=tab1>
<a href="#tab1">Tab 1</a>
<div>One might well argue, that...</div>
</div>
<div id=tab2>
<a href="#tab2">Tab 2</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id=tab3>
<a href="#tab3">Tab 3</a>
<div>... that 2 should have been enough, but...</div>
</div>
<div id=default2>
<a href="#default2">Default</a>
<div>... it works!</div>
</div>
</div>
</div>
( 0 / 0 );)
Impostando, tramite i CSS, la larghezza dell'immagine con le unità percentuali, l'area occupata dall'immagine stessa dipenderà dalla larghezza della finestra del browser (vedi la pagina di esempio), come illustrato nell' immagine.
L'immagine di copertina, che dovrà essere dimensionata in modo proporzionale, sarà selezionata attraverso l'attributo id="copertina":
<div id="contenuti">
<h1>Esempio</h1>
<img id="copertina" src="..." alt="..." title="..." />
<p>Lorem ipsum dolor ...</p>
</div>l'area dei contenuti occuperà il 40% dell larghezza della finestra, mentre l'immagine di copertina occuperà il 100% della larghezza dei contenuti:
#contenuti {
width:40%;
padding:0 1em 1em 1em;
}
img#copertina { width:100% }Facciamo un esempio:
Esempio con 40%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel nibh. Morbi tortor mi, congue sed, mattis sit amet, tincidunt in, tortor. Duis nec tortor in lectus ultricies egestas. Aliquam erat volutpat. In non mi. Praesent bibendum arcu non urna. Morbi vehicula dui id enim. Cras diam ante, sagittis vel, suscipit eu, tristique vel, ligula. Ut malesuada, orci sit amet hendrerit pulvinar, felis lacus posuere diam, eget luctus mauris pede vitae ligula. Nulla at purus at quam volutpat egestas. Mauris sit amet risus. Mauris leo. Integer libero eros, porta at, cursus et, dictum sit amet, augue. Etiam lorem elit, faucibus hendrerit, auctor sit amet, imperdiet sit amet, sapien. ...
Esempio con 80%
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel nibh. Morbi tortor mi, congue sed, mattis sit amet, tincidunt in, tortor. Duis nec tortor in lectus ultricies egestas. Aliquam erat volutpat. In non mi. Praesent bibendum arcu non urna. Morbi vehicula dui id enim. Cras diam ante, sagittis vel, suscipit eu, tristique vel, ligula. Ut malesuada, orci sit amet hendrerit pulvinar, felis lacus posuere diam, eget luctus mauris pede vitae ligula. Nulla at purus at quam volutpat egestas. Mauris sit amet risus. Mauris leo. Integer libero eros, porta at, cursus et, dictum sit amet, augue. Etiam lorem elit, faucibus hendrerit, auctor sit amet, imperdiet sit amet, sapien. ...
( 0 / 0 )Indietro Altre notizie