come visualizzare 3 o piu div tutti di fianco

**Maison Ikkoku** · 26-03-2008, 22:57

in praica c'e un div container con: overflow:hidden; e width: 300
e all'interno 5 div con proprieta float:left, e width: 200.
Vorrei visualizzare i 5 div uno di seguito all'altro ma il secondo div si mette sotto al primo!
ho provato tutte le combinazioni di display, cosa posso fare?
Grazie

**fcaldera** · 26-03-2008, 23:06

partiamo dalle basi

se hai un contenitore largo 300px come puoi aspettarti che 5 blocchi da 200px (cioè larghi complessivamente 1000px) stiano affiancati?

Al massimo ciascun blocco interno non potrà essere più largo di 300/5 = 60px.

**Maison Ikkoku** · 26-03-2008, 23:41

se volessi fare uno slideshow con i div e ne ho visti tanti è possibile! L'avevo realizzato in passato ma non mi ricordo più è da tanto che non smanetto con i css

**fcaldera** · 27-03-2008, 00:24

prima di intraprendere lo sviluppo di uno slideshow orizzontale ti suggerisco di dare un occhio alle librerie già pronte (come 'slideshow' per mootools ad esempio)

se vuoi comunque cimentarti potresti iniziare con una base del genere

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
        <style>
        .slideshow { 
            width   : 500px;
            height  : 210px; 
            overflow: hidden;
            border  : 1px solid gray;
        }
        
        .wrapper {
           /* (width va ricalcolata al domload in base al numero di div.slide che contiene */
           width    : 1100px; 
           height   : 208px;
           border   : 1px dashed green;
           position : relative;
        }
        
        .slide {
           width    : 200px;
           height   : 200px;
           float    : left;
           display  : inline;
           margin   : 4px 20px 0 0;
           border   : 1px solid red;
        }
        </style>
        
    </head>
    
    <body>
    
    <div class="slideshow">
        <div class="wrapper">
        
            <div class="slide">Slide1</div>
            <div class="slide">Slide2</div>
            <div class="slide">Slide3</div>
            <div class="slide">Slide4</div>
            <div class="slide">Slide5</div>
            
        </div>
    </div>
    
    </body>
</html>

Per animare lo slideshow - attraverso un qualche evento javascript - devi modificare la proprietà left dell'elemento .wrapper (quello tratteggiato in verde).

Quando left = 0; lo slideshow è all'inizio. Per spostare la fascia verso sinistra devi decrementare il valore di left.

Se prosegui la discussione eventualmente sposterò in javascript

**Maison Ikkoku** · 27-03-2008, 10:48

ci sono riuscito ma il problema non è javascript o utilizzare qualche libreria in particolare, cmq ti ringrazio.
Bastava utilizzare un supercontenitore div position normale, un contenitore positio absolute, e tutti i div che vuoi con posizione assoluta

<div id="superContainer">
<div id="container">

<div id="slide1">
</div>
<div id="slide2">
</div>
....

</div>
</div>

Discussione: come visualizzare 3 o piu div tutti di fianco

Strumenti discussione

Ricerca discussione

Visualizza

come visualizzare 3 o piu div tutti di fianco

Permessi di invio