Allineare div in verticale

**dakation** · 06-03-2014, 18.06.05

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>

**acsocmel** · 06-03-2014, 19.11.54

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

**dakation** · 06-03-2014, 19.34.18

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

**acsocmel** · 06-03-2014, 19.51.10

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

**dakation** · 10-03-2014, 16.14.29

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%

**karl94** · 11-03-2014, 23.21.51

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.

**dakation** · 12-03-2014, 17.36.22

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

**karl94** · 12-03-2014, 17.57.51

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.

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).

**dakation** · 12-03-2014, 18.15.48

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.

**karl94** · 12-03-2014, 18.22.23

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?

**dakation** · 12-03-2014, 19.05.40

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.

**karl94** · 12-03-2014, 20.59.34

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.

**dakation** · 13-03-2014, 16.54.21

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.

**karl94** · 13-03-2014, 17.08.03

Originalmente inviato da dakation

width:calc (100% + 380px)

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.

**dakation** · 13-03-2014, 18.12.38

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

Discussione: Allineare div in verticale

LinkBack

Strumenti discussione

Display

Allineare div in verticale

Tags for this Thread

Regole di scrittura