DIV vanno a capo

teju

DIV vanno a capo

Ciao ragazzi, sto un attimo impazzendo con le dimensioni dei DIV di un sitarello per un progetto in Ghana.

Il template base lo trovate su http: // givingtoghana.org/_ice/

Come vedete da desktop ho, per ciascuna riga, 4 bottoni affiancati che mi occupano tutto lo spazio. Se lo guardo da dispositivo mobile il 4° bottone mi sfalsa e va a capo... Ho provato ad aggiungere del margine e mettere in percentuale le dimensioni, ma riesco ad ottenere qualcosa di buono su iPhone, ma non Android...

Ho così provato a documentarmi un attimo, ho trovato che molti richiamavano funzionalità CSS con "@only screen" (es. http: // www . giovannisodano.it/blog/layout-css-per-ogni-schermo-con-media-query/), ma comunque senza risultato...!

Help please! Ovviamente la piattaforma sarà utilizzata principalmente su mobile, ma anche da PC, dunque vorrei si vedesse bene da entrambe le parti!
Grazie

quinto

Ciao non sono un'espertone.. (anzi sono in fase di studio) ma provo a risponderti lo stesso ( anche perchè ho lavorato una bella oretta sul tuo codice e mi spiacerebbe fosse tempo perso) . Intanto mi sembra ci siano un errore formale: il selettore 'id' credo che debba identificare in modo univoco un solo elemento nella pagina html invece tu usi due volte lo stesso selettore id sia per box che per text quindi ho cominciato a sostituirli con due class.
Sono andato un po per tentativi e non l'ho provato su android.. ma provandolo sul pc ridimensionando la finestra i div stanno allineati (per lo meno fino a dimensioni minime della finestra).
Qui c'è il codice html e il relativo foglio di stile. Spero come al solito di non aver detto troppe boiate.

Ti saluto.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>ICE GivingToGhana</title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>
    <body>
        <div id="content">
            <div id="header"><h1>ICE | <i>GivingToGhana</i></h1></div>
            <div class="box">
            
                <div><a href="#">Patients List</a></div>
                <div><a href="#">Add Patient</a></div>
                <div>Search</div>
                <div>Docs</div>
            
            </div>
            <div class="txt" style="clear:both">
<h1>View Patient</h1></div>


            <div id="user">Name of patients<br>datas</div>
            <div class="box">
            
                <div style="background: #BCF5A9;"><a href="#">View Events</a></div>
                <div><a href="#">Add Visit</a></div>
                <div><a href="#">Add Docs</a></div>
                <div><a href="#">Add Comment</a></div>
            </div>
            


            <div class="txt" style="clear:both">
            </div>
        </div>
    
</body></html>

/***************************************/
/******* Style ICE GivingToGhana *******/
/***************************************/


body {
    background: #ccc;
    font-family: Verdana;
    font-size: 1em;
}


#content{
    width: 95%;
    margin: auto;
    margin-top: 20px;
    padding: 10px;
    
    background: #FFF;
    border: 1px solid #555;
}


#header h1{
    width: 95%;
    margin: 4px;
    padding: 10px;
    background: #0174DF;
    color:;
    border: 1px solid;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.1em;
}


.box>div{
    width: 100%;
    margin:auto;
    margin-top:30px;
    margin-bottom:30px;
    margin-left:2px; 
    overflow:hidden;
}


.box div {
    
    padding: 5px;
    padding-top: 30px;
    border: 1px solid;
    float:left;
    text-align: center;
    font-weight: bold;
    font-size:0.8em;
    margin:2px;
    margin-bottom: 5px;
    margin-top:10px;
    width: 20%;
    min-height: 50px;
    border:1px solid #000;
    background: #CEECF5;
 
    
}




.order{
    padding-top: 7px !important;
    min-height: 20px !important;    


    font-weight: normal !important;
}


.box a{
    color:;
    text-decoration: none;
}


.box a:hover{
    text-decoration: underline;
}


.txt{
    width: 100%;
    min-height: 1px;
}


.txt h1{
    margin-top: 55px;
    font-size:1.1em;
}


/* Table */
td{
    font-size: 80%;
}


/* FORM */
input, textarea { /* Stili per il campo di testo e per la textarea */
    background:; /* Colore di sfondo */
    border: 1px solid #323232; /* Bordo */
    color:; /* Colore del testo */
    height: 30px; /* Altezza */
    line-height: 30px; /* Altezza di riga */
    width: 70%; /* Larghezza */
    padding: 0 10px; /* Padding */
    font-family: Verdana;
}


.submit{
    border: 1px solid;
    background:#CEECF5;
    color:;
    width: 30%;
}


textarea { /* Stili specifici per la teaxtarea */
    height: 100px;
}


/* Messages */
.error{
    background: #FF0000;
    color:;
    padding: 5px;
    margin-bottom: 10px;
    max-width: 50%;
}


.ok{
    background: #3CB371;
    color:;
    padding: 5px;
    margin-bottom: 10px;
    max-width: 50%;
}

teju

Ciao, grazie, ho provato, ma così facendo i 4 bottoni, sul desktop, non riempiono il 100%.
Aumentando la dimensione dei DIV ricasco nello stesso problema di ieri...

quinto

Hai ragione, il problema, secondo me, è il fatto di dover essere costretti a mischiare misure percentuali con pixel: la proprietà width che riguarda solo il contenuto del div (padding, bordi e margini si vanno poi ad aggiungere a quella larghezza) si può impostare in percentuale, così pure il margine e il padding sinistro/destro si può lasciare in automatico così da non avere problemi, il bordo invece no si può dichiarare solo in px/em (o con le parole chiavi thin, medium e thick) .
Risulta in questo modo facile cadere in incongruenze al variare della risoluzione dello schermo ( 1px di bordo su uno schermo android da 480px è una percentuale molto più alta dello stesso pixel sullo schermo del pc largo, ad esempio 1600).
A questo punto se proprio uno volesse avere per i quattro div l'intera larghezza disponibile l'unica soluzione che ho trovato è stata quella di inserire un margine negativo di 2px a sinistra (per compensare i 2px del bordo e farli quindi uscire dal conteggio percentuale), un margine a destra dello 0,5% e una larghezza dei div a 24,5%; annullando poi il margine sinistro del primo div e il margine destro dell'ultimo con i selettori :first-child e :last-child.

Io meglio di così non riesco a risolvere(mi son fatto una spremuta di meningi.. ) Ti saluto e ti allego pagina e foglio di stile.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>ICE GivingToGhana</title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>
    <body>
        <div id="content">
            <div id="header"><h1>ICE | <i>GivingToGhana</i></h1></div>
            <div class="box">
            
                <div><a href="#">Patients List</a></div>
                <div><a href="#">Add Patient</a></div>
                <div>Search</div>
                <div>Docs</div>
            
            </div>
            <div class="txt" style="clear:both">
<h1>View Patient</h1></div>


            <div id="user">Name of patients<br>datas</div>
            <div class="box">
            
                <div style="background: #BCF5A9;"><a href="#">View Events</a></div>
                <div><a href="#">Add Visit</a></div>
                <div><a href="#">Add Docs</a></div>
                <div><a href="#">Add Comment</a></div>
            </div>
            


            <div class="txt" style="clear:both">
            </div>
        </div>
    
</body></html>

/***************************************/
/******* Style ICE GivingToGhana *******/
/***************************************/


body {
    background: #ccc;
    font-family: Verdana;
    font-size: 80%;
}


#content{
    width: 96%;
    max-width: 960px;
    margin: auto;
    margin-top: 20px;
    padding: 10px;
    
    background: #FFF;
    border: 1px solid #555;
}


#header {
    width: 100%;
    margin: auto;
    padding: auto;
    background: #0174DF;
    color:;
    border: 1px solid;
    margin-top: 3px;
    margin-bottom: 20px;
} h1{
    margin-left: 10px;
    font-weight: bold;
    font-size: 130%;
}


.box {
    width: 100%;
    margin:0px;
    margin-top:30px;
    margin-bottom:30px; 
    overflow:hidden;


}


.box div {
    
    float:left;
    padding: auto;
    padding-top:3em;
    border: 1px solid;
    text-align: center;
    font-weight: bold;
    font-size:1em;
    margin: 0px;
    margin-left:-2px;
    margin-right:0.5%;
    width: 24.5%;
    min-height: 4em;
    background: #CEECF5;
    overflow:hidden;  
}
.box div:first-child {
    margin-left:0px;
}
.box div:last-child {
    margin-right:0%;
}
.order{
    padding-top: 7px !important;
    min-height: 20px !important;    


    font-weight: normal !important;
}


.box a{
    color: #000;
    text-decoration: none;
}


.box a:hover{
    text-decoration: underline;
}


.txt{
    width: 100%;
    min-height: 1px;
}


.txt h1{
    margin-top: 55px;
}


/* Table */
td{
    font-size: 80%;
}


/* FORM */
input, textarea { /* Stili per il campo di testo e per la textarea */
    background:; /* Colore di sfondo */
    border: 1px solid #323232; /* Bordo */
    color:; /* Colore del testo */
    height: 30px; /* Altezza */
    line-height: 30px; /* Altezza di riga */
    width: 70%; /* Larghezza */
    padding: 0 10px; /* Padding */
    font-family: Verdana;
}


.submit{
    border: 1px solid;
    background:#CEECF5;
    color:;
    width: 30%;
}


textarea { /* Stili specifici per la teaxtarea */
    height: 100px;
}


/* Messages */
.error{
    background: #FF0000;
    color:;
    padding: 5px;
    margin-bottom: 10px;
    max-width: 50%;
}


.ok{
    background: #3CB371;
    color:;
    padding: 5px;
    margin-bottom: 10px;
    max-width: 50%;
}

quinto

Forse con margin-left:-3px migliora ulteriormente la visualizzazione su basse risoluzioni, vedi te.. riciao.

teju

Grazie, domani provo!

quinto

Di niente, mi serve per imparare.. ciao

teju

C'erano ancora dei problemi, quindi ho cambiato grafica, inserendo immagini per i bottoni.

Grazie comunque!