Allineare div in verticale

Printable View

06-03-2014, 18.06.05
dakation

Allineare div in verticale

Ho una pagina con tre div (di cui uno largo 100%), ma non riesco a metterli senza farli andare a capo:
come sono adesso:

Codice:

< larghezza schermo > ------- | | ----------------------------- | | ----------------------------- | | --------

Come mi servono:

Codice:

< larghezza schermo > --------------------------------------------- | || || | ---------------------------------------------

Codice:

Codice HTML:

<body style="margin:0"> <div style="widht:1000%"><div style=background-color:#333333;width:130px;min-height:100%;float:left>Menu</div> <div style=width:100%;height:100%;padding:0;float:left> Corpo</div> <div style=background-color:#333333;height:100%;float:left;width:130px;>Cerca</div> </div></body>
06-03-2014, 19.11.54
acsocmel

se un div è largo 100% ovviamente tutti si metteranno in colonna perchè la somma delle larghezze è superiore alla larghezza della finestra
fai vedere la pagina che stai facendo
06-03-2014, 19.34.18
dakation

Citazione:

Originalmente inviato da acsocmel

se un div è largo 100% ovviamente tutti si metteranno in colonna perchè la somma delle larghezze è superiore alla larghezza della finestra
fai vedere la pagina che stai facendo

Infatti il mio scopo è avere uno scorrimento orizzontale e non in verticale.

http://dakation.altervista.org/app.html
06-03-2014, 19.51.10
acsocmel

usa un doctype
separa i css dall'html
al momento evita quelle altezze
fai un contenitore esterno largo 100%
fai un contenitore interno largo quanto ti serve
10-03-2014, 16.14.29
dakation

Citazione:

Originalmente inviato da acsocmel

fai un contenitore esterno largo 100%
fai un contenitore interno largo quanto ti serve

Ma a me serve un div contenitore largo più del 100% e alto 100%
11-03-2014, 23.21.51
karl94

Se ti serve più largo del 100%, allora imposta una larghezza che sia superiore. Comunque non capisco perché voglia realizzare un layout così fastidioso per l'utente.
12-03-2014, 17.36.22
dakation

Citazione:

Originalmente inviato da karl94

Se ti serve più largo del 100%, allora imposta una larghezza che sia superiore. Comunque non capisco perché voglia realizzare un layout così fastidioso per l'utente.

Io imposto la larghezza del contenitore al più del 100% (imposto la misura che mi serve) e va a capo lo stesso.
In realtà non è scomodo: mi serve un scrolling orizzontale
12-03-2014, 17.57.51
karl94

Citazione:

Originalmente inviato da dakation

Io imposto la larghezza del contenitore al più del 100% (imposto la misura che mi serve) e va a capo lo stesso.

Anzitutto, hai scritto widht anziché width, poi se lasci i vari div contenuti in questo con larghezza pari al 100% ovviamente continuerà a non funzionare, in quanto avranno la stessa larghezza del contenitore e per come funzionano i box flottanti, a sinistra e a destra non avranno altri box accanto.

Citazione:

Originalmente inviato da dakation

In realtà non è scomodo: mi serve un scrolling orizzontale

Sì, ma perché? Solitamente è una cosa che rende più difficile la consultazione della pagina, in quanto costringe l'utente ad usare la barra di scorrimento (posto che l'utente faccia uso di un mouse con solo una rotella di scorrimento verticale come dispositivo di puntamento).
12-03-2014, 18.15.48
dakation

Citazione:

Originalmente inviato da karl94

Anzitutto, hai scritto widht anziché width, poi se lasci i vari div contenuti in questo con larghezza pari al 100% ovviamente continuerà a non funzionare, in quanto avranno la stessa larghezza del contenitore e per come funzionano i box flottanti, a sinistra e a destra non avranno altri box accanto.
Sì, ma perché? Solitamente è una cosa che rende più difficile la consultazione della pagina, in quanto costringe l'utente ad usare la barra di scorrimento (posto che l'utente faccia uso di un mouse con solo una rotella di scorrimento verticale come dispositivo di puntamento).

Si ho correto width in locale, ma non cambia niente. E' una pagina pensata per uso tablet quindi lo scorrimento verticale non è un problema.
12-03-2014, 18.22.23
karl94

Citazione:

Originalmente inviato da dakation

E' una pagina pensata per uso tablet quindi lo scorrimento verticale non è un problema.

Ah, allora tutto a posto.

Comunque, hai anche modificato la larghezza degli elementi figli? Puoi caricare le modifiche in modo tale da controllare il tutto?
12-03-2014, 19.05.40
dakation

Citazione:

Originalmente inviato da karl94

Ah, allora tutto a posto.

Comunque, hai anche modificato la larghezza degli elementi figli? Puoi caricare le modifiche in modo tale da controllare il tutto?

Ok ho quasi fatto:
http://dakation.altervista.org/app.html

Rimane solo un problema: la larghezza dovrebbe essere 100% + 380 px, ma con width:calc (100% + 380px) nel contenitore da errore.
12-03-2014, 20.59.34
karl94

Citazione:

Originalmente inviato da dakation

Rimane solo un problema: la larghezza dovrebbe essere 100% + 380 px, ma con width:calc (100% + 380px) nel contenitore da errore.

E che errore? Io ho provato e non ho avuto problemi.
13-03-2014, 16.54.21
dakation

Citazione:

Originalmente inviato da karl94

E che errore? Io ho provato e non ho avuto problemi.

Beh nella consolle di Firefox non viene segnato il width:calc (100% +380px); nella colonna "Regole" e in effetti assegna al width il 100%.
Su Chrome lo taglia e ci mette vicino un triangolo giallo con un punto esclamativo:valore non valido.
13-03-2014, 17.08.03
karl94

Citazione:

Originalmente inviato da dakation

width:calc (100% + 380px)

Citazione:

Originalmente inviato da dakation

width:calc (100% +380px)

Quale delle due varianti stai usando? Quando pubblichi del codice usa la formattazione apposita e sii preciso, preferibilmente aggiorna la pagina in questione in modo da poter controllare direttamente cosa c'è che non va.

La sintassi corretta comunque non ammette spazi bianchi tra l'identificatore calc e la parentesi tonda, mentre sono obbligatori a destra e a sinistra degli operatori somma e differenza dell'espressione.
13-03-2014, 18.12.38
dakation

Citazione:

Originalmente inviato da karl94

Quale delle due varianti stai usando? Quando pubblichi del codice usa la formattazione apposita e sii preciso, preferibilmente aggiorna la pagina in questione in modo da poter controllare direttamente cosa c'è che non va.

La sintassi corretta comunque non ammette spazi bianchi tra l'identificatore calc e la parentesi tonda, mentre sono obbligatori a destra e a sinistra degli operatori somma e differenza dell'espressione.

Si me ne sono accorto, ora funziona perfettamente Grazie di tutto:thumbsup::up: