mmm...un quesito, se io ho questo sito: http://www.siatec.net/andrea/archivi...galleria2.html
Come potete vedere il layout è fatto volutamente non centrato, tuttavia la parte sinistra grigia credo potrebbe essere fatta più carina se contenesse uno sfondo, c'è modo di mettere un'immagine di sfondo in quella parte? cioè posso mettere un'immagine come sfondo al body che però sia spostata tutta a sinistra o devo creare una terza colonna?
Il codice HTML è:
Il CSS è:codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>andreas07: the simple solution template</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="description goes here" /> <meta name="keywords" content="keywords,goes,here" /> <link rel="stylesheet" href="andreas07.css" type="text/css" /> <!--[if IE 6]> <link rel="stylesheet" href="fix.css" type="text/css" /> <![endif]--> <script type="text/javascript"> var GB_ROOT_DIR = "http://www.siatec.net/andrea/archivio/andreamontepaone2/greybox/greybox/"; </script> <script type="text/javascript" src="greybox/greybox/AJS.js"></script> <script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script> <link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="sidebar"> <h1>Andrea Montepaone</h1> <h2>Pianista e Compositore</h2> <div id="menu"> Biografia Discografia Colonne Sonore Musiche di Scena Musica Sacra Articoli e Pensieri Photogallery Note di Cinema Prossimi Appuntamenti Contatti </div> <h3>Citando Baricco:</h3> Ora tu pensa: un pianoforte. I tasti iniziano. I tasti finiscono. Tu sai che sono 88, su questo nessuno può fregarti. Non sono infiniti, loro. Tu, sei infinito, e dentro quei tasti, infinita è la musica che puoi fare. Loro sono 88. Tu sei infinito...</p> </div> <div id="content"> <div id="header"></div> <h3>Galleria fotografica:</h3> <p class="testo">In questa sezione del sito potete trovare l galleria delle immagini di Andrea Montepaone, fotografie tratte da vari eventi musicali e legate all'attività artistica di Andrea.</p> <div id="gal"> [img]img/fotografie/Foto01.jpg[/img] [img]img/fotografie/11.jpg[/img] </p> <p class="galleria_light"> [img]img/fotografie/01.jpg[/img] [img]img/fotografie/4.jpg[/img] </p> <p class="galleria_light"> [img]img/fotografie/5.jpg[/img] [img]img/fotografie/6.jpg[/img] </p> </div> </div> </body> </html>
codice:/* andreas07 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work. Version: 1.1, November 28, 2005 */ /**************** Page and tag styles ****************/ body {margin:0; padding:0; color:#303030; background:#fafafa url(img/bodybg.gif) top left repeat-y; font:76% Verdana,Tahoma,sans-serif;} ul {list-style:circle; margin:15px 0 20px 0; font-size:0.9em;} li {margin:0 0 8px 25px;} a {color:#d85d5d; font-weight:bold; text-decoration:none;} a:hover {color:#505050; text-decoration:underline;} img {float:left; margin:0 15px 15px 0; padding:1px; background:#ffffff; border:1px solid #d0d0d0;} a img {border-color:#d0d0d0;} a img:hover {background:#d85d5d; border-color:#d85d5d;} /**************** Sidebar area styles ****************/ #sidebar {position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; text-align:right;} body > #sidebar {position:fixed;} #sidebar h1 {margin:20px 18px 0 5px; color:#d85d5d; font-size:1.6em; letter-spacing:-2px; text-align:right;} #sidebar h2, #sidebar h3 {margin:0 20px 18px 5px; color:#808080; font-size:1.1em; font-weight:bold; letter-spacing:-1px; text-align:right;} #sidebar h3 {margin:20px 18px 4px 5px; color:#606060;} #sidebar p {margin:0 20px 18px 5px; color:#606060; font-size:0.8em;} #sidebar a {color:#808080} /**************** Navigation menu styles ****************/ #menu a {display:block; width:202px; padding:5px 18px 5px 0; color:#606060; background:#e0e0e0 url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;} #menu a:hover {color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top right repeat-y;} #menu a.active {padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;} #menu a.active:hover {color:#505050; background:#fafafa;} /**************** Content area styles ****************/ #content{ width: 520px; margin: 0 0 0 240px; padding: 20px 0; background:#fafafa; text-align: center; } #header{ margin: 0 auto; width: 512px; height: 200px; background-image:url(img/piano.jpg); border:3px solid #d0d0d0; } #content p{ margin: 0 0 20px 0; line-height: 1.5em; text-align: justify; } #content h1 {margin:0; color:#d85d5d; font-size:4em; letter-spacing:-5px; text-align:center;} #content h2 {margin:0; color:#808080; font-weight:normal; font-size:2.5em; letter-spacing:-2px; text-align:center;} #content h3 {clear:both; margin:30px 0 10px 0; color:#d85d5d; font-weight:normal; font-size: 2em; letter-spacing:-2px;} /************************ Stile della galleria delle immagini ************************/ p.galleria_light{ line-height: 0px; } div#gal{ width: 450px; margin: 0 auto; padding: 0; } img.orizzontali{ width: 200px; height: 150px; } img.verticali{ width: 129px; height: 177px; }
Rispondi quotando
