quinto

quinto

Di niente, mi serve per imparare.. ciao

quinto

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

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

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%;
}

quinto

Svista.. position: static;

scusa ciao

quinto

Aggiornamento.. per adesso lascio così:
<HTML>
<link rel="stylesheet" media="screen" href="layout.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="phone.css" type="text/css" >
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="phone.css" type="text/css" >
</HTML>

Ho chiesto ad un mio amico di verificare su iphone e su quello funziona, ho provato su un emulatore online di iphone/ipad e samsung e anche li tutto ok.. a questo punto ho ancora il problema con i browser dei miei telefoni android proverò ad installare dolphin e opera per vedere se cambia qualcosa..

quinto

Ciao comincio a risponderti io nell'attesa di qualcuno di più competente, secondo le mie piuttosto scarne conoscenze il posizionamento relativo non altera la disposizione degli altri elementi ( che quindi si posizionano come se il blocco fosse posizionato nella sua originale posizione ) con la conseguenza di possibili sovrapposizioni a seconda della risoluzione dello schermo. Proverei quindi (inserendo la proprieta float:left; anche per il blocco precedente) a inserire dei margini da entrambi i lati per mantenere le colonne ad una distanza fissa qualcosa del tipo:


#navigation_left{
        float: left;
        ecc..
}
#navigation_right {
       position: normal;
        width: 200px;
        float: left;
        padding: 10px;
        margin-left: 30px;
        margin-right: 30px;
        height: 100en;
        overflow: hidden;
}

Eventualmente regolandone il posizionamento in altezza con la proprieta margin-top.

Spero di non aver detto delle boiate, ti saluto.

quinto

Ciao a tutti, ho inserito in un sito un foglio di stile per avere un visualizzazione più semplificata e accessibile quando vi si naviga con un dispositivo 'mobile' inserendo il seguente tag:

Mi ritrovo che se sul pc apro il sito in una finestra rimpicciolita (<=480px) il layout viene giustamente impostato in versione phone.css. Ho provato a caricare la pagina con due smartphone android con due broser diversi (uno quello predefinito android e uno con il boat mini broser) e su entrambi mi viene caricato il css standard layout.css.

Perchè? (è colpa degli smartphone che cercano di caricare la pagina come un pc?)

Qualcuno sa come posso risolvere?

Grazie e

quinto

Ciao, bel sito però ho sentito la mancanza in fondo alle pagine dei pulsanti per muoversi direttamente alle altre trame ( tipo: precedente - successivo) dover tornare tutte le volte alla pagina dell'archivio lo trovo un po' frustrante. Comunque complimenti
Ciao

quinto

Innanzitutto ringrazio GiorgioTave per lo spazio concessomi e per l'ottimo forum.

Questa è la mia prima creatura: creative-ef.it un sito molto semplice giusto per 'marcare il territorio' in rete, ma conto di ampliarne i contenuti.

Grazie ai consigli letti qua sul forum stò risalendo piano piano su google per le keywords "acconciature mondovì" da un iniziale posizionamento a 273 ora sono a 102 e sono già molto fiero..

Avrei bisogno di un chiarimento il tag iframe (che ho dovuto usare per incorporare la map di google) va' considerato un frame e quindi ho fatto bene nell'intestazione a mettere html 4.01 frameset o avrei dovuto usare il transitional (o altro) ?

Il prossimo upgrade che ho intenzione di fare sarà l'inserimento di altri due fogli di stile per ottimizzarne la visualizzazione su smartphone e tablet.

Infine una domanda: incorporare nel sito video di youtube (sfilate, hairstyle show ecc) è lecito o ci sono dei problemi di copyright?

Chiaramente consigli e pareri sono i benvenuti..

Intanto vi ringrazio e vi saluto.

quinto

Grazie per l'indicazione, provo a studiarmelo un po'..

quinto

Salve a tutti,

volendo realizzare un sito dove l'utente possa caricare delle immagini in una casella di input utilizzando il drag e drop un po' come avviene
nella ricerca immagini di google dove è possibile trascinare e rilasciare un immagine nella casella di ricerca per trovare immagini simili,
è necessario uno script o c'è qualche comando html del tipo <input type="img">?

quinto

Grazie, problema risolto: ora riesco a loggarmi normalmente.
Ciao.

quinto

Grazie per il pronto riscontro, attualmente la situazione persiste quando riuscirò a loggarmi in maniera 'normale' ve lo segnalerò.

Grazie ancora, ciao.

quinto

Grazie per l'accoglienza.

Quinto.

quinto

Buongiorno, se cerco di loggarmi normalmente il sito mi risponde 'nome utente o password errata', è un paio di giorni che provo a fare il login ma senza successo, ho provato anche il recupero password ma il messaggio con i dati mi arrivava con il campi 'nome utente' e 'password' vuoti.

Poi preso dalla disperazione ho provato ad aprire una discussione qui senza essere loggato.. ed al messaggio vBulletin che richiede le credenziali son riuscito a fare il login.

Poi ho riprovato a loggarmi normalmente ma il problema persiste.

Ora per me non è un gran problema: posso anche continuare a loggarmi così, era solo per farvelo sapere (magari succede anche ad altri nuovi utenti).

Grazie per l'attenzione, quinto.

quinto

Buongiorno a tutto il forum, sono approdato a questo sito circa un anno fa' dopo aver cercato con google 'guida html'.

Adesso che mi sono iscritto ne approfitto per ringraziare il sig. Giorgio per l'ottima guida che mi ha consentito di avvicinarmi al mondo dei webmaster.

Spero di imparare ancora molto e di poter condividere le mie, seppur limitate, conoscenze informatiche.

Ancora ciao a tutti!

quinto

@quinto

Post creati da quinto