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

    Creare una tabella con i DIV senza doppie barre di scorrimento

    Buongiorno a tutti, spero che qualcuno possa aiutarmi con questo dilemma.
    Sul mio sito http://rosadeiventi.netsons.org, nelle varie sezioni, ho creato un elenco di contenuti table less (ossia senza utilizzare il tag table), ma con l'utilizzo dei DIV e fin qui tutto ok.
    Prendiamo per esempio la sezione cinema:
    - ho creato un DIV maxi contenitore con overflow=auto che contiene l'elenco
    - per ogni film ho utilizzato 2 DIV per la locandina del film (uno per il riquadro, uno per l'immagine) e 2 DIV per i dati del film (uno per il riquadro, uno per inserire titolo, cast, trama ecc)
    - per ogni film ho impostato l'overflow=auto sui dati per evitare l'accavallamento delle varie righe della "tabella".
    Il problema è che non vorrei avere le barre di scorrimento sia sul singolo film che sul maxi contenitore, ma non posso nemmeno impostare un top per ogni riga in quanto non so a priori l'altezza dei contenuti.
    Come posso fare per realizzare questa sorta di tabella senza il doppio overflow?
    Spero di aver spiegato bene ciò che mi serve e spero che qualcuno possa aiutarmi a risolvere il problema. :master:

    Grazie anticipatamente
    The Fresh...remaker
    A volte la risposta è sotto ai nostri occhi, bisogna solo aver voglia di cercarla!!
    http://www.angelsinthedark.it

  2. #2
    Nessuno mi aiuta???
    The Fresh...remaker
    A volte la risposta è sotto ai nostri occhi, bisogna solo aver voglia di cercarla!!
    http://www.angelsinthedark.it

  3. #3
    mi hai messo una bella pulce in un orecchio... anche perchè serve anche a me una cosa del genere...

    ora non ci dormo stanotte...

    non sono riuscito completamente ad aggiustare il tutto ma prima di procedere a quanto ti dirò, fa una cosa: COPIA DI BACKUP (non voglio responsabilità :-)

    allora:

    inserisci le immagini e il testo descrittivo di ogni singolo film all'interno di un'altro div che li racchiuda.
    poi cambia il tuo stile con questo:
    codice:
    .cinemadivdw_1 {
    border:1px solid black;
    color:#666666;
    font-family:Tahoma;
    font-size:8pt;
    left:116px;
    position:absolute;
    width:600px;
    }
    in teoria, se inserisci un altro div che racchiuda immagine e testo, si sposterà tutto assieme. ora c'è un errore essendo non collegati, il testo del film successivo si scrive sopra l'immagine del film precedente...

    in questo modo dovresi riuscire. per le proprietà del nuovo div, mantieni quelle del cinemadivdw principale, senza overflow...

    quando hai fatto controlla e carica il tutto... se non ti viene qualche errore gioca con il position del div nuovo appena creato, provando con le varie opzioni (se non va con absolute, prova con relative)


    fammi sapere...

    ciao!

  4. #4
    scusa... non considerare il codice di prima...

    codice:
    .cinemadivdw_1cont {
    color:#666666;
    font-family:Tahoma;
    font-size:8pt;
    margin:0pt;
    position:relative;
    text-align:justify;
    }
    codice:
    .cinemadivdw_1 {
    border:1px solid black;
    color:#666666;
    font-family:Tahoma;
    font-size:8pt;
    left:116px;
    position:absolute;
    width:600px;
    }
    ripeto.. così un qualcosa funziona, ma ogni tanto un testo va a sovrascriversi i quanto l'immagine non è collegata a tutto il resto... prova a modificare un po e poi ci risentiamo...

    ciao!

  5. #5
    Grazie! Provo in giornata e poi ti faccio sapere!
    The Fresh...remaker
    A volte la risposta è sotto ai nostri occhi, bisogna solo aver voglia di cercarla!!
    http://www.angelsinthedark.it

  6. #6
    Srg sei un genio!!! Funziona!
    Ho aggiunto un doppio div contenitore e ho cambiato alcune proprietà nel CSS. Posto il codice:

    Pagina HTML:
    codice:
     
    <div class='cinemafilm'>
         <div class='cinemafilm_cont'> 
    	  <div class='cinemadivdw_0'> 
    		<div class='cinemadivdw_0cont'> 
    		     <img ... />
    		</div>
    	  </div>
    	  <div class='cinemadivdw_1'> 
    		<div class='cinemadivdw_1cont'>
                          Titolo:...
    
    		      Titolo Originale:....
    
    		      Cast:....
    
    		      Anno e Genere:....
    
    		      Regista:....
    
    
    		      Trama:.....
    		</div>
    	  </div>
         </div>
    </div>
    CSS:
    codice:
    /* CINEMA CONTENITORE FILM */
    .cinemafilm {
    	position: relative; 
    	height: auto;
    	left: 3px; 
    	width: 710px; 
    	color: #666666;
    	padding-left: 0px;
    	padding-right: 0px;
    	padding-top: 5px;
    	padding-bottom: 20px;
    	margin-top: 10px;
    }
    
    .cinemafilm_cont {
    	text-align: justify; 
    	overflow: hidden; 
    	color: #666666;
    }
    
    
    /* CINEMA LOCANDINA */
    .cinemadivdw_0 {
    	position: absolute; 
    	left: 5px; 
    	height: 143px;
    	width: 100px; 
    	overflow: hidden; 
    	border: 1px outset black;
    	color: #666666;
    }
    
    .cinemadivdw_0cont {
    	text-align: center; 
    	height: 143px; 
    	overflow: hidden; 
    	color: #666666;
    }
    
    /* CINEMA DATI FILM */
    .cinemadivdw_1 {
    	position: relative; 
    	left: 116px; 
    	height: auto;
    	width: 590px;
    	border: 1px solid black;
    	font-family: Tahoma;
    	font-size: 8pt;
    	color: #666666;
    }
    
    .cinemadivdw_1cont {
    	text-align: justify; 
    	height: auto;	
    	padding: 5px;
    	font-family: Tahoma;
    	font-size: 8pt;
    	color: #666666;
    }
    GRAZIE GRAZIE GRAZIE!!! Così posso adattare nello stesso modo anche le altre pagine...

    The Fresh...remaker
    A volte la risposta è sotto ai nostri occhi, bisogna solo aver voglia di cercarla!!
    http://www.angelsinthedark.it

  7. #7
    scusa, ma perchè ne hai creati due?

    non riesci ad unirli entrambi?

    e perchè metti ancora overflow hidden? non serve più a questo punto.... (credo, ma non riesco a testarlo ora)... no vinene la stessa cosa facendo come sege

    codice:
    .cinemafilm {
    	position: relative; 
    	height: auto;
    	left: 3px; 
    	width: 710px; 
    	color: #666666;
    	padding-left: 0px;
    	padding-right: 0px;
    	padding-top: 5px;
    	padding-bottom: 20px;
    	margin-top: 10px;
    	text-align: justify;
    }
    
    .cinemafilm_cont {
    !!!!! Questa è una ripetizione, quindi per me può essere eliminato (credo) !!!!
    }

  8. #8
    Originariamente inviato da mentos
    Srg sei un genio!!! Funziona!
    Ho aggiunto un doppio div contenitore e ho cambiato alcune proprietà nel CSS. Posto il codice:

    modestamente... mi servono i dati per la fatturazione.... (come da accordi, paghi a gennaio... e sconto 5% :-) )

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 © 2026 vBulletin Solutions, Inc. All rights reserved.