1. Вы находитесь в архивной версии форума xaker.name. Здесь собраны темы с 2007 по 2012 год, большинство инструкций и мануалов уже неактуальны.
    Скрыть объявление

[HTML] Проблем ка с границами текста, помогите исправить

Тема в разделе "HTML-верстка", создана пользователем lytgeygen, 15 июн 2009.

  1. lytgeygen

    lytgeygen pacifiste maniaque ..::V.I.P::..

    Регистрация:
    13 окт 2008
    Сообщения:
    431
    Симпатии:
    244
    Баллы:
    0
    Всем доброго времени суток, недавно начал составлять шаблон но столкнулся с проблемкай, не знаю как сделать граници текста.... помогите плз исправить, HTML и CSS _http://slil.ru/27761089 :)
     
  2. rijy

    rijy Команда форума Админ

    Регистрация:
    5 авг 2006
    Сообщения:
    521
    Симпатии:
    224
    Баллы:
    0
    lytgeygen, лучше просто приведи код..
     
  3. lytgeygen

    lytgeygen pacifiste maniaque ..::V.I.P::..

    Регистрация:
    13 окт 2008
    Сообщения:
    431
    Симпатии:
    244
    Баллы:
    0
    index.html
    PHP:
    <html>
         <
    head>
             <
    title>
             
    Good Link сеть обмена ссылками 
             
    </title>
            <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
            <
    style type="text/css" media="all">
                 @
    import "style/css.css";
            </
    style>
         </
    head>
         <
    body>
             <
    div id="center">
                 <
    div id="header">
                       <
    h1><a href="#">Good Link</a></h1><p>Сеть обмена ссылками</p>
                 </
    div>
                 <
    div id="content">
                     <
    TABLE WIDTH=740 BORDER=0 CELLPADDING=1 CELLSPACING=1 BGCOLOR=white>
                         <
    tr BGCOLOR=#D3DDF4>
                             
    <td>
                                 <
    small>
                                     <
    marquee width="740">
                                     
    Бегущая строка
                                     
    </marquee>
                                 </
    small>
                             </
    td>
                         </
    tr>
                     </
    table>
                     <
    br />
                     <
    div id="blockA">
                         <
    div class="links">
                         <
    h2>Случайные ссылки</h2>
                         <
    p>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         <
    a href="#">www.site.ru</a> - Описание ссылки....<br>
                         </
    p>
                         </
    div>
                         <
    div class="menu">
                             <
    h2>Меню</h2>
                             <
    h3>Название раздела меню</h3>
                             <
    p><a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a>
                             </
    p>
                             <
    h3>Название раздела меню</h3>
                             <
    p><a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a><br>
                             <
    a href="#"><img src='style/l_i.png' border=0>Содержимое меню (ссылка)</a>
                             </
    p>
                         </
    div>
                         <
    br />
                     </
    div
                     <
    br />
                     <
    TABLE WIDTH=740 BORDER=0 CELLPADDING=1 CELLSPACING=1 BGCOLOR=white>
                         <
    tr BGCOLOR=white>
                         </
    tr>
                     </
    table>
                     <
    div id="blockB">
                         <
    div class="info">
                          <
    h2>Инфо</h2>
                          <
    p>
                          
    fvthborbhoprthnbuioprhbopurntiopbvjet0e5u8g90hb904uyh90jgb9506ujh0924hb93705uh97042h9570hurh905h90568j5jh9358uyh5-uh9n598jh358-hu5hjdfkjlkbndoi;bjr8opfjrotijhepo8gj4topivj6tyr9bjrtegbipojervipbmjvbok654figu965vjhtrgtjhp0g-5u09gvufhgop8hn8j69bjr5yohj3097nhjqero-hrwmetboiuifb34swgfcf5m6jk3t5ehifgniyrfbrdjmf34wntmd,fbdrk;sgvvfmdfnnnsf3ftbjlcnvbjmfjjgvnrkcmvnoutchfjrtm.
                          </
    p>
                         </
    div>
                         <
    div class="news">
                            <
    h2>Новости</h2><br />
                            <
    h3>Название новости</h3>
                            <
    p>
                                 <
    small>
                                 <
    img src='style/t_i.gif' border=0время и дата
                                 
    </small>
                                 <
    br />
                             
    Содержимое статьи или новости....
                            </
    p>
                            <
    h3>Название новости</h3>
                            <
    p>
                                 <
    small>
                                 <
    img src='style/t_i.gif' border=0время и дата
                                 
    </small>
                                 <
    br />
                             
    Содержимое статьи или новости....
                            </
    p>
                            <
    h3>Название новости</h3>
                            <
    p>
                                 <
    small>
                                 <
    img src='style/t_i.gif' border=0время и дата
                                 
    </small>
                                 <
    br />
                             
    Содержимое статьи или новости....
                            </
    p>
                         </
    div>
                         
                     </
    div>
                     <
    TABLE WIDTH=740 BORDER=0 CELLPADDING=1 CELLSPACING=1 BGCOLOR=white>
                         <
    tr BGCOLOR=white>
                         </
    tr>
                     </
    table>
                     <
    br />
                     <
    TABLE WIDTH=740 BORDER=0 CELLPADDING=1 CELLSPACING=1 BGCOLOR=white>
                         <
    tr BGCOLOR=#D3DDF4>
                             
    <td>
                                 <
    small>
                                     <
    marquee width="740">
                                     
    Бегущая строка
                                     
    </marquee>
                                 </
    small>
                             </
    td>
                         </
    tr>
                     </
    table>
                 </
    div>
                 <
    div id="footer">
                     <
    p>
                         <
    center>
                             <
    small>
                              
    Copyright &copy2009 <a href="#">Good Link</a> | Code by: <a rel="nofollow' target="_blank" href="http://lytgeygen.ru/">lytgeygen</a>
                             
    </small>
                         </
    center>
                     </
    p>
                 </
    div>
             </
    div>
         </
    body>
    </
    html>
    CSS
    PHP:
    /*
    Desing by lytgeygen
    Site: www.lytgeygen.ru
    E-mail: [email protected]
    */

    body background#eee }
    #center {width: 800px; margin: 10px auto;}
    #header { height: 100px; background: #eee url(header.gif) no-repeat; }
    #header h1 { padding: 20px 0 0 25px; }
    #header h1 a { text-decoration: none; color: #22AADD;}
    #header p { color: #8FD107; font-size: 12px; font-weight: 100; padding: 0 0 0 25px; }
    #content { background: #eee url(content.gif) repeat-y; padding: 30px; }
    #blockA { padding: 0 0 50px 0; }
    .links margin3px 0 0 3pxborder-top1px solid #aaa; background: #99CC00; width: 450px; padding: 0 0 10px 10px; float: left; }
    .links h2 color#FFFFFF; font-size: 20px; padding: 0;}
    .links a color#FFFF00;}
    .links a:hover color#FDA702;}
    .links p margin3px 0 0 3px; }


    .
    menu border-top1px solid #aaa; background: #FC5AAB; width: 200px; padding: 10px; float: right; }
    .menu h2 color#FFFFFF; font-size: 20px; padding: 0;}
    .menu h3 color#61AEFC; font-size: 16px; padding: 10px 0 0 0;}
    .menu p color#000000; font-size: 14px; padding: -15px 0 0 0; width: 200px;}
    .menu a color#FFFF00; }
    .menu a:hover color#99FF00; }

    #blockB { padding: 10px 0 40px 0; }
    .news border-top1px solid #aaa; background: #FFCC00; width: 350px; padding: 10px; float: right; }
    .news h2 color#FFFFFF; font-size: 20px; padding: 0;}
    .news h3 color#2FEA00; font-size: 16px; padding: 10px 0 0 0;}
    .news p margin3px 0 0 3pxcolor#000000; font-size: 14px; padding: -15px 0 0 0;}

    .info border-top1px solid #aaa; background: #61AEFC; width: 300px; padding: 10px; float: left;}
    .info h2 color#FFFFFF; font-size: 20px; font-weight: 300; padding: 0;}
    .info p margin3px 0 0 3pxcolor#000000; font-size: 14px; font-weight: 100; padding: -15px 0 0 0;}


    #footer { background: #eee url(footer.gif) no-repeat; padding: 10px 0; }
    #footer p { font-size: 10px; padding: 10px 0 0 25px; }
     
  4. Web-Evt

    Web-Evt Иллюзор ..::V.I.P::..

    Регистрация:
    31 май 2007
    Сообщения:
    13
    Симпатии:
    86
    Баллы:
    0
    lytgeygen,
    граница текста - это как?

    Помести текст в какой-нить элемент (div) и пропиши ему в css класс:
    Будет граница..рамочка)
     
  5. VecktorZona

    VecktorZona Новичок

    Регистрация:
    28 фев 2007
    Сообщения:
    0
    Симпатии:
    159
    Баллы:
    0
    Web-Evt скорее всего он имел ввиду, что в блоке info сам текст выскаривал за его пределы:
    lytgeygen Не знаю зачем ты вставил такую абра-ка-дабру,и
    как ты начал состовлять шаблон? Наверно собирая с разных шаблонов - Мутантошаблон???
    Конечно сам шаблон же желает для себя лутчего!!!
    Скачать
     
    1 человеку нравится это.
  6. Web-Evt

    Web-Evt Иллюзор ..::V.I.P::..

    Регистрация:
    31 май 2007
    Сообщения:
    13
    Симпатии:
    86
    Баллы:
    0
    ааа =( это жесть, первый раз слышу такую перлу ))

    Автор четкого ответа не получил - автор не задал четкого вопроса. Копаться в куче кода, искать неведомую проблему границ текста мне не хочется. Локализуй проблему, опиши ее и приведи четкий кусок кода (а не весь листинг вместе с css), где эта проблема присутствует.
     
  7. lytgeygen

    lytgeygen pacifiste maniaque ..::V.I.P::..

    Регистрация:
    13 окт 2008
    Сообщения:
    431
    Симпатии:
    244
    Баллы:
    0
    Во всех четырёх элементов div (links, news, info и menu) весь текст уходит за его пределы((
     
  8. Web-Evt

    Web-Evt Иллюзор ..::V.I.P::..

    Регистрация:
    31 май 2007
    Сообщения:
    13
    Симпатии:
    86
    Баллы:
    0
    lytgeygen,
    в каком браузере?

    Хм =) Присмотрелся, что там в диве написано..Написана сплошная абракадабра без пробелов. Все браузеры переносят по словам, а автор написал одно большое слово - не удивительно, что текст выходит за границы блока.

    Решение:
    1. Если не хотите, чтобы такой текст "вылазил" за границы - установите css свойтво overflow как hidden.
    2. Если хотите, чтоб текст с такими "словами" все таки переносился, проверяйте его перед записью в БД на вот такие длинные слова, и принудительно вносите в них пробелы, скажем, после каждого 15го символа. Например, вот так (PHP):
    Код:
    $Text = preg_replace ( "/(\S{15})/si", "\\1 ", $Text );
    
     

Поделиться этой страницей