|
Сообщение от devote
|
|
Покажите пример? Вот из того варианта что дал Octane, сделайте что бы при сжатии страницы у меня контент был сверху а рюшечки/менюшечки снизу??? Лично я этого не добился. Поправьте меня, может я что делаю не так.
|
Я писал:
|
Сообщение от Octane
|
|
через media queries для устройств с небольшим дисплеем будет удобно в одну колонку сайт вытянуть
|
В том коде нет media queries, поэтому ничего и не происходит.
Вот:
Screenshot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<!--[if lt IE 9 ]>
<script>
(function ($) {
$("header");
$("footer");
$("article");
$("section");
$("aside");
$("hgroup");
}(document.createElement));
</script>
<![endif]-->
<style>
header, footer, section, article, aside, hgroup {
display: block;
}
header {
background: #cff;
}
.wrapper {
background: #fcc;
}
.wrapper .inner-wrapper {
background: #fcf;
}
.wrapper article {
background: #fee;
}
.wrapper .sidebar-1 {
background: #cfc;
}
.sidebar-2 {
background: #ccf;
}
footer {
background: #ffc;
}
@media only screen and (min-width: 240px) {
body {
margin: 0;
}
header {
height: 80px;
}
.wrapper {
float: left;
width: 100%;
margin-left: -200px;
}
.wrapper .inner-wrapper {
float: right;
width: 100%;
margin-left: -400px;
}
.wrapper article {
margin-left: 400px;
}
.wrapper .sidebar-1 {
float: left;
width: 200px;
margin-left: 200px;
}
.sidebar-2 {
float: right;
width: 200px;
}
footer {
clear: both;
height: 80px;
}
}
</style>
</head>
<body>
<header>header</header>
<div class="wrapper">
<div class="inner-wrapper">
<article>content content content content content content content content content content content content content content content content content content content content content content content content content content content content</article>
</div>
<aside class="sidebar-1">sidebar 1</aside>
</div>
<aside class="sidebar-2">sidebar 2</aside>
<footer>footer</footer>
</body>
</html>