Проблемы с CSS

Тема в разделе "Веб-дизайн", создана пользователем Slavalist, 22 май 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Slavalist

    Slavalist Создатель

    Регистр.:
    1 фев 2009
    Сообщения:
    42
    Симпатии:
    2
    Привет всем! Недавно решил начать учить CSS и решил это делать сразу на примере, нарисовал дизайн, создал блоки div-ом и начал писать код в css, но встала одна маленькая проблема с блоком. Нарисовал картинки для этого блока и решил написать туда текст в html, текст написал в длину, но он почему-то не переносился на следующую строку, а писался дальше и писать можно было до конца дизайна. Что мне надо прописать чтобы текст не выходил за рамки блока и переносился на следующую строку?
    HTML Код
    <div class="block">
    <div class="block-up">
    </div>
    <div class="block-center">
    fjkk=sf=fsafa<BR>fskfsksf<BR>fksfasffjkk=sf=fsafaffffffffffffffffffffffffff
    fffffffffffff<BR>fskfsksf<BR>fksfasf
    </div>
    <div class="block-down">
    </div>
    </div>
    Код CSS
    .block {
    margin-left:4%;
    display:block;
    width:206px;
    }
    .block-up {
    background:url(../img/bg.png) no-repeat;
    height: 40px;
    width: 206px;
    }
    .block-center {
    background:url(../img/bg-cent.png) repeat-y;
    padding: 0px 0px 0px 10px;
    width: 206px;
    color:#000000;
    font-size: 16px;
    }
    .block-down {
    background:url(../img/bg-down.png) no-repeat;
    height: 40px;
    width: 206px;
    }
     
  2. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    У меня все нормально переноситься на сл. строку
     
  3. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Ширина для div обозначена, значит всё правильно.

    Проверил, у меня тоже всё переносит по словам, но если писать текст без пробелов или через &nbsp; - то это будет считаться как единое длинное слово и тогда блок будет разъезжаться под его длину.
     
  4. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    white-space:inherit;
     
  5. comua

    comua Постоялец

    Регистр.:
    26 фев 2008
    Сообщения:
    110
    Симпатии:
    31
    Вот такие вот пироги получаются

    [​IMG]

    если использовать такой код

    Код:
    <html>
    <body>
    
    <style type="text/css">
    
    .block {
    margin-left:4%;
    display:block;
    width:206px;
    }
    
    .block-up {
    background:#0f0;
    height: 40px;
    width: 206px;
    }
    
    .block-center {
    background:#f00;
    padding: 10px;
    width: 186px;
    color:#fff;
    font-size: 16px;
    }
    
    .block-down {
    background:#00f;
    height: 40px;
    width: 206px;
    }
    
    </style>
    
    <div class="block">
    <div class="block-up">
    </div>
    <div class="block-center">
    fjkk=sf=fsafa fskfsksf fksfasffjkk=sf=fsafaf fffffffffffffffffffffffff fffffffffffff fskfsksf fksfasf
    </div>
    <div class="block-down">
    </div>
    </div>
    
    </html>
    </body>
    из ширины блока block-center вычитаем размер padding. Если не вычитать, то будет такая вот картина

    [​IMG]

    Еще дам совет - ели размер в пикселях равен нулю (0рх), то надо писать просто 0, а не 0рх.

    Кстати, не совсем понял, что автор хотел реализовать таим кодом. Посмотри вот еще такой пример, возможно это ближе к тому, что тебе надо.
     
  6. Slavalist

    Slavalist Создатель

    Регистр.:
    1 фев 2009
    Сообщения:
    42
    Симпатии:
    2
    Спасибо вам) Проблема действительно была в пробелах) если пробелы не писать, то строка идёт дальше, а с пробелами отлично переноситься :)
     
Статус темы:
Закрыта.