адаптивный сайт
привет всем , решил свой старый сайт переделать по новой , и сделать его резиновым так сказать ,
карказ поставил, все сжимается , все работает ок ,
но у меня возникла идея сделать так чтобы левая колонка была статистическая и имела размер гдето 12 EM
и там будет лого фирмы висеть , чтобы оно не сжималось ,а было всегда одним размером ,
вот я попытался сделать и не получается , при сжатии правая сторона лезет под левую , что я не так сделал ??
каркас такой
<body>
<div class="wrapper">
<div class="header1">Kopf1</div>
<div class="header2">Kopf2</div>
<div class="menue"> Menü</div>
<div class="nav"> SIDEBAR</div>
<div
class="content">Inhalt</div>
<div class="footer">Footer</div>
</div>
</body>
цсс
body {
background-color: #C4C6C0;
}
.wrapper {
max-width: 960px;
margin: 0px auto;
background-color: #F3F6F7;
margin-top: 20px;
padding: 10px;
}
.header1 {
width:12em;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: left;
}
.header2 {
width: 79%;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: right;
}
.menue {
width: 100%;
height: 45px;
background-color: #FAF02F;
margin-bottom: 10px;
float: left;
}
.content {
width: 79%;
height: 520px;
background-color: #46CDE7;
float: right;
margin-bottom: 10px;
}
.nav {
width: 20%;
height: 520px;
float: left;
background-color: #FACC2E;
margin-bottom: 10px;
}
.footer {
clear: both;
flex: 0 0 auto;
height: 50px;
background-color: #F4CAD1;
Идея может и не плохая (сама задумка, я имею в виду).
Но принцип работы и подход, "двойка... выйди вон..." 
(шутка)
Теперь конструктивная критика.
1) если Вы хотите щирину колонки сделать с фиксированными размерами,
то и надо ширину задавать в жёстких единицах.
.nav {
width: 12em; /* ну или в пикселях, вместо width: 20%;*/
...
2) если оставить всё как есть, и выставить постоянную ширину левой
колонки, то при сжимании до мобильной версии, только эта колонка и останется.
Для основного содержания и места не останется.
3) учтя пункт 2, есть смысл сначала сделать набросок для мобильной версии,
а потом смотреть, с какой ширины есть смысл перестранивать дизайн в две колонки.
Или, если же этот сайт должен только в десктопном виде быть, то нужно установить рамки,
с которых при дальнейшем сужении появлялись бы полосы прокручивания.
при сжатии правая сторона лезет под левую , что я не так сделал ??
Вообще, при перерасчёте в проценты, нужно учитывать,
что все бровзеры по разному реагируют на border, margin и padding.
А чтоб всё сделать более-менее одинаково (одинаковые исходные параметры),
используют Normalize.css: https://necolas.github.io/normalize.css/
Ну и при перерасчёте в проценты ширин, нужно собственные border, margin и padding тоже брать во внимание.
20% и 79% не всегда достаточно, чтоб всё перекрыть.
Возможно border, margin и padding перебирают отпущенный им 1% (во всяком случае от определённых размеров сужения.)
В общем всё ясно. Всё решается парой строчек скриптов:
Измеряется ширина контейнера - это будет базовой величиной, от неё везде и во всём плясать
Потом измеряется правый край дива Kopf1 (разницы нет статический он или нет).
Это и будет левым краем дива Kopf2, ну можно и интервал поставить между дивами.
В диве header2 убрать float: right. И вообще переписать коды, чтобы абсолютными цифрами и не пахло.
Ну и опять понадобятся скрипты. Наверное придётся задавать и падинги ссылок в относительных единицах.
В общем несколько функций, расчитывать размеры и задавать динамически стили - DOM!
Прикреплённые файлы
Ну и опять понадобятся скрипты. Наверное придётся задавать и падинги ссылок в относительных единицах.
Вау
Зап
рожец на ракетном двигателе создавать будем???
Всё гениальное просто.
Чистый HTML и CSS и никаких скриптов.
Код действительно нужно переделать,
логику поменять и свойства в CSS правильно прописать.
Но колесо занова изобретать в принципе нет необходимости.
Как вариант, можно использовать простенькую функцию, чтобы расположить правую колонку за левой неизменяемой колонкой.
Но делает ли кто такую статичную колонку. В некоторых пределах и её надо изменять.
* В диве header2 убрать float: right , width. Классы поменять на дивы. ...
Прикреплённые файлы
Может поможет решить вопрос, там как раз про резиновую вёрстку с фикс колонками.
Может быть в простейших случаях, как в нашем.
Я уже делал и передлывал сайты и адаптировал шаблоны различной сложности и переплетённости дивов,
но всегда обходился стандартными средствами HTML и CSS.
Зная как оно работает, можно составить любой дизайн не используя тяжёлую аритилерию,
и при этом поставить все кубики с точностью до пикселя.
Но иногда есть необходимость сильно использовать скрипты и динамически задавать стили.
Такая необходимость может возникнуть для программирования каких-либо Apps или игр,
или динамической выдачи каких-либо графиков или статистик.
Раньше, когда я немного флэшем баловался, то там тоже многое делали через подобные скрипты.
Но там не было других вариантов.
В принципе, гвоздь можно и поленом заколотить, можно и кувалдой,
но молотком вроде как практичнее и удобнее получается.
HTML и CSS, очень мощные и удобные
инструменты.
К стати, Sergo2008 предложил этажом выше ссылку.
Чтоб потренироваться или идеи пособирать как решить проблему ТС, не так уж и плохое упражнение.
ну не надо пугатся , цвета я выставил такие, чтобы было просто удобно видеть границу дивов , потом естественно , все будет в другом цвете ,
и еще , я думаю что не стоит тут играть скриптами , думаю все можно решить правильным CSS ,
просто я не такой большой спец в этом , поэтому и попросил помоши зала
ну не надо пугатся , цвета я выставил такие, чтобы было просто удобно видеть границу дивов
Цветов я как раз и не испугался , сам так же делаю, когда непонятки возникают.
(помоему я это уже писал выше).
И было бы не плохо определиться с тем, какой дизайн Вы хотите иметь.
как написано в теме, "адаптивный" и как пишется в самом вопросе "резиновый",
это немного разные вещи. Оба немного устарели.
Сейчас пользуется популярностью "Отзывчивый дизайн"
Здесь можно прочитать о их различиях: http://wseweb.ru/diz/adaptivny-dizain.htm
Если Вы хотите оставить всё как есть, резиновый дизайн, только левую колонку сделать с постоянными размерами,
то решение я написал в моём первом ответе. Просто выставить фиксированные размеры в левой колонке.
Я думаю что не стоит тут играть скриптами …
Может тогда вообще и без CSS ?
Ставть таблицу с 2 ячейками и всё.
Да ещё надо убрать кое-что из дива header2 И показывает это так:
Так вот стоит ли делать первую колонку фиксированной величины. Нет конечно. И она должна изменяться (но не быть настолько резиновой, как правая).
Использование таблицы я привел больше для справки, я ими не пользуюсь.
Прикреплённые файлы
Ставть таблицу с 2 ячейками и всё.
не в обиду, но эту технику уже лет как 10 можно сказать никто не использует для дизайна.
- не удобная и не практичная
- много лишнего кода
- никакой динамики, (кроме как разъезжаться в тороны)
- с точки зрения семантики, таблицы тоже имеют другие назначения
- поисковики их тоже не особо любят
ну и много ещё чего говорит против использования таблиц для дизайна.
По простому выражаясь - это каменный век вебдизайна 
Вот почему я и добавил в посте:
Использование таблицы я привел больше для справки, я ими не пользуюсь
Я пользуюсь в основном скриптами, я пример вверху привёл, но что-то показался кому-то крутым, а сейчас другая крайность )))
Но и таблицы никто не отменял и иногда можно их использовать, особенно для наладки.
Предыдущее сообщение я написал ещё до того, как Вы его исправили
Но в любом случае не помешало бы знать и другим, кто этого ещё не знает.
Но и таблицы никто не отменял и иногда можно их использовать, особенно для наладки
Таблицы действительно никто не отменял.
Но всё нужно использовать по назначению.
Таблицы предназначены для размещения табелярных содержаний, статистик и прочей бухгалтерии.
У них и свойства для этого больше подходят.
Их раньше для дизайна тоже использовали.
И тогда это было очень удобно,так как другого варианта не было.
А CSS поддерживались только частично.
Сейчас всё поменялось сильно.
Попробуй:
.header1 {
position:relative;
width:12em;
height: 160px;
background-color: #01DF65;
margin-bottom: 10px;
float: left;
}
.header2 {
height: 160px;
background-color: #01DF65;
margin-left: 12.2em;
margin-bottom: 10px;
}
Кажется работает.
Прикреплённые файлы
ну задумка у меня такая, чтобы в левом верхем углу стояло лого фирмы , и чтобы оно не изменялось при именении размера экрана, а вот насчет того, что уже есть что то новое ,не знал, щас почитаю, что там есть интересного, спасибо за совет ,
назад
список