[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Переполнение в DIV
niko42
Здравствуйте, уважаемые. P.S. это моя первая верстка.
Попал в такую ситуацию, что при заполнение поля контента - сам контент выходит за пределы поля. Уточните, пожалуйста, как можно сдеалть так, чтоб контент автоматом переходил на другую строку и не выходил за рамки области контента.
overflow - здесь не поможет!

<!doctype html>
<html>
<head>
<meta
charset="UTF-8">
<link
href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div
id="container">
<div
id="head">
<div
id="menu">
</div>
</div>
<div
id="cont">
<div
id="container2">
<div
id="slaid"></div>
<div
id="content">
<div
class="content top">
</div>
<div
class="content page">
safsafsafsafsafsafsafsafsafsafsafsafsafsafsafsafsafsafsafsa
fsafsafsafsafsafsafsafsafsafsafsafsafsafsa fsafsafsafsafsafsafsafsafsafsafsafsafsafsa
fsafsafsafsafsafsafsafsafsafsafsafsafsafsaf
safsafsafsafsafs afsafsafsafsafsafsafsafsafsafsafsafsafs
afsafsafsafsafsafsafsafsafsafsafsafsafsaf
safsafsafsafsafsafsaf safsafsafsafsafsafsafsafsafsafsafsafs
afsafsafsafsafsafsafsafsafsafsafsafsafsafsaf
</div>
<div
class="content foot">
</div>
</div>
</div>
<div
id="status">
<div
class="status topCont"></div>
<div
class="status pageCont">
Статус
</div>
<div
class="status footCont"></div>
</div>
<div
id="statistika"></div>
<div
class="statistika topCont"></div>
<div
class="statistika pageCont"></div>
<div
class="statistika footCont"></div>
<div
id="temsForuma">
<div
class="temsForuma topCont"></div>
<div
class="temsForuma pageCont"></div>
<div
class="temsForuma footCont"></div></div>
<a
href="#"><div id="LKpng"></div></a>
</div>
<div
id="footer">

</div>
</div>
</body>
</html>


html body{
height: 100%;
background-color: #111;
margin: 0 auto;
}
#container{
margin: 0 auto;
min-width: 1044px;
max-width: 1044px;
min-height: 1000px;
}
#head{
height: 238px;
width: 1044px;
background: url(/images/page_topbg_r1_c3.jpg) no-repeat;
margin: 0 auto;
position: relative;
padding: 0 0 0 18px;
}
#menu{
background: url(/images/menu_teste2.png) no-repeat;
width: 1005px;
height: 62px;
position: absolute;
margin-top: 238px;
}
#cont{
min-height: 100%;
background: url(/images/page_topbg_r3_c3.jpg) repeat-y;
margin: 0 auto -145px;
padding: 61px 30px 150px;
overflow: hidden;
}
#status{
height: 100%;
margin-top: 7px;
}
#statistika, #temsForuma{
height: 100%;
margin-top: 15px;
}
.topCont {
background: url(/images/top-menu.jpg) no-repeat;
width: 210px;
height: 40px;
}
.pageCont {
background: url(/images/page-menu.jpg) repeat-y;
width: 210px;
min-height: 50px;
padding: 5px ;
color: #fff;
text-align:center;
}
.footCont {
background: url(/images/foot-menu.jpg) no-repeat;
width: 210px;
height: 16px;
}
#LKpng{
background: url(/images/staff.jpg) no-repeat;
width: 191px;
height: 115px;
margin-top: 25px;
}
#container2 {
float: right;
margin: 0;
}
#slaid{
background: url(/images/l2_banner.jpg) no-repeat;
width: 768px;
height: 248px;
margin-top: 10px;
}
#content{
height: 100%;
margin: 10px 4px 20px;
}
#content .top{
background: url(/images/content_header.jpg) no-repeat;
width: 760px;
height: 12px;
}
#content .page{
background: url(/images/asff.jpg);
max-width: 760px;
min-height: 700px;
color: #fff;
}
#content .foot{
background: url(/images/content_bottom.jpg) no-repeat;
width: 760px;
height: 12px;
}
#footer{
background: url(/images/page_bottombg.jpg) no-repeat;
height: 145px;
padding: 0 0 100px;
}




Спустя 1 час, 13 минут, 25 секунд (22.10.2011 - 20:04) redreem написал(а):
для .content .page допишите

white-space: pre-wrap;
white-space: -moz-pre-wrap; Mozilla
white-space: -o-pre-wrap; Opera
word-wrap: break-word; Internet Explorer 6+

Спустя 6 минут, 56 секунд (22.10.2011 - 20:11) niko42 написал(а):
Спасибо, Вам добрый человек. А еще такой вопросик - в каких случаях это используется? Или можно смело всегда данные параметры указывать в область контента ?

Спустя 2 минуты, 34 секунды (22.10.2011 - 20:14) redreem написал(а):
эта конструкция говорит браузеру принудительно переносить длинные слова. если нет специфичных типографических требований (например официальная шапка учреждений) - то можете везде пихать.

Спустя 4 минуты, 52 секунды (22.10.2011 - 20:19) niko42 написал(а):
Спасибо Вам еще раз. К сожалению, заработался и не обратил внимание, что у меня не текст - а тупо однострочное большое слово. Думал с кодом, какой-то косяк, в итоге прошелся пару раз почистил лишние и всеровно так же было.
Спасибо Вам еще раз за пощь.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.