ФорумРазработкаКлиентская сторонаВерстка и оформление → Текст выходит за пределы Div'a

Текст выходит за пределы Div'a

  • Женя

    Сообщения: 23 Репутация: N Группа: Кто попало

    Spritz 11 мая 2012 г. 12:02

    Здравствуйте, я надеюсь вы мне поможете советом. Ситуация следующая: Когда я меняю или добавляю описание своих товаров через БД Mysql, текст начинает выходить за границы дива, (на скриншоте привожу все размеры и Div'ы)





    [
    Вот главная страница сайта:
    <?php
    include("./includes/mysql.php");
    include("./includes/config.php");
    include("./includes/functions.php");
    //include("./includes/head.php");
    //include("./includes/catalog.php");

    ?>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Интернет магазин спортивного питания Sportfood</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
    <meta name="description" content=" " />
    <link href="http://localhost/sportfood/css/default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div id="header">
    <h1><a href="#">God of Gates</a></h1>
    <h2><a href="http://web-mastery.info/">Free CSS Templates</a></h2>
    </div>
    <div id="content">
    <div id="colOne">
    <?php
    include("zagol.php");
    include("test.php");
    ?>
    </div>


    <div id="colTwo">
    <ul>
    <li>
    <form method="post" action="search.php">
    <div>
    Ищем по:<br>
    <select name="searchtype" size=3>
    <option value="name" selected>Имени
    <option value="text" selected>Описанию
    <option value="price" selected>Цене
    </select> <br>
    <input type="text" name="searchterm" size="20" />
    <input type="submit" value="Поиск" />
    <?php
    mysql_query('SET NAMES cp1251');
    ?>
    </div>
    </form>
    </li>
    <li>
    <h2>Меню</h2>
    <ul>
    <li><a href="http://localhost/sportfood/">Главная</a></li>
    <li><a href="http://localhost/sportfood/includes/pokypka.php">Спортивное питание</a></li>
    <li><a href="http://localhost/sportfood/includes/opisanie.php">Описание товаров</a></li>
    <li><a href="http://localhost/sportfood/includes/skidki.php">Акции</a></li>
    <li><a href="http://localhost/sportfood/includes/company.php">Контакты</a></li>
    </ul>
    </li>
    <li>
    <h2>Каталог товаров</h2>
    <ul>
    <li>
    <?php include("./includes/meny.php");?>
    </li>
    </ul>
    </li>


    <li>
    <h2>Categories</h2>
    <ul>
    <li><a href="#">Quisque vestibulum</a> (23)</li>
    <li><a href="#">Sed a nisl a lacus</a> (78)</li>
    <li><a href="#">Quisque sagittis</a> (11)</li>
    <li><a href="#">Etiam volutpat</a> (34)</li>
    <li><a href="#">In aliquet hendrerit</a> (65)</li>
    <li><a href="#">Suspendisse iaculis</a> (35)</li>
    <li><a href="#">Nam vel risus at</a> (22)</li>
    <li><a href="#">Praesent sit amet</a> (54)</li>
    </ul>
    </li>
    <li>
    <h2>Blogroll</h2>
    <ul>
    <li><a href="#">WebGod of Gates</a></li>
    <li><a href="#">AnotherFriendlySite.net</a></li>
    <li><a href="#">CoolSite.com</a></li>
    <li><a href="#">MyBestFriend.com</a></li>
    </ul>
    </li>
    <li>
    <h2>Meta</h2>
    <ul>
    <li><a rel="nofollow" target="_blank" href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div style="clear: both;">&nbsp;</div>
    </div>
    <div id="footer">
    <p>Copyright &copy; 2007 God of Gates. Designed by <a rel="nofollow" target="_blank" href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
    </div>
    </body>
    </html>


    CSS:
    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */

    body {
    margin: 0px 0;
    padding: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-image: url(http://localhost/sportfood/img/fon.png);

    }


    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    }

    p, ul, ol, blockquote {
    font-size: small;
    line-height: 160%;
    }

    a {
    color: #67823B;
    }

    a:hover {
    text-decoration: none;
    }

    /* Header */

    #header {
    width: 740px;
    height: 220px;
    margin: 0 auto;
    background: url(http://localhost/sportfood/img/logo.jpg) no-repeat center center;
    border: 5px solid gray;
    }

    #header * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font: bold 11px Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    }

    #header h1 {
    float: left;
    padding: 120px 0 0 10px;
    }

    #header h2 {
    float: right;
    padding: 120px 10px 0 0;
    }

    /* Content */

    #content {
    width: 740px;
    margin: 0 auto;
    background: url(http://localhost/sportfood/img/img2.gif);
    border: 5px solid gray;

    }

    #colOne {
    float: left;
    width: 449px;
    padding: 20px;
    }




    #colTwo {
    float: right;
    width: 209px;
    padding: 20px;
    }

    /* Content > ColOne */

    /* Content > ColTwo */

    #colTwo h2 {
    font-size: 25px;
    color: yellow;
    border:3px solid blue;
    background-color:black;

    }

    #colTwo ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #colTwo li {
    margin-bottom: 1em;
    color: #FFFFFF;
    }

    #colTwo li li {
    margin-bottom: 0;
    padding-left: 1em;
    }

    #colTwo a {
    color: blue;
    font-size: 15px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);

    }





    /* Footer */

    #footer {
    width: 740px;
    margin: 0 auto;
    background: #000000;
    border: 5px solid black;
    border-bottom: 20px solid black;
    }

    #footer * {
    color: #FFFFFF;
    }

    #footer p {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    font-size: x-small;
    }



    .welcome{
    font-family:Courier;
    font-size:170%;
    color:orange;
    letter-spacing:-.03em;
    font-weight:bold;
    //background-color:yellow;
    background: rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
    box-shadow: 0 40px 10px rgba(0, 0, 0, .4);
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);

    }


    .content{
    font-family:Times New Roman;
    font-weight:normal ;
    font-size: 19px;
    color: black;
    text-align: justify;
    //text-align: center;

    }


    .tov_name{
    font-family:Times New Roman;
    font-weight:normal ;
    font-size: 19px;
    color: blue;
    //text-align: justify;
    //background: rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .1);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .1);
    box-shadow: 0 40px 10px rgba(0, 0, 0, .1);
    }


    .tov_cena{
    font-family:Times New Roman;
    color: red;
    text-align: justify;
    //border: 1px solid red;
    width: 120px;

    }

    .tov_opisanie{
    //font-family:Times New Roman;
    color: black;
    //text-align: justify;
    max-width: 400px;
    //font-size: 15px;
    }



    Вывод описания с базы выглядит вот так:



    echo '
    <p> <div class="tov_opisanie" >'.$products['text'].' </div></p> <br>'; // Строчка вывода описания
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 11 мая 2012 г. 12:06, спустя 3 минуты 57 секунд

    overflow:hidden;
    Сапожник без сапог
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 11 мая 2012 г. 13:09, спустя 1 час 2 минуты 34 секунды

    word-wrap: break-word;
    Высокоуровневое абстрактное говно
  • AlexB

    Сообщения: 4306 Репутация: N Группа: в ухо

    Spritz 11 мая 2012 г. 15:22, спустя 2 часа 13 минут 36 секунд


    word-wrap: break-word;
    Чего только нового не узнаешь. А оно нормально поддерживается браузерами?
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 11 мая 2012 г. 15:24, спустя 2 минуты 17 секунд

    браузерами да, цсс нет))))
    http://htmlbook.ru/css/word-wrap
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 11 мая 2012 г. 15:37, спустя 12 минут 29 секунд

    в ие7+ и бравзерах пашет
    Высокоуровневое абстрактное говно
  • Женя

    Сообщения: 23 Репутация: N Группа: Кто попало

    Spritz 11 мая 2012 г. 17:11, спустя 1 час 34 минуты 29 секунд


    word-wrap: break-word;

    Опа, спасибо, теперь нормально переносит текст! Невероятно выручил)
    ЗЫ: А как тут плюсануть в репутацию? Если таково возможно….
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 11 мая 2012 г. 17:13, спустя 1 минуту 59 секунд

    Женя, тебе нужно 50 сообщений
    Спустя 34 сек.
    хочешь, я ему минусану? :D
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 11 мая 2012 г. 17:27, спустя 13 минут 59 секунд

    хочешь, я ему минусану? :D

    нехуй)) я тут один такой на пхп-форуме набил 52 не имея знаний в пхп))
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 11 мая 2012 г. 17:31, спустя 3 минуты 22 секунды

    это не форум программистов, это форум наркоманов
    Спустя 54 сек.
    а, наоборот
    Спустя 9 сек.
    :D
  • Женя

    Сообщения: 23 Репутация: N Группа: Кто попало

    Spritz 11 мая 2012 г. 18:27, спустя 56 минут 37 секунд


    Женя, тебе нужно 50 сообщений
    Спустя 34 сек.
    хочешь, я ему минусану? :D


    ахах, я наберу и плюсану, чесслово))))

Пожалуйста, авторизуйтесь, чтобы написать комментарий!