[HTML] Modificare ordine dei div in mobile responsive

Giojj

Nuovo Utente
11 Ago 2016
22
0
1
63
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
4.449
338
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
63
Ciao grazie della risposta ma francamente non ho capito cosa intendi..il sito è responsive..
 

mr.x

Utente Attivo
9 Apr 2016
252
25
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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
63
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [HTML] modificare la scritta della copyright HTML e CSS 2
Y [PHP] [HTML] Modificare i quadranti PHP 1
Kolop "Modificare HTML" HTML e CSS 13
R Modificare html in modo dinamico PHP 3
E difficoltà a modificare la pagina html HTML e CSS 2
DuneBuggy Come modificare index.html HTML e CSS 1
Mauro Guardiani codice html da modificare PHP 2
Mauro Guardiani codice html da modificare HTML e CSS 1
Monital Modificare una funzione per creazione tabella html PHP 15
P Software per modificare sorgente Html in automotico HTML e CSS 12
M Modificare il testo di un documento HTML Javascript 2
Marzia_Sethua MODIFICARE pagina HTML INDIPENDENTE da UN FRAME Programmazione 0
L creare o modificare una .GIF da mettere su una pagina HtmL HTML e CSS 5
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1

Discussioni simili