Αλλαγή διάταξης με CSS, είναι εφικτό;

charavge

Καλησπέρα, καλό μήνα σε όλους!
Είχα καιρό να γράψω στο φόρουμ και μου έλειψε λίγο η αλήθεια είναι...

Μας ζήτησαν και φτιάξαμε μια παλιά σελίδα και την κάναμε responsive. Παρόλα αυτά, προέκυψε το εξής:
Η σελίδα έχει 3 div που παρουσιάζονται με σειρά: Α) Φόρμα αναζήτησης, Β) Οδηγίες, Γ) Αποτελέσματα αναζήτησης.
Όταν είναι σε μεγάλη ανάλυση εμφανίζονται το Β κάτω από το Α και το Γ δίπλα τους, δηλαδή 2+1 (η πληροφορία αυτή δεν έχει τόσο σημασία, απλά το αναφέρω).
Όταν αλλάζει η ανάλυση σε tablet ή smartphone εμφανίζονται το ένα κάτω από το άλλο.
Θέλω να αντιστρέψω τη σειρά τους στα media queries, γιατί όταν εμφανίζεται η φόρμα αναζήτησης στο πάνω μέρος σε ένα tablet ή smartphone πιάνει όλη την οθόνη και δίνει την αίσθηση ότι δε γίνεται η αναζήτηση (σα να ξαναφόρτωσε δηλαδή την ίδια σελίδα).

Σκέφτηκα το λογικό, ότι απλώς να αντιγράψω τα Α,Β κάτω από το Γ, στη συνέχεια να κρύβω τα πάνω Α,Β και να εμφανίζω τα κάτω, αλλά μου προέκυψαν 2 προβλήματα:
1) Τα divs περιέχουν μέσα πολλά id (αντί για class), οπότε αποδιοργανώνεται η θέση τους μέσα στη σελίδα λόγω διπλών id. Επειδή αποτελούν βασική δομή και σε άλλες σελίδες του ιστότοπου, δε γίνεται να τις αλλάξουμε όλες και να ξαναστήσουμε τη CSS...
2) Επηρεάζεται η Javascript της σελίδας που απευθύνεται στα συγκεκριμένα id για τον ίδιο λόγο.

Η ερώτηση είναι αν γίνεται αυτή η αλλαγή της διάταξης απλά με CSS ή με άλλο τρόπο (π.χ. Javascript) όταν εφαρμόζονται τα media queries.

Κάθε βοήθεια δεκτή...
Ευχαριστώ.

fafos

paixe me ta floats (left h right).. vazeis to G epano kai tou dineis float right kai sto allo left..

alou

Δες αυτό για ένα πρόχειρο παράδειγμα, με css μόνο.

http://jsfiddle.net/xdp1hmcy/

charavge

Προσπάθησα αλλά δεν κατάφερα τίποτα.. Δε λένε να κουνήσουν.

Η διάταξη είναι ακριβώς αυτή που έχεις φτιάξει, αλλά, τα Α και Β που είναι αριστερά είναι σε ένα γενικό div που λέγεται "left-content" και το Γ σε ένα γενικό που λέγεται "right-content".

Οπότε στην ουσία έχουμε 1+2 πρακτικά και θέλω το 1 (Α+Β) να εμφανίζεται κάτω από το 2.
(Κατά πάσα πιθανότητα έπρεπε να είναι πιο απλό αλλά κάτι δεν κάνω καλά).
Πείραξα float, πείραξα διάφορα, αλλά τίποτα. Θα προσπαθήσω πάλι και επανέρχομαι.

charavge

ΟΚ, έσβησα το 1 div από το παράδειγμα και αντιλήφθηκα ότι στην ουσία γράφεις πρώτα το results και κατόπιν του δίνεις float right, εφόσον υπάρχει χώρος στη σελίδα, αντιστρέφεται με τα υπόλοιπα περιεχόμενα, ενώ όταν μικραίνει η σελίδα σε πλάτος απλώς επανέρχεται στη θέση του.

Εγώ δε μπορώ να το κάνω αυτό γιατί πρέπει να αλλάξει η δομή όλων των σελίδων (δηλαδή να γίνει αυτή η τράμπα σε όλες τις σελίδες που το έχουν).

Ρωτάω αν μπορεί να γίνει κάτι άλλο (που μάλλον πρέπει να είναι μαγικό από ό,τι αντιλαμβάνομαι)...

alou

Εφόσον είναι δεδομένη η δομή θα πρέπει να την πεις για να δούμε αν και τι μπορεί να γίνει. Ακριβώς όμως, με ότι html και css πρέπει να παραμείνει ως έχει.

Μαγικό είναι αν πρέπει να μαντέψει κάποιος τα δεδομένα

apsuh0s

Γι αυτό είναι σωστό -μαζί με άλλους λόγους- να ξεκινάς να γράφεις για mobile πρώτα. Έχει πολύ μεγάλη σημασία το source order. Αν δεν το σχεδιάσεις σωστά καταλήγεις να έχεις παρόμοια προβλήματα με αυτά που αντιμετωπίζεις τώρα εσύ.

Αυτό που θα μπορούσες να κάνεις, αλλά δεν ξέρω αν σε βολεύει είναι το εξής. Για τη συγκεκριμένη σελίδα να δώσεις στο html tag ή στο body tag ή σε ένα outer wrapper συγκεκριμένη κλάση π.χ <body class="change-order"> και μέσω css να παίξεις με flexbox και συγκεκριμένα με το order property. Να υπολογίζεις για ie10+. Οι υπόλοιποι ας το βλέπουν όπως το έχεις σερβίρει από τo source

http://codepen.io/astrotim/pen/flbag

alou

[άσχετο] είδα τώρα την υπογραφή σου και θυμήθηκα:

.titanic {float:none;position:absolute;bottom:0;}

apsuh0s

.titanic {float:none;position:absolute;bottom:0;}

Καλό..

@cordis Ιδέα για νέα υποκατηγορία στο CSS - "Funny CSS"

Κώδικας: Επιλογή όλων

$greeks&#58; 10000000;

@for $i from 1 through $greeks &#123;
  .salary-#&#123;$i&#125; &#123;
    width&#58; calc&#40;100% - 120%&#41;;
    flex&#58; none;
  &#125;
&#125;

@charavge back to you!

giannis17

Λύση JQuery:

Κώδικας: Επιλογή όλων

var resp = false;
function respLayout&#40;&#41;&#123;
  if&#40;jQuery&#40;window&#41;.width&#40;&#41; < 1025 && resp === false&#41;&#123;
    jQuery&#40;'#elem-b'&#41;.after&#40;jQuery&#40;'#elem-a'&#41;&#41;;
    resp = true;
  &#125; else &#123;
    jQuery&#40;'#elem-b'&#41;.before&#40;jQuery&#40;'#elem-a'&#41;&#41;;
    resp = false;
  &#125;
&#125;
jQuery&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
   respLayout;
  jQuery&#40;window&#41;.resize&#40;function&#40;&#41;&#123; respLayout; &#125;&#41;;
&#125;&#41;;

Όταν η ανάλυση είναι 1024 και κάτω πήγαινε το #elem-a μετά το #elem-b αλλιώς ξαναπήγαινε το πίσω (σε περίπτωση που κάποιος παίζει με το μέγεθος του παραθύρου ή το rotate του tablet/κινητού). Με την ίδια λογική μπορείς να μετακινήσεις όσα elements θες μέσα στην function και να προσθέσεις και περισσότερα if για περισσότερες αναλύσεις αν θες να υπάρχουν πολλά διαφορετικά layout.

Αυτή την τακτική την χρησιμοποιώ όταν δουλεύω με megamenu όπου στο responsive θέλω τα widget του megamenu να εμφανίζονται έξω από το responsive menu.

Μέλη σε σύνδεση