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

(Ответов: 26, Просмотров: 2166)
Страница 2 из 3 Первая 123 Последняя
  1. Гуру Аватар для kvins
    • Регистрация: 24.08.2011
    • Сообщений: 1,112
    • Репутация: 160
    Вспомнил для себя интересующий вопрос.

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

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

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

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

    учитываются все мониторы, даже эпловские + шапка стандартно идет 1280 в ширину , а море расширяется в зависимости от браузера
    • 0
  2. Студент
    • Регистрация: 17.08.2010
    • Сообщений: 74
    • Репутация: 12
    Цитата Сообщение от 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;
    • 1

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

    kvins(06.06.2013),
  3. Дипломник Аватар для MaxWilender
    • Регистрация: 06.05.2013
    • Сообщений: 108
    • Репутация: 4
    • 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
  4. Студент
    • Регистрация: 17.08.2010
    • Сообщений: 74
    • Репутация: 12
    я подумаю. В любом случае наврятли кроссбраузерно будет без единого изменения в html (не ID не class - ов) в коде.
    • 1

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

    MaxWilender(16.06.2013),
  5. Дипломник Аватар для MaxWilender
    • Регистрация: 06.05.2013
    • Сообщений: 108
    • Репутация: 4
    • Webmoney BL: ?
    Alexben,
    Ну как? Нету вариантов сделать через CSS класс?
    Kazanski.PRO - разработка и продвижение сайтов
    • 0
  6. Студент
    • Регистрация: 17.08.2010
    • Сообщений: 74
    • Репутация: 12
    MaxWilender,
    сори, совсем забыл про вопрос.
    Нет, вариантов сделать без изменения HTML, просто не получится. А с изменениями, тут масса вариантов.
    Тут не структурированная таблица, нет отдельных сематических блоков. Грубо говоря, таблица ради таблицы, что естесвенно для автоматического конвектора, который визуально отформатировал код, а не логически.

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

    можно попробовать только ручками отформатировать, с помощью прошлого варианта. Т.е. регулярные выражения, могут тебе перебрать весь проект, конечно придется попотеть и почитать доки по regexp. Но все в полне реально!)
    • 0
  7. Здравомыслие-удел слабых! Аватар для Rubilnik
    • Регистрация: 01.02.2013
    • Сообщений: 157
    • Репутация: 35
    • Webmoney BL: ?
    Alexben, у меня такой вопрос, это из раздела "я понятия не имею как и чем это делать". В общем есть мобильная версия сайта на jQueryMobile. Всё бы хорошо, но только он не уменьшает размеры видео в посте (встроенного в страницу). Проще говоря, виджет с видео из ютуба заходит за края при просмотре мобильной версии сайта, когда все картинки отлично подгоняются автоматом.
    Спасибо за внимание :)
    Читы, коды и сохранения для игр и приложений на iOS и Android только на Шляхтен.ру
    • 0
  8. Студент
    • Регистрация: 17.08.2010
    • Сообщений: 74
    • Репутация: 12
    Rubilnik, "я понятия не имею как и чем это делать" если вы не знаете, то как это решит вашу проблему?
    Я не даю точных рецептов, а также их последовательность. Если вам, это поможет, то скажу следующее:
    используйте в мобильной версии сайта другие размеры видео. Переопределяйте динамически с помощью JS или отдельных стилей, для мобильной версии. Сейчас указан единый для обоих сайтов фиксированый размер плеера.
    • 0
  9. Здравомыслие-удел слабых! Аватар для Rubilnik
    • Регистрация: 01.02.2013
    • Сообщений: 157
    • Репутация: 35
    • Webmoney BL: ?
    Alexben, да спасибо. Я понял как сделать. Прописал к iframe в CSS ширину 100% и теперь всё просто супер! :)
    Читы, коды и сохранения для игр и приложений на iOS и Android только на Шляхтен.ру
    • 0
  10. Студент Аватар для maximjke
    • Регистрация: 06.05.2013
    • Сообщений: 80
    • Репутация: 15
    Подскажите пожалуйста, _massagery.com.ua, в шапке пытаюсь вывести номера мобильного с картинкой оператора, но почему-то не получается выровнять номер по картинке (чтобы на одном уровне было). Получается только чтобы номер телефона под картинкой был.
    • 0
Страница 2 из 3 Первая 123 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Бесплатные консультации
Оффтоп и свободные темы 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

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

Вы можете попросить инвайт у любого модератора:

Информеры