Βοηθήστε με να κάνω σωστά την σελίδα responsive !

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

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

Απάντηση
Άβαταρ μέλους
GiannisBeos
Δημοσιεύσεις: 3
Εγγραφή: 08 Μάιος 2015 20:47
Τοποθεσία: Κερατέα

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από GiannisBeos » 08 Μάιος 2015 21:04

Καλησπέρα στον ελεύθερο χρόνο μου που είναι αρκετός τα τελευταία χρόνια λόγο ανεργίας κλπ διαβάζω το φόρουμ αρκετά έχω μάθει πολλά πράγματα και ήταν η αφορμή να μάθω html css και έτσι να μπορώ να φτιάχνω ιστοσελίδες. Προσπαθώ εδώ και καιρό να κατανοήσω πως φτιάχνεται σωστά μια responsive σελίδα που είναι της μόδας τώρα τελευταία αλλά δεν τα πολυκαταφέρνω όπως με τις κλασσικές μή responsive σελίδες.

Θα ήθελα να με βοηθήσετε να πάρω το πάνω χέρι και στο πεδίο responsive. Όσο μπορείτε πείτε μου.

Θα αναφερθώ σε ένα layout που έφτιαξα μια απλή responsive σελίδα που όμως όπως μπορείτε να δείτε έχει ατέλειες και θέλει ακόμα δουλειά για να μπορέσω να πώ ότι δουλεύει σωστά ως responsive σελίδα. Θέλω να μου πείτε ποιά είναι τα λάθη μου και πως μπορώ να τα λύσω, δηλαδή, πείτε μου παρακαλώ βλέποντας τον κώδικα μου παρακάτω τι κάνω λάθος, ποιές οι ατέλειες μου ώστε να κατανοήσω ότι δεν κατανοώ τώρα ;

CSS

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

*       { margin:0; padding:0; border:0; }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 11px;
margin-bottom: 21px;
}
#header {
height: 150px;
background-color: #FE0000;
background-image: url('/images/logo.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center;
}
#menu {
height: 60px;
background-color: #666;
}
#sidebar {
width: 260px;
height: 400px;
background-color: #FE0000;  
float: left;
}
#mainbody {
width: 764px;
height: 400px;
background-color: #E9F2FB;
float: right;
border-top: 1px solid #FE0000;
}
#footer {
height: 100px;
background-color: #ccc;
clear: both;
}

#menu {
height: 60px;
background-color: #FEFFFF;
font-weight: bold;
border-right:1px solid #FE0000;
border-left:1px solid #FE0000;
}
#menu ul {
margin:0;
padding:0;
}
#menu li {
list-style-type: none;
float: left;
display: block;
width: 127px;
height: 60px;
text-align: center;
line-height: 55px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
}
#menu li a {
text-decoration: none;
color: #333;
}
#menu li a:hover {
border-bottom: 1px dashed #FE0000;
border-spacing: 10px;
padding: 5px;
}
#menu li:hover {
background-color: #FEFFFF;
}

@media only screen 
and (max-width : 1024px) {
#container {
width: 824px;
}
#sidebar {
width: 224px;
}
#mainbody {
width: 600px;
}
#menu {
height: 120px;
background-color: #666;
}
#menu li {
width: 224px;
}
}

@media only screen 
and (max-width : 800px) {
#container {
width: 600px;
}
#sidebar {
width: 190px;
}
#mainbody {
width: 410px;
}
#menu {
height: 120px;
background-color: #666;
}
#menu li {
width: 190px;
}
}

@media only screen 
and (max-width : 600px) {
#container {
width: 300px;
}
#sidebar {
width: 100px;
}
#mainbody {
width: 200px;
}
#menu {
height: 300px;
background-color: #666;
}
#menu li {
width: 300px;
}
}

και

XHTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some of my titles thats dy title</title>

</head>

<body>

<div id="container">
<div id="header">
a
</div>
<div id="menu">
<ul>
<li><a href="#">Κατηγορία1</a></li>
<li><a href="#">Κατηγορία2</a></li>
<li><a href="#">Κατηγορία3</a></li>
<li><a href="#">Κατηγορία4</a></li>
<li><a href="#">Κατηγορία5</a></li>
<li><a href="#">Κατηγορία6</a></li>
<li><a href="#">Κατηγορία7</a></li>
<li><a href="#">Κατηγορία8</a></li>
</ul>
</div>
<div id="sidebar">
</div>
<div id="mainbody">
</div>
<div id="footer">
</div>
</div>

</body>

</html>
Αν δοκιμάσετε τον κώδικα μου θα δείτε και εσείς ότι στις διαστάσεις desktop η σελίδα φαίνεται μια χαρά. Αυτό που δεν κατανοώ ως τώρα, είναι πως θα την κάνω να φαίνεται σωστά και στις υπόλοιπες διαστάσεις για tablets και κινητά. Ξέρω ότι αυτό γίνεται με τα mediaqueries τα οποία και έκανα όπως βλέπετε μια προσπάθεια να χρησιμοποιήσω αλλά δεν τα πολυκατάφερα.

Σας παρακαλώ δείξτε μου πως να σκεφτώ ώστε να κατανοήσω και να μάθω να φτιάχνω και μια σελίδα responsive !

Άβαταρ μέλους
GiannisBeos
Δημοσιεύσεις: 3
Εγγραφή: 08 Μάιος 2015 20:47
Τοποθεσία: Κερατέα

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από GiannisBeos » 12 Μάιος 2015 21:13

Ούτε μια απάντηση..... κρίμα. Για να το κάνω πιο συγκεκριμένο αν κάποιος ήθελε να βοηθήσει, αυτό που δεν καταλαβαίνω με βάση το κώδικα μου, είναι το πώς πρέπει να θέσω τις "διαστάσεις" στα mediaqueries, πως να φτιάξω τα mediaqueries έτσι ώστε η σελίδα να φαίνεται σωστά, να έχει μια ευπρεπή μορφή, τόσο σε pc όσο και σε tablet και κινητό.

Δεν ξέρω πως να το θέσω καλύτερα, ελπίζω κάποιος να έχει καταλάβει !

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 697
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από webdevgr » 13 Μάιος 2015 00:32

Τα mediaqueries σου δουλεύουν κανονικά.

Εφόσον δυσκολεύεσαι γιατί δεν χρησιμοποιείς ένα css framework πχ bootstrap ή κάτι πιο λιτό αν δεν θέλεις όλες τις εφαρμογές του, για να κάνεις τη δουλειά σου πιο εύκολα;

Αν αργότερα τριφτείς και νιώσεις ότι μπορείς, φτιάξε το με τον δικό σου τρόπο.

Άβαταρ μέλους
GiannisBeos
Δημοσιεύσεις: 3
Εγγραφή: 08 Μάιος 2015 20:47
Τοποθεσία: Κερατέα

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από GiannisBeos » 13 Μάιος 2015 04:14

Σε ΕΥΧΑΡΙΣΤΩ που απάντησες τουλάχιστον κάποιος διάβασε αυτά που ρώτησα !!! νόμιζα ότι κανένας δεν ασχολήθηκε και θεώρησε χαζή την ερώτηση μου !

Ο λόγος που δεν πήγα σε ένα framework είναι ότι αν και δοκιμασα το boostrap δεν κατάλαβα γρί που λέμε, δεν ξέρω αλλά μάλλον φταίει ότι δεν είμαι του χώρου σας προγραμματιστής και έτσι εγώ ότι ξέρω το έμαθα από δική μου ενασχόληση και ποτέ δεν έχω ασχοληθεί με οποιοδήποτε framework για να βγάλω ένα αποτέλεσμα. Όπως σου είπα δοκίμασα το bootstrap αλλά μου έκανε ακόμα πιο δύσκολα τα πράγματα και αμέσως το παράτησα !

Έτσι έφτασα χωρίς framework στο σημείο που παρέθεσα με κώδικα !

Δεν μπορείς σε παρακαλώ να μου εξηγήσεις αυτό που έφτιαξα, πως μπορώ να το κάνω να δουλεύει και στις διαστάσεις με tablet και κινητά δηλαδή στις μικρότερες απ του pc διαστάσεις ;

Δυστυχώς πραγματικά έχω κολλήσει στη κατανόηση σαυτό το σημείο !

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από korgr » 13 Μάιος 2015 10:19

Αν δεν δημιουργήσεις ένα νοητό πλέγμα (συνήθως 12 ή 16 στηλών) δεν θα μπορέσεις να έχεις μία βάση ώστε μετά να εξειδικεύσεις και με κάποια πρόσθετα media queries.

Σου παραθέτω ένα βασικό 12 grid css

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

   .container &#123; width&#58; 960px; margin&#58; 0 auto; &#125; 

   /* Global */ 
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125; 
   &#91;class*="grid-"&#93; img&#123;
    max-width&#58;100%; 
    width&#58;auto;
    margin&#58; 0 auto;
   &#125;
   
   .group&#58;before, .group&#58;after &#123; content&#58; ""; display&#58; table; line-height&#58; 0; &#125; 
   .group&#58;after &#123; clear&#58; both; &#125; 

   /* Nested elements */ 
   .alpha &#123; margin-left&#58; 0px; &#125; 
   .omega &#123; margin-right&#58; 0px; &#125; 

   /* Grids */ 
   .group .grid-1 &#123;  width&#58; 8%; &#125;
   .group .grid-2 &#123;  width&#58; 16%; &#125;
   .group .grid-3 &#123;  width&#58; 24%; &#125;
   .group .grid-4 &#123;  width&#58; 33%; &#125;
   .group .grid-5 &#123;  width&#58; 41%; &#125;
   .group .grid-6 &#123;  width&#58; 50%; &#125;
   .group .grid-7 &#123;  width&#58; 58%; &#125;
   .group .grid-8 &#123;  width&#58; 66%; &#125;
   .group .grid-9 &#123;  width&#58; 75%; &#125;
   .group .grid-10 &#123;  width&#58; 83%; &#125;
   .group .grid-11 &#123;  width&#58; 91%; &#125;
   .group .grid-12 &#123;  width&#58; 100%; &#125;

   /* Offset Extra Space */ 
   .group .offset-1 &#123; padding-left&#58; 8%; &#125;
   .group .offset-2 &#123; padding-left&#58; 16%; &#125;
   .group .offset-3 &#123; padding-left&#58; 24%; &#125;
   .group .offset-4 &#123; padding-left&#58; 33%; &#125;
   .group .offset-5 &#123; padding-left&#58; 41%; &#125;
   .group .offset-6 &#123; padding-left&#58; 50%; &#125;
   .group .offset-7 &#123; padding-left&#58; 58%; &#125;
   .group .offset-8 &#123; padding-left&#58; 66%; &#125;
   .group .offset-9 &#123; padding-left&#58; 75%; &#125;
   .group .offset-10 &#123; padding-left&#58; 83%; &#125;
   .group .offset-11 &#123; padding-left&#58; 91%; &#125;


/* ==========================================================================
   768px - 12 columns - 20px gutter 
   ========================================================================== */

   @media &#40;min-width&#58; 768px&#41; and &#40;max-width&#58; 959px&#41; &#123; 

   /* Container */ 
   .container &#123; width&#58; auto; max-width&#58; 959px; margin&#58; 0 auto; padding&#58; 0 10px; &#125; 

   /* Global */ 
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125; 

   &#125;
   
    

/* ==========================================================================
   Mobile
   ========================================================================== */

   @media only screen and &#40;max-width&#58; 767px&#41; &#123;

   body &#123; padding-left&#58; 20px; padding-right&#58; 20px; &#125;

   /* Container */
   .container &#123; width&#58; auto; padding&#58; 0 10px;&#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; display&#58; block; margin-left&#58; 0px; margin-right&#58; 0px; &#125;

   /* Grids */
   .group .grid-1,
   .group .grid-2,
   .group .grid-3,
   .group .grid-4,
   .group .grid-5,
   .group .grid-6,
   .group .grid-7,
   .group .grid-8,
   .group .grid-9,
   .group .grid-10,
   .group .grid-11,
   .group .grid-12 &#123; width&#58; 100%;&#125;

   /* Offset Extra Space */
   .group .offset-1, 
   .group .offset-2, 
   .group .offset-3, 
   .group .offset-4, 
   .group .offset-5, 
   .group .offset-6, 
   .group .offset-7, 
   .group .offset-8, 
   .group .offset-9, 
   .group .offset-10, 
   .group .offset-11 &#123; padding-left&#58; 0; &#125;

   &#125;

Παράδειγμα ενός row στην HTML


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

    <section class="container">
        <div class="group">
            <div class="grid-3">
                <!-- some content -->
            </div>
            <div class="grid-9">
                <!-- some content -->
            </div>
        </div>
    </section>
Στο ανωτέρω παράδειγμα έχεις μία δίστηλη σειρά όπου η πρώτη στήλη (grid-3) έχει πλάτος 3 δωδέκατα του container και η δεύερη στήλη (grid-9) έχει πλάτος 9 δωδέκατα του container (φαντάσου ένα header με αριστερά το λογότυπο και δεξιά banner ή navigation που θέλει πιο πολύ χώρο.

Αν ήθελες 2 ίσες στήλες θα έπρεπε να είχες μέσα σε ένα class="group" δύο grid-6
Σημασία έχει το σύνολο να σου δίνει πάντα 12
Αν ήθελες 3 ίσες στήλες θα έπρεπε να είχες μέσα σε ένα class="group" τρία grid-4 κλπ

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από qpen » 08 Νοέμ 2016 13:33

Ενδιαφέρον post, korgr γιατί το container έχει καινό στα δεξιά για ποιο λόγο, γιατι φαινεται περισσότερο άδεια η σελίδα στα δεξιά έτσι ;
Το επισημαίνω με background-color:silver ;
Αυτά τα κενά εννοείς ότι τα καλύπτουμε με τα offsets ; Δηλαδή πως γεμίζοντας με χρώμα ότι απομένει ;

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

   .container &#123; width&#58; 960px; margin&#58; 0 auto; background-color&#58;silver; &#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125;
   &#91;class*="grid-"&#93; img&#123;
    max-width&#58;100%;
    width&#58;auto;
    margin&#58; 0 auto;
   &#125;
   
   .group&#58;before, .group&#58;after &#123; content&#58; ""; display&#58; table; line-height&#58; 0; &#125;
   .group&#58;after &#123; clear&#58; both; &#125;

   /* Nested elements */
   .alpha &#123; margin-left&#58; 0px; &#125;
   .omega &#123; margin-right&#58; 0px; &#125;

   /* Grids */
   .group .grid-1 &#123;  width&#58; 8%; &#125;
   .group .grid-2 &#123;  width&#58; 16%; &#125;
   .group .grid-3 &#123;  width&#58; 24%; background-color&#58;red; &#125;
   .group .grid-4 &#123;  width&#58; 33%; &#125;
   .group .grid-5 &#123;  width&#58; 41%; &#125;
   .group .grid-6 &#123;  width&#58; 50%; &#125;
   .group .grid-7 &#123;  width&#58; 58%; &#125;
   .group .grid-8 &#123;  width&#58; 66%; &#125;
   .group .grid-9 &#123;  width&#58; 75%; background-color&#58;yellow; &#125;
   .group .grid-10 &#123;  width&#58; 83%; &#125;
   .group .grid-11 &#123;  width&#58; 91%; &#125;
   .group .grid-12 &#123;  width&#58; 100%; &#125;

   /* Offset Extra Space */
   .group .offset-1 &#123; padding-left&#58; 8%; &#125;
   .group .offset-2 &#123; padding-left&#58; 16%; &#125;
   .group .offset-3 &#123; padding-left&#58; 24%; &#125;
   .group .offset-4 &#123; padding-left&#58; 33%; &#125;
   .group .offset-5 &#123; padding-left&#58; 41%; &#125;
   .group .offset-6 &#123; padding-left&#58; 50%; &#125;
   .group .offset-7 &#123; padding-left&#58; 58%; &#125;
   .group .offset-8 &#123; padding-left&#58; 66%; &#125;
   .group .offset-9 &#123; padding-left&#58; 75%; &#125;
   .group .offset-10 &#123; padding-left&#58; 83%; &#125;
   .group .offset-11 &#123; padding-left&#58; 91%; &#125;


/* ==========================================================================
   768px - 12 columns - 20px gutter
   ========================================================================== */

   @media &#40;min-width&#58; 768px&#41; and &#40;max-width&#58; 959px&#41; &#123;

   /* Container */
   .container &#123; width&#58; auto; max-width&#58; 959px; margin&#58; 0 auto; padding&#58; 0 10px; &#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125;

   &#125;
   
   

/* ==========================================================================
   Mobile
   ========================================================================== */

   @media only screen and &#40;max-width&#58; 767px&#41; &#123;

   body &#123; padding-left&#58; 20px; padding-right&#58; 20px; &#125;

   /* Container */
   .container &#123; width&#58; auto; padding&#58; 0 10px;&#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; display&#58; block; margin-left&#58; 0px; margin-right&#58; 0px; &#125;

   /* Grids */
   .group .grid-1,
   .group .grid-2,
   .group .grid-3,
   .group .grid-4,
   .group .grid-5,
   .group .grid-6,
   .group .grid-7,
   .group .grid-8,
   .group .grid-9,
   .group .grid-10,
   .group .grid-11,
   .group .grid-12 &#123; width&#58; 100%;&#125;

   /* Offset Extra Space */
   .group .offset-1,
   .group .offset-2,
   .group .offset-3,
   .group .offset-4,
   .group .offset-5,
   .group .offset-6,
   .group .offset-7,
   .group .offset-8,
   .group .offset-9,
   .group .offset-10,
   .group .offset-11 &#123; padding-left&#58; 0; &#125;
   &#125; 

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από korgr » 08 Νοέμ 2016 20:21

Δοκίμασε αυτό:

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

<html>
<head>

<style>
.container &#123; width&#58; 960px; margin&#58; 0 auto; background-color&#58;silver; &#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125;
   &#91;class*="grid-"&#93; img&#123;
    max-width&#58;100%;
    width&#58;auto;
    margin&#58; 0 auto;
   &#125;
   
   .group&#58;before, .group&#58;after &#123; display&#58; table; line-height&#58; 0; &#125;
   .group&#58;after &#123; clear&#58; both; &#125;

   /* Nested elements */
   .alpha &#123; margin-left&#58; 0px; &#125;
   .omega &#123; margin-right&#58; 0px; &#125;

   /* Grids */
   .group .grid-1 &#123;  width&#58; 8%; &#125;
   .group .grid-2 &#123;  width&#58; 16%; &#125;
   .group .grid-3 &#123;  width&#58; 24%; background-color&#58;red; &#125;
   .group .grid-4 &#123;  width&#58; 33%; &#125;
   .group .grid-5 &#123;  width&#58; 41%; &#125;
   .group .grid-6 &#123;  width&#58; 50%; &#125;
   .group .grid-7 &#123;  width&#58; 58%; &#125;
   .group .grid-8 &#123;  width&#58; 66%; &#125;
   .group .grid-9 &#123;  width&#58; 75%; background-color&#58;yellow; &#125;
   .group .grid-10 &#123;  width&#58; 83%; &#125;
   .group .grid-11 &#123;  width&#58; 91%; &#125;
   .group .grid-12 &#123;  width&#58; 100%; &#125;

   /* Offset Extra Space */
   .group .offset-1 &#123; padding-left&#58; 8%; &#125;
   .group .offset-2 &#123; padding-left&#58; 16%; &#125;
   .group .offset-3 &#123; padding-left&#58; 24%; &#125;
   .group .offset-4 &#123; padding-left&#58; 33%; &#125;
   .group .offset-5 &#123; padding-left&#58; 41%; &#125;
   .group .offset-6 &#123; padding-left&#58; 50%; &#125;
   .group .offset-7 &#123; padding-left&#58; 58%; &#125;
   .group .offset-8 &#123; padding-left&#58; 66%; &#125;
   .group .offset-9 &#123; padding-left&#58; 75%; &#125;
   .group .offset-10 &#123; padding-left&#58; 83%; &#125;
   .group .offset-11 &#123; padding-left&#58; 91%; &#125;


/* ==========================================================================
   768px - 12 columns - 20px gutter
   ========================================================================== */

   @media &#40;min-width&#58; 768px&#41; and &#40;max-width&#58; 959px&#41; &#123;

   /* Container */
   .container &#123; width&#58; auto; max-width&#58; 959px; margin&#58; 0 auto; padding&#58; 0 10px; &#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; float&#58; left; display&#58; inline; margin-left&#58; 0; margin-right&#58; 0; &#125;

   &#125;
   
   

/* ==========================================================================
   Mobile
   ========================================================================== */

   @media only screen and &#40;max-width&#58; 767px&#41; &#123;

   body &#123; padding-left&#58; 20px; padding-right&#58; 20px; &#125;

   /* Container */
   .container &#123; width&#58; auto; padding&#58; 0 10px;&#125;

   /* Global */
   &#91;class*="grid-"&#93; &#123; display&#58; block; margin-left&#58; 0px; margin-right&#58; 0px; &#125;

   /* Grids */
   .group .grid-1,
   .group .grid-2,
   .group .grid-3,
   .group .grid-4,
   .group .grid-5,
   .group .grid-6,
   .group .grid-7,
   .group .grid-8,
   .group .grid-9,
   .group .grid-10,
   .group .grid-11,
   .group .grid-12 &#123; width&#58; 100%;&#125;

   /* Offset Extra Space */
   .group .offset-1,
   .group .offset-2,
   .group .offset-3,
   .group .offset-4,
   .group .offset-5,
   .group .offset-6,
   .group .offset-7,
   .group .offset-8,
   .group .offset-9,
   .group .offset-10,
   .group .offset-11 &#123; padding-left&#58; 0; &#125;
   &#125; 
</style>
</head>
<body>
    <section class="container">
        <div class="group">
            <div class="grid-3">aaa
                <!-- some content -->
            </div>
            <div class="grid-9">bbb
                <!-- some content -->
            </div>
        </div>
    </section> 
</body>
</html>

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από qpen » 08 Νοέμ 2016 22:15

Μάλιστα ωραία, αυτό το grid λοιπόν πως συμπεριφέρεται στο θέμα cross browser ;
Με το display: table; θα εμφανίζεται σωστά στους ie8, ie9 ή από ie11 και πάνω ;
Έχει τα ίδια προβλήματα με το flex box ;
Τελευταία επεξεργασία από το μέλος qpen την 08 Νοέμ 2016 22:22, έχει επεξεργασθεί 1 φορά συνολικά.

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από qpen » 08 Νοέμ 2016 22:21

Μόλις το δοκίμασα σε ie11 και σπάει... χειρότερο και από το flex box για cross browser λύση
Τώρα τι μπορούμε να κάνουμε για να υποστηρίξουμε τους παλαιούς browsers ;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Βοηθήστε με να κάνω σωστά την σελίδα responsive !

Δημοσίευση από korgr » 09 Νοέμ 2016 09:33

Το συγχρονο web δεν ζει σε παλιούς browsers
Get used to it
Μηνυματακι για αναβαθμιση και τελειωσες

Απάντηση

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

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

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