Бесплатные консультации по HTML/CSS

**kvins** · 05.06.2013 20:48

Вспомнил для себя интересующий вопрос.

Задача стояла такая, существует шапка сайта, а по краям нарисованно море, нужно сделать так чтобы море растягивалось на всю ширину экрана, но при этом не увеличивалась в высоту. А также при растягивании постараться не потерять качество или при дублировании чтобы не было видно склеек фотки.

Как бы вы сделали это ?

---------- Сообщение добавлено 15:48 ---------- Предыдущее 15:46 ----------

Забыл детали.

учитываются все мониторы, даже эпловские + шапка стандартно идет 1280 в ширину , а море расширяется в зависимости от браузера

**Alexben** · 06.06.2013 00:31

Сообщение от kvins

даже эпловские

Ретина? only screen and (-webkit-min-device-pixel-ratio: 2). Это понятно. Это не основная проблема.
учитываются все мониторы - начальный порог возмем от: 1024.

вариант А - есть только правая граница.
вариант Б - есть только левая граница.
вариант С - границ у моря нет.

CODE

Код HTML:

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css">


    div {
        margin: 0;
        padding: 0;
    }

    .container {
        position: relative;
        overflow: hidden;
        width: 100%;

    }

    .head {
        margin: 0 auto;
        min-width: 1000px;
        max-width: 1280px;
        width: 100%;
        height: 314px;
        background: url(bg.jpg) 50% 0% no-repeat;
    }

    .head:before {
        position: relative;
        left: -500px;
        display: block;
        float: left;
        width: 500px;
        height: 314px;
        background: url(sea.png) 0% 0% no-repeat;
        background-size: contain;
        color: white;
        content: " 01 ";
        text-align: right;
    }

    .head:after {
        position: relative;
        left: 500px;
        display: block;
        float: right;
        width: 500px;
        height: 314px;
        background: url(sea.png) 0% 0% no-repeat;
        color: white;
        content: " 02 ";
    }



</style> <div class="container"> <div class="head"></div> </div> </body> </html>

[свернуть]

http://zalil.ru/34560039 - IMG. Смотреть в хроме, не стал кросс-браузерить пример.

---------- Сообщение добавлено 19:27 ---------- Предыдущее 19:21 ----------

как выглядит:

---------- Сообщение добавлено 19:31 ---------- Предыдущее 19:27 ----------

Если фон "тянется" - вообще шикарно, мостим один справа на лево, другой слева на право.
Или статика, в 640 px;

**MaxWilender** · 14.06.2013 23:20

Alexben, нужна помощь ещё :)
Ссылки на картинки массово я прописал. А теперь такой момент.
У меня страница html с огромной таблицей - чисто текста на 500 kb
Вот отрывок:

Код:

<table >
<tr>
<td>Код</td>
<td>Наименование</td>
<td>Цена с НДС</td>
<td>Рекоменд. розничная</td>
</tr>
<tr >
<td>"Audi Q7"</td>
</tr>
<tr>
<td><a href="images/AUDQ.56.0334.jpg" target="_blank">AUDQ.56.0334</a></td>
<td>Решётка передняя мини d 76 низкая "Audi Q7"</td>
<td>136 500</td>
<td>191 100</td>
</tr>
<tr>
<td><a href="images/AUDQ.48.0335.jpg" target="_blank">AUDQ.48.0335</a></td>
<td>Защита переднего бампера d 76 "Audi Q7"</td>
<td>110 900</td>
<td>155 300</td>
</tr>

и так далее.
Смысл в том, чтобы сделать аккордеон, раскрывающиеся ячейки. Т.е. нажимаешь на

Код:

<tr >
<td>"Audi Q7"</td>
</tr>

и раскрывается уже всё остальное. Далее - следующая категория. Короче, надо, чтобы была одна большая таблица на странице свернутая по категориям. Как это реализовать в принципе нашёл, но только вот не совсем подходит ТА реализация к моей таблице. Можно было бы переделать, но там ОЧЕНЬ много кода.
Желательно, чтобы всё было через CSS.

**Alexben** · 16.06.2013 09:23

я подумаю. В любом случае наврятли кроссбраузерно будет без единого изменения в html (не ID не class - ов) в коде.

**MaxWilender** · 20.06.2013 12:50

Alexben,
Ну как? Нету вариантов сделать через CSS класс?

**Alexben** · 20.06.2013 20:21

MaxWilender,
сори, совсем забыл про вопрос.
Нет, вариантов сделать без изменения HTML, просто не получится. А с изменениями, тут масса вариантов.
Тут не структурированная таблица, нет отдельных сематических блоков. Грубо говоря, таблица ради таблицы, что естесвенно для автоматического конвектора, который визуально отформатировал код, а не логически.

---------- Сообщение добавлено 15:21 ---------- Предыдущее 15:18 ----------

можно попробовать только ручками отформатировать, с помощью прошлого варианта. Т.е. регулярные выражения, могут тебе перебрать весь проект, конечно придется попотеть и почитать доки по regexp. Но все в полне реально!)

**Rubilnik** · 20.06.2013 23:50

Alexben, у меня такой вопрос, это из раздела "я понятия не имею как и чем это делать". В общем есть мобильная версия сайта на jQueryMobile. Всё бы хорошо, но только он не уменьшает размеры видео в посте (встроенного в страницу). Проще говоря, виджет с видео из ютуба заходит за края при просмотре мобильной версии сайта, когда все картинки отлично подгоняются автоматом.
Спасибо за внимание :)

**Alexben** · 22.06.2013 12:05

Rubilnik, "я понятия не имею как и чем это делать" если вы не знаете, то как это решит вашу проблему?
Я не даю точных рецептов, а также их последовательность. Если вам, это поможет, то скажу следующее:
используйте в мобильной версии сайта другие размеры видео. Переопределяйте динамически с помощью JS или отдельных стилей, для мобильной версии. Сейчас указан единый для обоих сайтов фиксированый размер плеера.

**Rubilnik** · 22.06.2013 18:49

Alexben, да спасибо. Я понял как сделать. Прописал к iframe в CSS ширину 100% и теперь всё просто супер! :)

**maximjke** · 23.06.2013 01:16

Подскажите пожалуйста, _massagery.com.ua, в шапке пытаюсь вывести номера мобильного с картинкой оператора, но почему-то не получается выровнять номер по картинке (чтобы на одном уровне было). Получается только чтобы номер телефона под картинкой был.

	05.06.2013 20:48 #11
kvins Гуру Регистрация: 24.08.2011 Сообщений: 1,110 Репутация: 160	Вспомнил для себя интересующий вопрос. Задача стояла такая, существует шапка сайта, а по краям нарисованно море, нужно сделать так чтобы море растягивалось на всю ширину экрана, но при этом не увеличивалась в высоту. А также при растягивании постараться не потерять качество или при дублировании чтобы не было видно склеек фотки. Как бы вы сделали это ? ---------- Сообщение добавлено 15:48 ---------- Предыдущее 15:46 ---------- Забыл детали. учитываются все мониторы, даже эпловские + шапка стандартно идет 1280 в ширину , а море расширяется в зависимости от браузера Создаю сайты на Битрикс Тех поддержка на Битриксе
0 kvins

	14.06.2013 23:20 #13
MaxWilender Дипломник Регистрация: 06.05.2013 Сообщений: 109 Репутация: 5 Webmoney BL: ?	Alexben, нужна помощь ещё :) Ссылки на картинки массово я прописал. А теперь такой момент. У меня страница html с огромной таблицей - чисто текста на 500 kb Вот отрывок: Код: <table > <tr> <td>Код</td> <td>Наименование</td> <td>Цена с НДС</td> <td>Рекоменд. розничная</td> </tr> <tr > <td>"Audi Q7"</td> </tr> <tr> <td><a href="images/AUDQ.56.0334.jpg" target="_blank">AUDQ.56.0334</a></td> <td>Решётка передняя мини d 76 низкая "Audi Q7"</td> <td>136 500</td> <td>191 100</td> </tr> <tr> <td><a href="images/AUDQ.48.0335.jpg" target="_blank">AUDQ.48.0335</a></td> <td>Защита переднего бампера d 76 "Audi Q7"</td> <td>110 900</td> <td>155 300</td> </tr> и так далее. Смысл в том, чтобы сделать аккордеон, раскрывающиеся ячейки. Т.е. нажимаешь на Код: <tr > <td>"Audi Q7"</td> </tr> и раскрывается уже всё остальное. Далее - следующая категория. Короче, надо, чтобы была одна большая таблица на странице свернутая по категориям. Как это реализовать в принципе нашёл, но только вот не совсем подходит ТА реализация к моей таблице. Можно было бы переделать, но там ОЧЕНЬ много кода. Желательно, чтобы всё было через CSS.
0 MaxWilender

	20.06.2013 12:50 #15
MaxWilender Дипломник Регистрация: 06.05.2013 Сообщений: 109 Репутация: 5 Webmoney BL: ?	Alexben, Ну как? Нету вариантов сделать через CSS класс? SHOPIX.by - готовые сайты на 1С-Битрикс.
0 MaxWilender

	20.06.2013 20:21 #16
Alexben Студент Регистрация: 17.08.2010 Сообщений: 74 Репутация: 12	MaxWilender, сори, совсем забыл про вопрос. Нет, вариантов сделать без изменения HTML, просто не получится. А с изменениями, тут масса вариантов. Тут не структурированная таблица, нет отдельных сематических блоков. Грубо говоря, таблица ради таблицы, что естесвенно для автоматического конвектора, который визуально отформатировал код, а не логически. ---------- Сообщение добавлено 15:21 ---------- Предыдущее 15:18 ---------- можно попробовать только ручками отформатировать, с помощью прошлого варианта. Т.е. регулярные выражения, могут тебе перебрать весь проект, конечно придется попотеть и почитать доки по regexp. Но все в полне реально!)
0 Alexben

	20.06.2013 23:50 #17
Rubilnik Здравомыслие-удел слабых! Регистрация: 01.02.2013 Сообщений: 157 Репутация: 35 Webmoney BL: ?	Alexben, у меня такой вопрос, это из раздела "я понятия не имею как и чем это делать". В общем есть мобильная версия сайта на jQueryMobile. Всё бы хорошо, но только он не уменьшает размеры видео в посте (встроенного в страницу). Проще говоря, виджет с видео из ютуба заходит за края при просмотре мобильной версии сайта, когда все картинки отлично подгоняются автоматом. Спасибо за внимание :) Читы, коды и сохранения для игр и приложений на iOS и Android только на Шляхтен.ру
0 Rubilnik

Бесплатные консультации по HTML/CSS

Опции темы

CODE

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Бесплатные консультации

Бесплатные консультации по CMS Joomla

Бесплатные консультации по Drupal

Бесплатные консультации по CMS Joomla

Бесплатные домен-консультации для начинающих

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	22.06.2013 12:05 #18
Alexben Студент Регистрация: 17.08.2010 Сообщений: 74 Репутация: 12	Rubilnik, "я понятия не имею как и чем это делать" если вы не знаете, то как это решит вашу проблему? Я не даю точных рецептов, а также их последовательность. Если вам, это поможет, то скажу следующее: используйте в мобильной версии сайта другие размеры видео. Переопределяйте динамически с помощью JS или отдельных стилей, для мобильной версии. Сейчас указан единый для обоих сайтов фиксированый размер плеера.
0 Alexben

	22.06.2013 18:49 #19
Rubilnik Здравомыслие-удел слабых! Регистрация: 01.02.2013 Сообщений: 157 Репутация: 35 Webmoney BL: ?	Alexben, да спасибо. Я понял как сделать. Прописал к iframe в CSS ширину 100% и теперь всё просто супер! :) Читы, коды и сохранения для игр и приложений на iOS и Android только на Шляхтен.ру
0 Rubilnik

	23.06.2013 01:16 #20
maximjke Студент Регистрация: 06.05.2013 Сообщений: 83 Репутация: 17	Подскажите пожалуйста, _massagery.com.ua, в шапке пытаюсь вывести номера мобильного с картинкой оператора, но почему-то не получается выровнять номер по картинке (чтобы на одном уровне было). Получается только чтобы номер телефона под картинкой был.
0 maximjke

Темы	Раздел	Ответов	Последний пост
Бесплатные консультации	Оффтоп и свободные темы	9	28.02.2012 19:31
Бесплатные консультации по CMS Joomla	Другая работа	21	27.12.2011 18:32
Бесплатные консультации по Drupal	Другая работа	0	23.10.2011 17:12
Бесплатные консультации по CMS Joomla	Создание сайтов	11	24.09.2011 14:42
Бесплатные домен-консультации для начинающих	Хостинг и Серверы	3	28.06.2011 14:22