Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.04.2015, 02:47   #1
lyna
Новичок
Джуниор
 
Регистрация: 05.04.2015
Сообщений: 3
По умолчанию Одноколочный сайт

Помогите пожалуйста с версткой. Нужно сделать сайт, адаптивный под смарфоны и шириной максимально 960px . С этим все понятно, но не получается сделать слева и справа header под экраны шире 960px. Там слева и справа разные картинки фона которые повторяются (repeat-x).

http://upload.akusherstvo.ru/image770757.jpg

Последний раз редактировалось lyna; 05.04.2015 в 02:49.
lyna вне форума Ответить с цитированием
Старый 05.04.2015, 07:26   #2
R71MT
Участник клуба
 
Аватар для R71MT
 
Регистрация: 16.06.2011
Сообщений: 1,428
По умолчанию

...задай фон в процентах, а тело в 960px
Нашедшего выход - затаптывают первым..

Последний раз редактировалось R71MT; 05.04.2015 в 07:29.
R71MT вне форума Ответить с цитированием
Старый 05.04.2015, 17:11   #3
lyna
Новичок
Джуниор
 
Регистрация: 05.04.2015
Сообщений: 3
По умолчанию

Если бы я знала как, я бы сделала!
lyna вне форума Ответить с цитированием
Старый 05.04.2015, 19:25   #4
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
Сообщение от lyna Посмотреть сообщение
Если бы я знала как, я бы сделала!
опять псевдо-женский род у нас... раз я девочка шансов получить готовый вариант больше это поможет вам
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 06.04.2015, 02:02   #5
lyna
Новичок
Джуниор
 
Регистрация: 05.04.2015
Сообщений: 3
По умолчанию

Цитата:
Сообщение от Stanislav Посмотреть сообщение
опять псевдо-женский род у нас... раз я девочка шансов получить готовый вариант больше это поможет вам
Вот код может вам пригодиться, и мне не нужна помощь в адаптивной верстке я не могу сделать чтобы появлялись блоки по бокам, если экран 960пикселей или больше, с разными картинками слева и справа. т.к. блоки по бокам продолжение центральной картинки.
Просто вы не знаете как сделать.
Код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Прижатый футер</title>
<link href="css/common.css" type="text/css" rel="stylesheet">
<style type="text/css">
html, body, .container{
 height: 100%;
 margin: 0;
background: #666; 
}
body{
background: url(../i/left.jpg) repeat-x;
}
.container {
 width: 960px;
 margin: auto;
}

#header{
 height: 342px;
}

#main{
 min-height: 100%;
 background: #fcf;
}
#footer{
 height: 100px;
 background: #f60;
}
 

</style>
</head>
<body>

<div class="container">
 <div id="header">
<img src="i/centr.jpg" alt=""  >  </img> 
</div> 
<div id="main">
centr 960px, а справа должен быть фон right.jpg 
проблема в том что он отличается от левого фона.

</div>
<div id="footer">
footer
</div>
</div>
 
 
</body>
</html>


________
Код нужно оформлять по правилам:
тегом [CODE]..[/СODE]
(это кнопочка на панели форматирования с решёточкой #)
Не забывайте об этом!

Модератор.

Последний раз редактировалось Serge_Bliznykov; 07.04.2015 в 18:35.
lyna вне форума Ответить с цитированием
Старый 06.04.2015, 08:15   #6
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
Вот код может вам пригодиться, и мне не нужна помощь в адаптивной верстке я не могу сделать чтобы появлялись блоки по бокам, если экран 960пикселей или больше, с разными картинками слева и справа. т.к. блоки по бокам продолжение центральной картинки.
такой код мне не пригодится.

Цитата:
Просто вы не знаете как сделать.
ну да...
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 06.04.2015, 14:18   #7
Streletz
Старожил
 
Регистрация: 03.01.2014
Сообщений: 2,870
По умолчанию

Цитата:
Сообщение от lyna Посмотреть сообщение
Вот код
То, что Вы выложили Ваши наработки это хорошо. Только код HTML нужно выделять с помощью кнопки "< >" в редакторе. Иначе читать невозможно.
Streletz вне форума Ответить с цитированием
Старый 07.04.2015, 18:29   #8
katrinweb
 
Регистрация: 07.04.2015
Сообщений: 5
Подмигивание

Попробуйте прописать стили только для экрана до 960px, используя @media:
Код HTML:
@media screen and (min-width:950px) and (max-width:962px)
{
.container 
{
width: 860px;
margin: auto;
}
}
Тогда эти свойства для классов будут срабатывать только для экранов с расширением от 950 до 962 пикселей.

Пробуйте подобрать значения width, и возьмите на вооружение overflow-x и все должно получится!
Путь в тысячу миль начинается с одного единственного маленького шага.
http://gks.com.ua - Создание, продвижение и поддержка сайтов.
katrinweb вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Парсить сайт и создать сайт-каталог на этой основе sn600 Фриланс 3 21.09.2013 19:41
Сайт визитка и корпоративный сайт sea_dream Свободное общение 2 15.04.2013 12:50
Сайт feesta Помощь студентам 1 30.01.2011 00:15
Как выкладывать свой сайт в интернет, Как мне выложить сайт, psywalker HTML и CSS 6 21.05.2009 15:04