[CSS] Inserire correttamente immagine link accanto a del testo

abc84XXX · 26-04-2008, 12:26

Ciao,
se andate su questa pagina: http://www.siatec.net/andrea/archiv...iscografia.html

Praticamente sotto al primo brano (GRAND BISTROT VALSE) del primo album (Daniel della guerra),
c'è una mini incona che se clickata dovrebbe far scaricare un mp3 (ancora non sul server).

Praticamente vorrei che tale mini icona fosse accanto al nome del brano e non sotto ma non riesco a metterla accanto...ho fatto varie prove ma la visualizza sempre sotto. Perchè? Come posso risolvere?

Questo è 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>Andrea Montepaone</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="default.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="ie.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" />
<!--[if IE]><link rel="stylesheet" href="ie.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 class="active" href="#">Discografia</a> 
<a href="#">Colonne Sonore</a> 
<a href="#">Musiche di Scena</a> 
<a href="#">Musica Sacra</a> 
<a href="#">Rassegna Stampa</a>
<a href="galleria.html">Photogallery</a>
<a href="#">Prossimi Appuntamenti</a>
<a href="contact.html">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>Discografia</h3>


<div class="album">
   <h4 class="title">2003 DANIEL DELLA GUERRA</h4>
   <div class="copertina"><a href="img/Daniel_della_guerra_ico.jpg" rel="gb_imageset[nice_pics]" title=   "Andrea Montepaone"><img src="img/Copertina_Daniel_della_guerra.jpg" class="left" height="170" width=   "170"  alt="Copertina Daniel della guerra. Musiche: Andrea Montepaone Testi: Massimo Simonini" /></a>   </div>

   <div class="descrizione">
          <p>Catalogo: Montepaone 001 03<br />
          Edizioni Musicali RAI TRADE S.p.A.<br />
          Durata: 47:20<br />
          Data di uscita: 13 aprile 2003<br />
          Supporto: CD</p>
    </div><br /><br /><br /><br /><br />
    
  
  <p>Track List:</p>
  
  <ol>
    <li>GRAND BISTROT VALSE (3:47) <a href="Montepaone - 01.Grand bistrot valse.mp3" title="Montepaone - 01.Grand bistrot valse.mp3"><img src="img/download.gif" alt="downloadico"  /></a> </li>
  </ol> <br  />
    <span>Trio in sol maggiore per violino, viola e violoncello “Le tre sorelle”:</span>
  <ol start="3">
    <li>ALLEGRO MA NON TROPPO: ALICE (6:05)</li>
    <li>ADAGIO: CLEA (7:21)</li>
    <li>ALLEGRETTO: VIOLA (6:09)<br /><br  /><br  /></li>
    <li>SE CI FOSSE LEI (3:55)</li>
    <li>AMERICAN MARCH (3:12)</li>
    <li>OLTRE LA COLLINA (3:24)</li>
    <li>VENTO DI MARE (2:44)</li>
    <li>FULGORE! (3:05)</li>
    <li>TRAMONTO ROSSO (4:50)</li>
    <li>PERDUTI NEL SILENZIO (2:41)</li>
  </ol>
  
  
  
  <ul class="discoinfo">
    <li>Musiche di Andrea Montepaone</li>
    <li>Testi di Massimo Simonini</li>
    <li>Prodotto da Andrea Montepaone & Massimo Simonini</li>
    <li>Registrato, missato e masterizzato in digitale tra il settembre 2002 e il febbraio 2003
        presso lo studio Synthesia di Roma</li>
    <li>Tecnico del suono: Giovanni Formosa</li>
  </ul>

  <p>Interpreti:</p>

  <ul class="discoinfo">
    <li>Marco Boido: pianoforte</li>
    <li>Fabio Acone: violino</li>
    <li>Luca Ragusa: viola</li>
    <li>Rossella Zampiron: violoncello</li>
    <li>Andrea Montepaone: pianoforte</li>
    <li>Matteo Ceccarelli: violino</li>
    <li>Lucia Venturini: viola</li>
    <li>Stefano Sovrani: violoncello</li>
    <li>Alessandra Finocchioli: flauto</li>
    <li>Angelo Passeri: tromba</li>
    <li>Donatella Luttazzi: voce</li>
    <li>Sonia Cannizzo: voce</li>
  </ul>  
</div>

<div class="album">
   <h4 class="title">2004 NOTE DI CINEMA</h4>

   <div class="copertina"><a href="img/Copertina_Note_di_cinema.jpg" rel="gb_imageset[nice_pics]" title=   "Andrea Montepaone"><img src="img/Copertina_Note_di_cinema_ico.jpg" class="left" height="170" width=   "170"  alt="Copertina Note di cinema" /></a></div>
   
   <div class="descrizione">
        <p>Catalogo: Montepaone 001 04<br />
        Durata: 71:57<br />
        Data di uscita: 16 aprile 2004<br />
        Supporto: CD</p>
   </div><br /><br /><br /><br /><br /><br /><br />
   
   <p>Track List:</p>
  
  <ol>
    <li>BEAUTIFUL THAT WAY dal film La vita è bella (Noa - Gil Dor - N. Piovani) (3:42)</li>
    <li>RAINDROPS KEEP FALLING ON MY HEAD dal film Butch Cassidy (H. David - B. Bacharach) (3:01)></li>
    <li>CAVATINA dal film Il cacciatore (S. Myers) (3:41)</li>
    <li>TARA'S THEME dal film Via col vento (M. Steiner) (3:12)</li>
    <li>I JUST CALLED TO SAY I LOVE YOU dal film La signora in rosso (S. Wonder) (3:12)</li>
    <li>LIMELIGHT dal film Luci della ribalta (C. Chaplin) (2:16)</li>
    <li>NEVER ENDING STORY dal film La storia infinita (K. Forsey - G. Moroder) (3:11)</li>
    <li>ANONIMO VENEZIANO dal film omonimo (S. Cipriani) (5:04)</li>
    <li>PARLAMI D'AMORE MARIÚ dal film Gli uomini, che mascalzoni! (E. Neri - C. A. Bixio) (3:26)</li>
    <li>WESTERN BY SERGIO LEONE (Per un pugno di dollari, Per qualche dollaro in più, Il buono, il brutto, il cattivo, C'era una volta il West) (E. Morricone) (8:58)</li>
    <li>PICNIC IN CENTRAL PARK per un film da realizzare (A. Montepaone) (3:12)</li>
    <li>METTI UNA SERA A CENA dal film omonimo (G. Patroni Griffi - E. Morricone) (4:13)</li>
    <li>MY HEART WILL GO ON dal film Titanic (W. Jennings - J. Horner) (3:47)</li>
    <li>THEMES FOR FELLINI (Amarcord, La dolce vita, Otto e mezzo, La voce della luna) (N. Rota - V. Cerami - N. Piovani) (7:56)</li>
    <li>NUOVO CINEMA PARADISO dal film omonimo (E. e A. Morricone) (3:55)</li>
    <li>TEMA DI LARA dal film Il dottor Zivago (M. Jarre) (3:05)</li>
    <li>WHAT A FEELING dal film Flashdance (K. Forsey - I. Cara - G. Moroder) (2:52)</li>
    <li>CHARIOTS OF FIRE dal film Momenti di gloria (Vangelis) (3:11)</li>
  </ol>
  
  
  
  <ul class="discoinfo">
    <li>Arrangiato e prodotto da Andrea Montepaone</li>
    <li>Registrato in digitale in diretta a Roma il 23 marzo 2004</li>
    <li>Missato e masterizzato nel marzo 2004</li>
  </ul>
  
  <p>Interpreti:</p>

  <ul class="discoinfo">
    <li>Andrea Montepaone: pianoforte</li>
    <li>Silvia Barba: voce</li>
    <li>Renzo Forniti: basso</li>
    <li>Francesco Sarra: batteria</li>
  </ul>

</div>

<div class="album">
    <h4 class="title">2008 NATURA (in uscita)</h4>
    
    <img src="img/cover_non_disponibile.jpg" class="left" height="170" width=   "170"  alt="Copertina Note di cinema" />

   <div class="descrizione">
       <p>Catalogo: Montepaone 001 03 <br />
          RAI TRADE S.p.A. Edizioni Musicali<br />
          Durata: ??:?? <br />
          Data di uscita: ?? aprile 2008 <br />
          Supporto: CD</p>
   </div><br /><br /><br /><br /><br />
    
   <p>Track List:</p>

   <ol>
     <li>DE RERUM NATURA (3:58)</li>
     <li>OLTRE LA COLLINA (3:24)</li>
     <li>L’ALVEARE (3:13)</li>
     <li>POLARIS (3:05)</li>
     <li>PANORAMI NASCOSTI (2:59)</li>
     <li>LANCETTE (3:42)</li>
     <li>PETTIROSSI (3:56)</li>
     <li>TRAMONTO ROSSO (4:50)</li>
     <li>IL CARILLON DELLE FATE (3:40)</li>
     <li>FIORI DI LUCE (3:23)</li>
     <li>SOGNI AD OCCHI APERTI (3:32)</li>
     <li>SENTIERI SEGRETI (3:05)</li>
     <li>LA LUCE DEL TEMPO (4:25)</li>
     <li>VOLO SUL LAGO (3:27)</li>
  </ol>   
  
   
    
   <ul class="discoinfo">
     <li>Musiche e arrangiamenti di Andrea Montepaone</li>
     <li>Prodotto da Andrea Montepaone</li>
     <li>Registrato in digitale nell’ottobre 2007</li>
     <li>Missato e masterizzato in digitale tra l’ottobre e il dicembre 2007
         presso lo studio JGR di Roma.</li>
     <li>Tecnico del suono: Jurij G. Ricotti</li>
   </ul>
   
   <p>Interpreti:</p>
   
 
   <p>Quartetto d’archi in “De rerum natura”, “L’alveare” e “Pettirossi”:</p>

  <ul class="discoinfo">
    <li>Primo violino: Giusi Petti</li>
    <li>Secondo violino: Robert Andorka</li>
    <li>Viola: Francesco Ramous</li>
    <li>Violoncello: Stefano Sovrani</li>
  </ul> 
  
  <br />
  <p>Quartetto d’archi in “Oltre la collina” e “Tramonto rosso”:</p>
  
  <ul class="discoinfo">
    <li>Primo violino: Matteo Ceccarelli</li>
    <li>Secondo violino: Fabio Acone</li>
    <li>Viola: Lucia Venturini </li>
    <li>Violoncello: Stefano Sovrani</li>
  </ul>
  
  <p>L’album, di uso promozionale non destinato alla vendita, è disponibile a richiesta presso l’editore     ai seguenti recapiti:</p> 
  <p> Rai Trade S.p.A. Edizioni Musicali</p> 
  <p>Via U. Novaro, 18, 00195 Roma</p>
  <p>Tel.: 0637498443</p>
  
</div>

<div class="album">

    <h4 class="title">2008 A TRIP AROUND THE WORLD (in uscita)</h4>
    
    <img src="img/cover_non_disponibile.jpg" class="left" height="170" width=   "170"  alt="Copertina Note di cinema" />
    
   <div class="descrizione">
       <p>Catalogo: Montepaone 001 03 <br />
          Edizioni Musicali EMERGENCY MUSIC ITALY S.r.l. / Edizioni Musicali GIPSY s.a.s <br />
          Durata: ??:?? <br />
          Data di uscita: ?? aprile 2008 <br />
          Supporto: CD</p>
   </div><br /><br /><br /><br />
   
   <p>Track List:</p>

   <ol>
     <li>LUNGOTEVERE (3:27)</li>
     <li>RIVE GAUCHE (3:50)</li>
     <li>KING CROSS (2:16)</li>
     <li>CAPETOWN (2:56)</li>
     <li>DUBAI CITY (2:48)</li>
     <li>ALBA INDIANA (3:54)</li>
     <li>GRATTACIELI A SINGAPORE (3:20)</li>
     <li>TOKYO BUSINESS (2:44)</li>
     <li>L’ISOLA DEI CANGURI (4:40)</li>
     <li>CHICAGO BLUES (3:09)</li>
     <li>REGGAE PARTY (2:28)</li>
     <li>COPACABANA (2:29)</li>
  </ol>   
  
  
    
   <ul class="discoinfo">
     <li>Musiche e arrangiamenti di Andrea Montepaone</li>
     <li>Prodotto da Piero Colasanti</li>
     <li>Registrato in digitale tra il dicembre 2007 e il gennaio 2008
         presso lo studio JGR di Roma</li>
     <li>Tecnico del suono: Jurij G. Ricotti</li>
     <li>6 registrato in digitale nel gennaio 2006.         </li>
     <li>Tecnico del suono: Alexandre Smirnov</li>
     <li>10 pre-registrato in digitale nel gennaio 2006. </li>
     <li>Tecnico del suono: Alexandre Smirnov</li>
     <li>Missato e masterizzato in digitale nel gennaio 2008 presso lo studio JGR di Roma da Jurij G.         Ricotti</li>
     </ul>
  
  <p>Interpreti:</p>
  
  <ul class="discoinfo">
     <li>Gianfranco Di Lelio, armonica a bocca in “Rive gauche”, “King Cross ” e “Chicago Blues”</li>
     <li>Jurij G. Ricotti, chitarre elettriche in “L’isola dei canguri” e “Reggae Party”</li>
  </ul>
  
  <p>L’album, di uso promozionale non destinato alla vendita, è disponibile a richiesta presso l’editore     ai seguenti recapiti: </p>
  <p>Edizioni Musicali Emergency Music Italy S.r.l. / Edizioni Musicali Gipsy     s.a.s. </p>
  <p>Viale G. Mazzini, 41 00195 Roma </p>
  <p>Tel.: 063218308 - 063219570</p>
</div>
 
</div>
</body>
</html>

e questo è il codice CSS:

Codice:

/**************** 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;  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.6em;
	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: 2.1em; letter-spacing:-2px;}

#content h4{
color:#d85d5d;
text-align: left;
font-weight:600; 
font-size: 1.3em;
}

#content ol{
text-align: left;
margin-bottom: 30px;
}

ul.discoinfo{
   list-style:circle;
   text-align: left;
   font-size: 1.1em
}


.album{
   padding-top: 30px;
}

.descrizione{
padding-top: 5px;
}


.left {
margin: 10px 30px 5px 0;
float: left;

}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.bold{
   font-weight: 700;
}

.title{
    text-decoration: underline;
}

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

/* Stile del form dei contatti */

.insert{
    font: bold 12px;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	float: left;
	
}

.testo{
    font: bold 12px;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
	float: left;
	
}

.pulsante{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    text-align: center;
	border: 1px solid #000000;
}

.etichetta{
float:left;
}

Per favore aiutatemi

Grazie
abc

gugoXX · 26-04-2008, 12:40

prova a mettere i due elementi all'interno di una riga di una tabella, in due colonne.

abc84XXX · 26-04-2008, 12:48

Quote:

Originariamente inviato da gugoXX

prova a mettere i due elementi all'interno di una riga di una tabella, in due colonne.

L'idea sarebbe proprio quella di eliminare le tabelle in quanto si tratta di un layout tabless...qualche idea?

m.distrutti · 26-04-2008, 14:21

mi sembra di vedere le icone di copertina in un contenitore con classe "copertina"

prova a far flottare la clssse copertina a sinistra o a destra come hai fatto per atri blocchi

la domanda e' :

vuoi un layout del tipo

1)

Codice:

 __
|  | testo
|__| testo
     testo
     testo

inizio paragrafo etc...

oppure :

2)

Codice:

 __
|  | testo
|__| testo
testo subito sotto
altro testo 

inizio paragrafo etc...

26-04-2008, 12:40	#2
gugoXX Senior Member Iscritto dal: May 2004 Città: Londra (Torino) Messaggi: 3692	prova a mettere i due elementi all'interno di una riga di una tabella, in due colonne. __________________ Se pensi che il tuo codice sia troppo complesso da capire senza commenti, e' segno che molto probabilmente il tuo codice e' semplicemente mal scritto. E se pensi di avere bisogno di un nuovo commento, significa che ti manca almeno un test.

26-04-2008, 14:21	#4
m.distrutti Member Iscritto dal: Sep 2007 Messaggi: 207	mi sembra di vedere le icone di copertina in un contenitore con classe "copertina" prova a far flottare la clssse copertina a sinistra o a destra come hai fatto per atri blocchi la domanda e' : vuoi un layout del tipo 1) Codice: __ \| \| testo \|__\| testo testo testo inizio paragrafo etc... oppure : 2) Codice: __ \| \| testo \|__\| testo testo subito sotto altro testo inizio paragrafo etc... Ultima modifica di m.distrutti : 26-04-2008 alle 14:24.

Strumenti
Mostra una versione stampabile Invia questa pagina per email