Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
ManosApp
Δημοσιεύσεις: 48
Εγγραφή: 19 Ιούλ 2013 22:34

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από ManosApp » 11 Ιούλ 2016 02:20

Προσπαθώ να μάθω να σχεδιάζω responsive όχι με ιδιαίτερη επιτυχία η αλήθεια, προσπαθώ όμως χωρίς να χρησιμοποιώ κάτι έτοιμο όπως Bootstrap αλλά από την αρχή.

Οπότε είπα να ξεκινήσω να φτιάξω μια σελίδα όπως την έκανα πρό-responsive εποχής. Έτσι παρακάτω στον κώδικα που σας παραθέτω έχω ένα απλό σχέδιο με ένα header για τον τίτλο της ιστοσελίδας και από κάτω 3 κουτάκια. Το έστησα, δεν ξέρω βέβαια αν έχω θέσει σωστά τα media queries, όμως το κύριο που με απασχολεί είναι πως θα κεντράρω με responsive τρόπο τα 3 αυτά κουτάκια. Όπως βλέπετε δεν είναι ακριβώς κεντραρισμένα στο μέσο της σελίδας !

Θα ήθελα να μοιάζει όπως κεντράρονται στο μέσο της σελίδας για παράδειγμα όπως τα κουτάκια σ αυτό το layout του bootstrap: http://blackrockdigital.github.io/start ... -business/ (φυσικά δεν θέλω να χρησιμοποιήσω bootstrap !)

Αυτό πως μπορώ να το πετύχω μπορείτε να με βοηθήσετε ;

Σας παραθέτω τον κώδικα:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* { margin:0; padding:0; border:0; }
body { color: #535353; background: #e7e7e7; }
#container { background-color:green; width: 80.83%; margin: 0 auto; }
#header { color: #e8e8e8; background: #5e5e5e; padding: 5px 8px; }
.ptext {
font-size: 1em;
line-height: 1.20em;
margin: 1em 1em 1em 1em;
text-align: justify;

}

.containerbox {
font-size: 0;
}
.containerbox > div {
font-size: 16px;
display: inline-block;
vertical-align: top;
width: 30%;
border: 1px solid grey;
box-sizing: border-box;
text-align: center;
border-radius:5px;
margin:5px;
background-color:silver;

}

@media (max-width: 996px) {
.containerbox > div {
display: block;
width: 100%;
margin:0px;
}
}

@media (max-width: 996px) {
#header { text-align: center; }
}

</style>


</head>
<body>
<div id="container">

<div id="header">
<h1>Δοκιμαστικό...</h1>
</div>

<div id="main">

<div class="containerbox">
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
</div>

</div>

</body>
</html>
[/code]

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από fafos » 11 Ιούλ 2016 11:01

o poio eukolos tropos einai to "flexbox".. opote xekinas me auto sto kyrio div:

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

.containerbox &#123;
	 font-size&#58; 0;
    display&#58; flex;    
    flex-direction&#58; row; 
    flex-wrap&#58; nowrap; 
    justify-content&#58; space-between;
&#125;
kai sto media prostheteis auto (gia na katarghseis to flex):

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

.containerbox &#123;
	display&#58; block;
&#125;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

ManosApp
Δημοσιεύσεις: 48
Εγγραφή: 19 Ιούλ 2013 22:34

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από ManosApp » 11 Ιούλ 2016 16:26

Οπότε έτσι με το flexbox έγινε αυτό που ήθελα μια χαρά fafos (many thanks) :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
* &#123; margin&#58;0; padding&#58;0; border&#58;0; &#125;
body &#123; color&#58; #535353; background&#58; #e7e7e7; &#125;
#container &#123; background-color&#58;green; width&#58; 80.83%; margin&#58; 0 auto; &#125;
#header &#123; color&#58; #e8e8e8; background&#58; #5e5e5e; padding&#58; 5px 8px; &#125;
.ptext &#123;
font-size&#58; 1em;
line-height&#58; 1.20em;
margin&#58; 1em 1em 1em 1em;
text-align&#58; justify;

&#125;

.containerbox &#123;
 font-size&#58; 14px;
    display&#58; flex;   
    flex-direction&#58; row;
    flex-wrap&#58; nowrap;
    justify-content&#58; space-between; 
&#125;
.containerbox > div &#123;

vertical-align&#58; top;
width&#58; 33.33%;
border&#58; 1px solid grey;
box-sizing&#58; border-box;
text-align&#58; center;
border-radius&#58;5px;
margin&#58;5px;
background-color&#58;silver;

&#125;


@media &#40;max-width&#58; 996px&#41; &#123;
.containerbox &#123;
display&#58; block;
width&#58; 100%;
margin&#58;0px;
&#125;
&#125;

@media &#40;max-width&#58; 996px&#41; &#123;
.containerbox > div &#123;
display&#58; block;
width&#58; 100%;
margin&#58;0px;
&#125;
&#125;

@media &#40;max-width&#58; 996px&#41; &#123;
#header &#123; text-align&#58; center; &#125;
&#125;

</style>


</head>
<body>
<div id="container">

<div id="header">
<h1>Δοκιμαστικό...</h1>
</div>

<div id="main">

<div class="containerbox">
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
<div><p class="ptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna justo, codetium at malesuada a,
ultrices et mi. Vivamus eget eros velit. Pellentesque erat felis, codetium vitae lacinia sed,
accumsan nec turpis. Nulla gravida tortor a lacus dignissim aliquet eget eget erat. Duis
tincidunt leo ac metus mattis mollis. Proin magna quam, gravida vitae scelerisque sed, imperdiet
at est. Vestibulum eget velit a turpis pharetra mollis a quis metus. Aliquam erat volutpat. Nam
tincidunt adipiscing lobortis.</p></div>
</div>

</div>

</body>
</html> 
Τώρα σχετικά με τα media queries, έτσι όπως έχω θέσει εγώ τα media queries το αποτέλεσμα εμφανίζεται σωστά σε tables, mobiles και υπολογιστές ; Μόνο σε ΗΥ το έχω τσεκάρει. Βλέπω ότι το bootstrap στην προηγούμενη έκδοση του νομίζω ότι είχε αυτά τα media queries :

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

/* Landscape phones and down */
@media &#40;max-width&#58; 480px&#41; &#123; ... &#125;

/* Landscape phone to portrait tablet */
@media &#40;max-width&#58; 767px&#41; &#123; ... &#125;

/* Portrait tablet to landscape and desktop */
@media &#40;min-width&#58; 768px&#41; and &#40;max-width&#58; 979px&#41; &#123; ... &#125;

/* Large desktop */
@media &#40;min-width&#58; 1200px&#41; &#123; ... &#125;
και μετά τα άλλαξε στην επόμενη έκδοση, στο απλό δικό μου παράδειγμα πως θα ορίζατε εσείς τα media queries ώστε να εμφανίζονται σωστά σε mobiles, tables, computers ;

ManosApp
Δημοσιεύσεις: 48
Εγγραφή: 19 Ιούλ 2013 22:34

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από ManosApp » 11 Ιούλ 2016 20:35

Να το πω και αλλίως, τα breakpoints που έθεσα, τα έθεσα με το μάτι λίγο πολύ αυθαίρετα. Πως σκεφτόμαστε για να τα ορίσουμε σωστά ;

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

@media &#40;max-width&#58; 996px&#41; &#123;
.containerbox &#123;
display&#58; block;
width&#58; 100%;
margin&#58;0px;
&#125;
&#125;

@media &#40;max-width&#58; 996px&#41; &#123;
.containerbox > div &#123;
display&#58; block;
width&#58; 100%;
margin&#58;0px;
&#125;
&#125;

@media &#40;max-width&#58; 996px&#41; &#123;
#header &#123; text-align&#58; center; &#125;
&#125; 
Άλλοι προτείνουν να θέτουμε media queries breakpoints για κάθε συσκευή που κυκλοφορεί εκεί έξω, αυτό μου φαίνεται πολύ κουραστικό σαν ιδέα ενώ άλλοι όπως είδα στο bootstrap έχουν λιγότερα όπως έγραψα πιο πάνω.

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από apsuh0s » 12 Ιούλ 2016 10:25

Τα breakpoints πρέπει να τα ορίσεις σύμφωνα με το περιεχόμενο σου και την ιεραρχία της πληροφορίας που είναι να διαθέσεις.

Όσον αφορά τα responsive frameworks, γνώμη μου είναι πως πρέπει να παίρνεις μια στρατηγική απόφαση πριν από κάθε project για τον τρόπο με τον οποίο θα σερβίρεις το περιεχόμενό σου. Αυτό προϋποθέτει να έχεις αποσαφηνίσει το information architecture, το UX κλπ. Εφόσον καταλήξεις σε ένα ξεκάθαρο πλάνο ακολουθεί η απόφαση για το αν θα επιλέξεις κάποιο framework ή θα φτιάξεις κάτι μικρό δικό σου το οποίο σε εξυπηρετεί. Με λίγα λόγια, οι ανάγκες του project θα σε κατευθύνουν για το τι θα επιλέξεις. Οι ανάγκες του project σήμερα αλλά και αύριο. Εξάλλου το web από τη φύση του είναι responsive. Γνωρίζω cssάδες οι οποίοι σχεδιάζουν ένα μονόστηλο full width page (από αυτά που ήταν στη μόδα με τα parallax effects) και φορτώνουν με το κιλό γραμμές css για responsive συμπεριφορά.
.ninja { color: black; visibility: hidden !important; }

ManosApp
Δημοσιεύσεις: 48
Εγγραφή: 19 Ιούλ 2013 22:34

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από ManosApp » 13 Ιούλ 2016 22:49

Οκ εγώ παρέθεσα ένα απλό πρωτότυπο-κώδικα και πάνω σε αυτό έκανα την ερώτηση, είναι ένα header και τρία boxes. Το ερώτημα μου είναι για να φαίνεται αυτό όσο το δυνατόν καλύτερα σε κινητά,tablets,υπολογιστές εσύ ποιόν συνδυασμό media queries θα έκανες για το μέγιστο δυνατό αποτέλεσμα, πως θα όριζες τα breakpoints ;

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από qpen » 07 Νοέμ 2016 20:11

Τα 3 κουτάκια έγιναν με flex box όμως στον internet explorer 8, 9 το πράμα χαλάει και δεν εμφανίζονται σωστά, τότε για να έχουμε τα 3 κουτάκια responsive πως πρέπει να γράψουμε τον κώδικα ;

Πρέπει να γράψουμε τον κώδικα με άλλη τεχνική (ποιά ;) ή εδώ είναι που βρίσκει χρήση το moderniz αν το γράφω σωστά ; Κι από τα δύο δεν έχω ιδέα πως να το κάνω μπορεί να δώσει κάποιος ένα παράδειγμα ώστε να δουλεύουν σε ie8, ie9 και πάνω ;

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από Basilakis » 08 Νοέμ 2016 09:18

qpen έγραψε:Τα 3 κουτάκια έγιναν με flex box όμως στον internet explorer 8, 9 το πράμα χαλάει και δεν εμφανίζονται σωστά, τότε για να έχουμε τα 3 κουτάκια responsive πως πρέπει να γράψουμε τον κώδικα ;
Και εδώ, πέρνεις μια απόφαση.
Δεν στηρίζω πλατφόρμα που δεν στηρίζει η ίδια η εταιρία.

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

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

Εννοείς να μην ασχολούμαι με IE8 kai ΙΕ9 και την Microsoft ;

Μα όταν κάποιος μπει και δει μαυτούς τους browsers την σελίδα θα νομίζει ότι δεν δουλεύει ακόμα πάρα πολλοί έχουν WindowsXP με αυτούς τους browsers πως να τους παραβλέψω ;

Γιαυτό ρωτώ να μου δείξετε άλλους τρόπους που μπορούμε να φτιάξουμε τα 3 αυτά κουτάκια όχι με flex box αλλά με άλλη τεχνική ή αν θα μπορούσε να μου δείξει κάποιος πως χρησιμοποιούμε στην πράξη το modernizr το οποίο δεν καταλαβαίνω πως το χρησιμοποιούμε, μια λύση με βάση αυτό το παράδειγμα με τα 3 κουτάκια που έχετε όχι κάτι πολύπλοκο.

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

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

Άλλος τρόπος χωρίς flexbox αλλά δεν το έχω ελέγξει σε IE8 κλπ
Λογικά θα παίζει

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

.containerbox &#123;
font-size&#58; 0;
text-align&#58; center;
&#125;
:wink:

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

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

τι είναι αυτό ; :o

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

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

Σε αυτό που είχε δημοσιεύσει ο ManosApp και του πρότειναν flex box που δεν είναι συμβατό με παλαιότερες εκδόσεις browsers, πρότεινα μια εναλλακτική.
Αν αναπαράγεις τον κώδικα με την αλλαγή που έδωσα θα δεις

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από qpen » 09 Νοέμ 2016 23:12

Οκ καταλαβαίνω τι θές να πείς αλλά τα κουτάκια έτσι στοιχίζονται κάθετα όχι οριζόντια όπως θέλω.

Μπορείς να μου δείξεις πως μπορώ να κάνω το παράδειγμα με τα τρία κουτάκια να δουλέψει με το Modernizr σε παλαιότερες εκδόσεις του ie ; Διάβασα για αυτό αλλά δεν βγάζω άκρη για το πως να το χρησιμοποιήσω και να το κάνω να δουλέψει ρε γαμώτο.

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

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

ΞΕΧΝΑ ΤΟΥΣ ΠΑΛΙΟΥΣ BROWSERS
Μηνυματάκι για αναβάθμιση και έξω από την πόρτα :)

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

Κεντράροντας 3 κουτάκια με responsive τρόπο (;)

Δημοσίευση από qpen » 10 Νοέμ 2016 12:19

Το wordpress όμως δεν το ξεχνά και χρησιμοποιεί σε πάρα πολλά θέματα το Modernizr όπως και άλλες σελίδες πολλές - το βλέπω απ το πρόσθετο του firefox ! Αυτοί το modernizr το χρησιμοποιούν για να φαίνεται η σελίδα σωστά όσο γίνεται και στους παλιούς browsers ετσι δεν είναι ;

Ένα παράδειγμα με τα 3 κουτάκια και modernizr μπορείς να δώσεις θέλω να μάθω πως να το χρησιμοποιώ ! Προσπάθησα διαβάζοντας στην σελίδα τους αλλά δεν μπορώ να το καταλάβω αν έχεις ασχοληθεί με αυτό δείξε πάνω στο παράδειγμα των κουτιών πως θα το εφαρμόζουμε ;

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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