Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Problema allineamento verticale titolo in relazione ad una img flottante

    Ciao ragazzi, come da titolo vorrei allineare un titolo in verticale in modo che sia sempre centrato rispetto ad un img flottante che lo precede.

    Ogni elemento è inserito in una lista. Eccovi l'html:

    codice:
    <ul>[*][img]immagini/interviste/miniature/nd.jpg[/img]<h2>http://Neil Gaiman e Terry Pratchett...lisse a tutti!</h2>
    
    intervista inserita il 15-06-2007
    Commenti ricevuti: 0</p><div class="clear"></div>[/list]
    l'immagine, l'h2 e il p flottano verso sinistra. Ecco il codice:

    codice:
    #elenco_intermedie ul{
      margin:0;
      padding:0;
      list-style-type: none;
    }
    
    #elenco_intermedie li{
      margin: 8px 5px;
      padding: 2px 0 2px 0;
      min-height:48px;
      border: 1px solid #665A7A;
      background: white;
    }
    
    #elenco_intermedie li h2 {
      display: inline;
      margin:0;
      padding: 6px 0 0 10px;
      float: left;
      width: 350px;
      min-height:38px;
      font-family: arial;
      font-size: 11pt;
      font-weight: bold;
    }
    
    #elenco_intermedie li p {
      margin: 0;
      padding: 0;
      line-height: 2;
      font-family: arial;
      font-size: 9pt;
      font-weight: bold;
      text-align: center;
    }
    
    #elenco_intermedie li img{
      float:left;
      margin-left: 3px;
      border: 1px solid #665A7A;
    }
    eccovi il risultato che ho ottenuto sinora giocando con il padding, ma è una soluzione sporca che non mi piace:



    Che mi consigliate? grazie
    Disegnatori e romanzieri d'Italia, visitate il mio sito, cerchiamo favolieri dark ed illustratori dark fantasy... http://www.neilgaimania.it

  2. #2
    Utente di HTML.it L'avatar di gabar-el
    Registrato dal
    Jun 2006
    Messaggi
    2,222
    potresti usare le immagini di sfondo nei li così
    codice:
    #elenco_intermedie li{
      margin: 8px 5px;
      padding: 2px 0 2px 0;
      min-height:48px;
      border: 1px solid #665A7A;
      background-color: white;
      background: url(immagini/interviste/miniature/nd.jpg) no-repeat center left;
    }
    poi giochi di margin e padding per ottenere ciò che vuoi, ovvio che eliminerai le parti di codice che non ti servono +...
    Si fanno sempre nuove scoperte

  3. #3
    Grazie del consiglio, ma non può funzionare... perché le immagini possono cambiare per ogni riga...
    Disegnatori e romanzieri d'Italia, visitate il mio sito, cerchiamo favolieri dark ed illustratori dark fantasy... http://www.neilgaimania.it

  4. #4
    Utente di HTML.it L'avatar di gabar-el
    Registrato dal
    Jun 2006
    Messaggi
    2,222
    beh, creando delle classi risolvi la cosa no?
    formatti tutto il[*] e poi crei il background personalizzato di ogni img....
    Si fanno sempre nuove scoperte

  5. #5
    Mmmmmm, e dovrei creare dinamicamente delle classi nel css (sito in php)? troppo complicato e credo pure che sia scorretto perché quell'immagine non è uno sfondo ma è contenuto... quindi va nell'html...
    Disegnatori e romanzieri d'Italia, visitate il mio sito, cerchiamo favolieri dark ed illustratori dark fantasy... http://www.neilgaimania.it

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.