[HTML,CSS] Inserire sfondo in maniera particolare

D4rkAng3l · 30-01-2008, 23:53

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 destra 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 destra o devo creare una terza colonna?

Il codice HTML è:

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">
<a href="index.html">Biografia</a>
<a href="#">Discografia</a> 
<a href="#">Colonne Sonore</a> 
<a href="#">Musiche di Scena</a> 
<a href="#">Musica Sacra</a> 
<a href="#">Articoli e Pensieri</a>
<a class="active" href="#">Photogallery</a>
<a href="#">Note di Cinema</a>
<a href="#">Prossimi Appuntamenti</a>
<a href="#">Contatti</a>
</div>

<h3>Citando Baricco:</h3>
<p>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">
        <p>
        <a href="img/fotografie/Foto01.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/Foto01.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/11.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/11.jpg" alt="foto Andrea Montepaone" /></a>
        </p>
        
        <p class="galleria_light">
        <a href="img/fotografie/01.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/01.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/4.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/4.jpg" alt="foto Andrea Montepaone in studio" /></a>
        </p>
        
        <p class="galleria_light">
        <a href="img/fotografie/5.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/5.jpg" alt="foto Andrea Montepaone" /></a>

        <a href="img/fotografie/6.jpg" rel="gb_imageset[nice_pics]" title="Andrea Montepaone"><img        class="orizzontali" src="img/fotografie/6.jpg" alt="foto Andrea Montepaone" /></a>
        </p>
        </div>
        
    
             
</div>
</body>
</html>

Il CSS è:

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;
}

Grazie
Andrea

andbin · 31-01-2008, 09:52

Quote:

Originariamente inviato da D4rkAng3l

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?

Ma scusa ... c'è già una immagine di sfondo.

#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;}

solo che l'immagine sidebarbg.gif è un puntino di 2x2 pixel di colore #c0c0c0 (che forse non si nota nemmeno).

Cambia l'immagine ma occhio che poi il menù è più sopra ed è "opaco".

D4rkAng3l · 31-01-2008, 09:53

ops volevo dire destra sono un rincoglionito...ora edito...intendevo la parte destra grigia

31-01-2008, 09:53	#3
D4rkAng3l Bannato Iscritto dal: Mar 2004 Città: Roma Messaggi: 2688	ops volevo dire destra sono un rincoglionito...ora edito...intendevo la parte destra grigia

Strumenti
Mostra una versione stampabile Invia questa pagina per email