Οπότε είπα να ξεκινήσω να φτιάξω μια σελίδα όπως την έκανα πρό-responsive εποχής. Έτσι παρακάτω στον κώδικα που σας παραθέτω έχω ένα απλό σχέδιο με ένα header για τον τίτλο της ιστοσελίδας και από κάτω 3 κουτάκια. Το έστησα, δεν ξέρω βέβαια αν έχω θέσει σωστά τα media queries, όμως το κύριο που με απασχολεί είναι πως θα κεντράρω με responsive τρόπο τα 3 αυτά κουτάκια. Όπως βλέπετε δεν είναι ακριβώς κεντραρισμένα στο μέσο της σελίδας !
Θα ήθελα να μοιάζει όπως κεντράρονται στο μέσο της σελίδας για παράδειγμα όπως τα κουτάκια σ αυτό το layout του bootstrap: http://blackrockdigital.github.io/start ... -business/ (φυσικά δεν θέλω να χρησιμοποιήσω bootstrap !)
Αυτό πως μπορώ να το πετύχω μπορείτε να με βοηθήσετε ;
Σας παραθέτω τον κώδικα:
[/code]<!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>
ή εδώ είναι που βρίσκει χρήση το moderniz αν το γράφω σωστά ; Κι από τα δύο δεν έχω ιδέα πως να το κάνω μπορεί να δώσει κάποιος ένα παράδειγμα ώστε να δουλεύουν σε ie8, ie9 και πάνω ;
