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

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

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

Δημοσίευση από charavge » 01 Ιουν 2015 20:27

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

Μας ζήτησαν και φτιάξαμε μια παλιά σελίδα και την κάναμε 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
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 01 Ιουν 2015 22:44

paixe me ta floats (left h right).. vazeis to G epano kai tou dineis float right kai sto allo left..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

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

Δημοσίευση από alou » 01 Ιουν 2015 22:46

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

http://jsfiddle.net/xdp1hmcy/

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

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

Δημοσίευση από charavge » 04 Ιουν 2015 11:57

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

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

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

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

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

Δημοσίευση από charavge » 04 Ιουν 2015 12:06

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

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

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

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

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

Δημοσίευση από alou » 04 Ιουν 2015 12:33

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

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

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

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

Δημοσίευση από apsuh0s » 04 Ιουν 2015 19:18

Γι αυτό είναι σωστό -μαζί με άλλους λόγους- να ξεκινάς να γράφεις για 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
.ninja { color: black; visibility: hidden !important; }

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

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

Δημοσίευση από alou » 05 Ιουν 2015 12:23

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

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

:lol:

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

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

Δημοσίευση από apsuh0s » 05 Ιουν 2015 13:16

.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!
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

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

Δημοσίευση από giannis17 » 07 Ιουν 2015 11:30

Λύση 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.
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες