background vs text

Temiks · June 19, 2011

Добрый день. Прошу вашей помощи, форумчани

Имеется вот такое бг и текст. Бг это серые полоски по бокам, которые доходят до текста. Текст не фиксированный по ширине, пример на скринах

Как такое можно реализовать? Макет сам резиновый

Имеется вот такой код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css" >
        table {
            width: 100%;
        }
        table td {
            vertical-align: top;
            height: 100px;
            background: yellow;
        }
        .back {
            background: red;
            width: 160px;
        }
        .next {
            background: blue;
            width: 160px;
        }
        .left_bg {
            background: lightcoral;
        }
        .right_bg {
            background: lightgray;
        }
        .subject {
            text-align: center;
        }
    </style>
  </head>
  <body>
      <table>

          <tr>
              <td class="back" rowspan="2" >

              </td>
              <td class="left_bg" >

              </td>
              <td class="subject" >
                  <p>Новинки news news</p>
              </td>

              <td class="right_bg" >

              </td>
              <td class="next" rowspan="2" >

              </td>
          </tr>
          <tr>
              <td colspan="3" >

              </td>
          </tr>
      </table>
  </body>
</html>

Тестовая страница http://atemiks.wen.ru/test.html

Надеюсь на вашу помощь

Edited June 19, 2011 by Temiks

Softlink · June 19, 2011

а если порезать бг на 3 куска. Сделать три ячейки, не указывая ширину каждой, в крайние затолкать фон с полосками, а в центр уже без нее. Не получается так? По идее при фиксированной ширине родителя, текст будет растягивать центральную ячейку, а крайние как раз сжиматься.

p.s. если не сложно, можно вот эту картинку с фоном выложить куда-нибудь?

Edited June 19, 2011 by Softlink

Temiks · June 19, 2011

а если порезать бг на 3 куска. Сделать три ячейки, не указывая ширину каждой, в крайние затолкать фон с полосками, а в центр уже без нее. Не получается так? По идее при фиксированной ширине родителя, текст будет растягивать центральную ячейку, а крайние как раз сжиматься.
p.s. если не сложно, можно вот эту картинку с фоном выложить куда-нибудь?

1. вроде бы я так и сделал, в розовой, и серой ячейке будет бг само а по середине где (Новинки) будет текст, только что не получилось

2. Картинки с фоном

Средней колонке нельзя задавать фиксированную ширину, потому что текст будет разный по длине

Edited June 19, 2011 by Temiks

Softlink · June 19, 2011

в общем у меня получилось сделать так. Не знаю, красиво и правильно ли, но работает. Вот ссылка. Верхняя полоска сделана таблицей, нижняя дивами.

Temiks · June 19, 2011

в общем у меня получилось сделать так. Не знаю, красиво и правильно ли, но работает. Вот ссылка. Верхняя полоска сделана таблицей, нижняя дивами.

Спасибо, немного не так, а именно в том что полоски резина, но ты меня натолкнул на одну мысль, как можно сделать дивами , с таблицами еще пока не знаю п.с у тебя где таблица, текст на вторую стоку перешел

Softlink · June 19, 2011

в общем у меня получилось сделать так. Не знаю, красиво и правильно ли, но работает. Вот ссылка. Верхняя полоска сделана таблицей, нижняя дивами.
Спасибо, немного не так, а именно в том что полоски резина, но ты меня натолкнул на одну мысль, как можно сделать дивами , с таблицами еще пока не знаю п.с у тебя где таблица, текст на вторую стоку перешел

покажи потом как сделал.

А по таблице, там ширина выставлена в 60%, вот и поехал текст.

Edited June 19, 2011 by Softlink

Temiks · June 19, 2011

Ничего не получилось Softlink смотри там текст получается залазит на бг как на последнем скрине (Другие пользователи сейчас смотрят)

Softlink · June 19, 2011

Ничего не получилось Softlink смотри там текст получается залазит на бг как на последнем скрине (Другие пользователи сейчас смотрят)

погоди, у тебя написано, что верстка резиновая, так? Т.е. вот этот блок может быть растянут на всю страницу или у него все-таки есть какая-то ширина? Я просто не пойму, за счет чего будут сжиматься края? Только из-за разрешения монитора?

Edited June 19, 2011 by Softlink

Temiks · June 19, 2011

Ничего не получилось Softlink смотри там текст получается залазит на бг как на последнем скрине (Другие пользователи сейчас смотрят)
погоди, у тебя написано, что верстка резиновая, так? Т.е. вот этот блок может быть растянут на всю страницу или у него все-таки есть какая-то ширина? Я просто не пойму, за счет чего будут сжиматься края? Только из-за разрешения монитора?

Он растянут на всю ширину в колонке

Softlink · June 19, 2011

а посмотри-ка сейчас по той же ссылке. Вроде бы то что надо получилось.

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

Правда тут главное, чтобы текста не было на всю ширину монитора.

Больше вариантов я придумать не смог.

Edited June 19, 2011 by Softlink

Temiks · June 23, 2011

Softlink, спасибо тебе большое за помощь, но у тебя немного не так как нужно сделать было, но я сделал, все получилось

Вот пример кода:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css" >
        html, body {
            margin: 0;
            padding: 0;
        }
        table {
            float: left;
            margin: 0;
            padding: 0;
            border-collapse: collapse;
            width: 100%;
        }
        td {
            height: 100px;
            padding: 0;
            background: yellow;
            white-space: nowrap;
        }
        .container {
            padding: 0 90px;
        }
        .back, .next {
            float: left;
            height: 200px;
            width: 90px;
            background: red;
            margin: 0 0 0 -90px;
        }
        .next {
            float: right;
            margin: 0 -90px 0 0;
        }
        .bg_left {
            width: 50%;
            background: blanchedalmond;
        }
        .bg_right {
            width: 50%;
            background:  lightcoral;
        }
        .subject {
            background: gold;
        }
        .navigator {
            background: lightsalmon;
        }
    </style>
  </head>
  <body>
      <div class="container" >
          <div class="back" ></div>
          <table>
              <tr>
                  <td class="bg_left" ></td>
                  <td class="subject">
                  Новости кино и спорта
                  </td>
                  <td class="bg_right" ></td
               </tr>
               <tr>
                   <td colspan="3" class="navigator" >

                   </td>
               </tr>
          </table>
          <div class="next" ></div>
      </div>
  </body>
</html>

Softlink · June 23, 2011

Softlink, спасибо тебе большое за помощь, но у тебя немного не так как нужно сделать было, но я сделал, все получилось

На здоровье Ну принцип похож на мой. Пробовать не стал, но по коду понял, что ты центральной ячейке также выставил nowrap, которая и сжимает крайние.

главное, что заработало

Sign In

background vs text

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information