Ciao ragazzi. Ho una domanda...
Ho un div, all'interno altri div...questi ultimi vengono creati dinamicamente, quindi possono esserci n div dentro a quello principale. Adesso voglio che in quello principale appari una barra orizzontale, quindi ho pensato di mettere overflow:auto, soltato succede che la barra appare verticale. ho provato anche a giocare con gli overflow y e x, ma nada. Qualcuno sa come aiutarmi?
Grazie mille.
Una barra orizzontale di cosa? Un menù?
Se vuoi mettere un menù orizzontale con dentro come item tutti i div creati dinamicamente devi impostare la proprietà display:inline sui div figli.
Scusa, ma onestamente non è molto chiaro il problema: se provi a spiegarti meglio magari qualcuno ti può aiutare!
Ciao.
Ho un div padre, chiamato per esempio
dentro a questo div vengono creati altri div (contenenti scritte) dinamicamente, in base ad un numero che l'utente seleziona nella pagina principale. Per esempio se l'utente seleziona 5 ci saranno 5 div dentro a quello principale con id diversi.Codice PHP:<div id='principale'>
</div>
Adesso voglio mettere nel div principale una barra di scorrimento ma orizzontale, in modo tale che se l'utente selezioni una 30 di div, non c'è il rischio che i div figli stiano uno sotto l'altro ma bensi uno accanto all'altro.Codice PHP:<div id='principale'>
<div id='1'>
[img]/url immagine[/img] o scritte
</div>
<div id='2'>
[img]/url immagine[/img] o scritte
</div>
<div id='3'>
[img]/url immagine[/img] o scritte
</div>
<div id='4'>
[img]/url immagine[/img] o scritte
</div>
<div id='5'>
[img]/url immagine[/img] o scritte
</div>
</div>
Interessante la tua idea, ma non credo che con css si riesca.
Anche se usi questo codice:
noterai che lo scroll orizzontale non compare se il numero di div aumenta.codice:<style> body {margin:0;padding:0} #principale { margin: 20px; height:150px; width:400px; border:3px solid blue; overflow-x:scroll; overflow-y:hidden; } #principale div { display:inline-block; margin:5px; border:1px solid red; height:100px; width:100px; } </style> </head> <body> <div id="principale"> <div id='1'> contenuto</p> </div> <div id='2'> contenuto</p> </div> <div id='3'> contenuto</p> </div> <div id='4'> contenuto</p> </div> <div id='5'> contenuto</p> </div> </div> </div> </body>
Soluzione: carosello in js.
A meno che qualche guru del forum ne sappia una in più del diavolo (e questo è molto facile!!)
Ciao.
con overflow x e y avevo già provato. Ti nasconde la barra orizzontale ma quella verticale non la mette...cioè i div vengono messi sempre uno sotto l'altro...Ma il problema sono i div dinamici?se fossero stati fissi, allora la soluzione c'era ?...
Un esempio:
se puoi usare degli span, altrimenti sui div dovrai impostare un display-inline.codice:#suUnicaRiga { width:300px; height:100px; white-space:nowrap; overflow:auto } <div id="suUnicaRiga"> <span>[img]gif.gif[/img]</span> <span>testo testo testo</span> <span>[img]gif.gif[/img]</span> <span>testo testo testo</span> <span>[img]gif.gif[/img]</span> <span>testo testo testo</span> <span>[img]gif.gif[/img]</span> <span>testo testo testo</span> <span>[img]gif.gif[/img]</span> <span>testo testo testo</span> </div>
Oppure in base al numero di div scelti dall'utente dovrebbe essere calcolata la larghezza di un div che li racchiuderà (e i vari contenuti potrebbero essere affiancati anche col float) e quest'ultimo essere inserito nel tuo div principale per il quale potresti avere la larghezza preferita e l'overflow:auto
L'ottima soluzione di Prill funziona anche con i div al posto degli span.
Ciao.codice:#suUnicaRiga { width:500px; height:150px; white-space:nowrap; overflow:auto; } #suUnicaRiga div { display:inline; }
Con i div e il display:inline è da testare però con Explorer (con ie6 non funge)
hmm a me continua ad andare a capo.
Ho usato la soluzione di MaxSimon, perchè devo per forza mettere i div...ma nada de nada
Ma con che browser lo stai guardando? Con Firefox ti assicuro che funziona.
Non hai un link per farci vedere la pagina?
Permessi di invio
Rispondi quotando