[HTML] Modificare ordine dei div in mobile responsive

Giojj

Nuovo Utente
11 Ago 2016
22
0
1
59
Ciao a tutti ho bisogno di un aiuto, ho affiancato due div uno con il testo ed uno con l'immagine, successivamente ho inserito un altro div con immagine e testo messi in modo alternato, il problema è che in mobile non riesco a cambiare l'ordine del div.

In mobile vorrei che fossero in ordine: Testo poi immagine, Testo poi immagine invece ottengo Immagine poi testo, Testo poi immagine in quanto in modalità desktop sono affiancati in modo alternato. Come posso fare?

sito: investigatoremilano . it

Dove ce investigazioni private, aziendali, security e portierato, bonifiche e spy... quella parte di testo e foto messe in alternata.

Grazie a tutti
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
3.933
292
83
Devi usare un codice responsive! Spiegarti qui tutti i passaggi è abbastanza complesso, ti segnalo una guida che ti aiuta a risolvere il problema
http://www.html.it/guide/responsive-web-design-la-guida/
Poi dopo aver letto la guida e fatto qualche prova se avrai ancora problemi posta pure che vedremo cosa consigliarti
 

Giojj

Nuovo Utente
11 Ago 2016
22
0
1
59
Ciao grazie della risposta ma francamente non ho capito cosa intendi..il sito è responsive..
 

mr.x

Utente Attivo
9 Apr 2016
221
22
28
Prova a riferiti al seguente codice. Ho invertito i paragrafi <p class="investigatore-privato"> e <p class="agenzia-investigativa"> nell'html e aggiunto 2 righe al css per spostarli con le mediaqueries su risoluziome superiore a 768px.. a te aggiustare il resto
Codice:
<html>
<head>
<style>
@media screen and (min-width:769px){
.investigatore-privato {float:right!important;max-width:50%!important;}
.agenzia-investigativa {float:left!important;max-width:50%!important;}
}

.investigatore-privato {
    float: right;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
    display: block;
    width: 100%;
    position: static;
    font-size: 0.8rem;
    line-height: 1.6;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 14px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
    font-family: "Open Sans",Arial,sans-serif;
}
.agenzia-investigativa {
    float: none;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
    display: block;
    width: 100%;
    position: static;
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 14px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
    font-family: "Open Sans",Arial,sans-serif;
}
</style>
</head>
<body>
<h2>Security e portierato</h2>
<p class="investigatore-privato"><img src="http://www.investigatoremilano.it/img/Securityportierato.jpg" alt="Portierato reception" title="Sicurezza guardiania" width="776"></p>
<p class="agenzia-investigativa">Sicurezza privata<br>Sicurezza aziendale<br>Progettazione sistemi anti intrusione<br>Servizi di portierato e reception<br>Sicurezza personale di vip e artisti<br>Servizi di sicurezza per eventi<br>Security per manager e amministratori<br>Guardiania e tutela ambienti aziendali<br>Antitaccheggio investigativo</p>
</body>
</html>
 

WmbertSea

Utente Attivo
28 Nov 2014
147
20
28
Ciao, non metto in dubbio il discorso di Max 1 sulla complessità della questione e sul fatto che una guida possa sicuramente aiutarti a capire cosa ci sta dietro il funzionamento di un sito responsive e come potersi muovere per applicare le proprie personalizzazioni.

A mio parere però i problemi qui sono diversi. Ho dato uno sguardo al sito, che chiaramente è responsive, e posso dirti che la questione può essere risolta definendo opportunamente il float dei due elementi per i rispettivi blocchi (come in parte è già fatto).

Però...
Ho visto che la struttura delle classi che stai usando è organizzata in modo macchinoso che porta a sviluppare codice css parecchio ridondante, quindi poco pratico da gestire, e che produce dei riferimenti ambigui.

Mi spiego: per distinguere i blocchi in modo alternato, stai usando una cosa del tipo
Codice:
"nome-classe"
"nomeclasse"
"nome-classe"
"nomeclasse"
...
mettendo quindi un trattino tra le parole per i blocchi dispari e viceversa, omettendo il trattino, per quelli pari; stessa cosa all'interno di ciascun blocco principale, continui ad usare questa "tecnica" per definire i due elementi (testo e immagine):
Codice:
"nome-classe"
- "elemento-immagine"
- "elemento-testo"

"nomeclasse"
- "elementoimmagine"
- "elementotesto"

...
Sia chiaro che trovo abbastanza inopportuno utilizzare un tale sistema, per almeno due motivi: primo, vai a sviluppare un codice css in maniera parecchio ridondante perché lo stesso css che usi per le classi col trattino, lo devi riportare poi anche per quelle senza trattino, variando giusto una o comunque poche regole (questo non giustifica il fatto di usare due classi distinte come hai fatto tu); secondo, usare lo stesso nome, con o senza trattino, porta sicuramente a situazioni di ambiguità sia nella stesura/personalizzazione del css, sia nel caso si utilizzino queste classi per riferirsi a tali elementi per lo sviluppo (eventuale) di codice JavaScript.

Questo sistema mi pare quindi contrastare tutte quelle "best practices" per una buona programmazione.

Ora ti chiedo (per mia curiosità): è una tecnica che hai "elaborato" tu o è qualcosa che hai trovato già così, o hai visto fatto da altre parti?

Per poterti fornire una soluzione valida ti consiglierei intanto di "correggere" questo punto.
Ridefinisci quindi tutti i nomi di classe scrivendoli col trattino (o senza, se preferisci).

A quel punto, per identificare i blocchi dispari da quelli pari, puoi fare due cose: o utilizzi un'ulteriore classe per identificare i due blocchi "dispari" e "pari" (da inserire quindi assieme a quella/e esistente/i nell'attributo class) e definire esclusivamente le regole css che ti servono per impaginare i due tipi di blocchi; oppure sfruttare degli opportuni selettori css come nth-of-type() con cui puoi adoperare i valori "odd" e "even" proprio per selezionare gli elementi dispari e pari.

Questo è un punto di partenza ed è, a mio parere, necessario per risolvere al meglio il tuo problema. Poi chiaramente tutto si può fare in tanti altri modi.

Ho notato inoltre che i due contenuti (testo e immagine) vai a disporli fisicamente (cioè nel codice HTML) in ordine, appunto, alternato. Anche questo punto sarebbe da rivedere, perché l'impaginazione la gestirai esclusivamente da css.

Ti consiglio quindi di disporre tutti i contenuti con uno stesso ordine per tutti i blocchi. Metti ad esempio l'elemento di testo e poi l'immagine, così per tutti i blocchi. A quel punto vai ad impostare opportunamente il float dal css.

Eventualmente potrei darti un aiuto se incontri difficoltà nell'applicare il css in maniera corretta, ma dovresti comunque riorganizzare le classi come ti ho indicato.

Ovvio, prendili come consigli, poi vedi tu cos'è meglio fare.

Fammi sapere.
 

Giojj

Nuovo Utente
11 Ago 2016
22
0
1
59
Ciao! Grazie a tutti per le risposte in particolar modo a WmbertSea! Ho effettuato delle modifiche eliminando delle parti di codici inutili e riorganizzando le classi! Visivamente l'effetto su mobile è quello voluto, volevo sapere se secondo voi così va bene! Comunque era una tecnica elaborata da me in effetti molto macchinosa e ridondante! Attendo i Vostri consigli!