Jump to content
  • 0

Ограничение DIV

Ururu

Asked by Ururu,

 Share

Question

15 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
Как ограничить слои?

тоесть что бы текст не вылезал и не обрезался, а переносился на новую строку. Размер слоя неизвестен.

Вы уже не первый раз задаете вопросы на этом форуме, и каждый раз у вас просят одно и то же. Где код?

Link to comment
Share on other sites
  • 0
Ururu Explorer

Ururu

Posted
  • Author
Posted (edited)

У меня не просили код, но вот он:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<title>index</title>
	<link rel="icon" href="img/favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="style/global.css"></head>
	<body>
	<div id="header">
	</div>

	<div id="sub-section">
		<div id="time">
		</div>
	</div>

	<div id="main">
		<div id="leftcol">
		</div>
		<div id="rightcol">
		</div>
		<div id="content">
Эта напись выходит за границы слоя
		</div>
	</div>
	<div id="footer">
		<div id="copyright">
		</div>
		<div id="count" align="right">
		</div>
	</div>
</body>
</html>

* {
	padding: 0;
	margin: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
}
#header {
	background-color: #8B7D6B; /* Цвет фона Bisque4	139 125 107 #8B7D6B */
	height: 50px; /* Высота блока */
	width: 100%; /* Ширина блока */
	color: #FFFFFF; /* Цвет текста White 255 255 255 #FFFFFF */
	text-align: center;
}
#sub-section {
	background-color: #CDAF95; /* Цвет фона PeachPuff3 205 175 149 #CDAF95 */
	height: 30px; /* Высота блока */
	width: 100%; /* Ширина блока */
}
#time {
	background-color: #CDAF95; /* Цвет фона PeachPuff3 205 175 149 #CDAF95 */
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	margin: 0; /* Отступ*/
	height: 30px; /* Высота слоя */
	text-align: center;
}
#main {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	width: 100%; /* Ширина блока */
	min-height: 489px; /* Минимальная высота */
}
#leftcol {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	margin: 5px 0px 0px 5px; /* Отступ*/
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	min-height: 480px; /* Минимальная высота */
	text-align: center;
}
#content {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	margin: 0 212px; /* Отступ*/
	min-height: 480px; /* Минимальная высота */
}
#rightcol {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #458B00; /* Цвет текста Chartreuse4 69 139 0 #458B00 */
	margin: 5px 5px 0px 0px; /* Отступ*/
	width: 200px; /* Ширина слоя */
	float: right; /* Обтекание по левому краю */
	min-height: 480px; /* Минимальная высота */
	text-align: center;
}
#footer {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	float: left; /* Обтекание по правому краю */
	height: 31px; /* Высота блока */
	width: 100%; /* Ширина блока */
}
#copyright {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	height: 31px; /* Высота */
	text-align: center;
}
#count {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	float: right; /* Обтекание по левому краю */
	height: 31px; /* Высота */
	margin-left: 210px; /* Отступ*/
}

Edited by Ururu
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted (edited)

Можно попробовать вот так:

{

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, начиная с 1999 года */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

не пробовал сам, но по идее, большинство браузеров должны понять

Edited by Justnewone
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
<br>, <font>, <nobr>, <center> - гавно

Отличная подпись =)

Что <font> говно это понятно, а вот <center> очень часто выручал, не всегда <align> может так помочь. И почему с <br> так плохо? Есть лучшие аналоги?

<div>Line 1</div>

<div>Line 2</div>

А BR плох потому, что не создает контейнера.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Отличная подпись =)

По поводу BR уже s0rr0w высказался. Я же добавлю от себя, что в большинстве случаев BR используется не по назначению (разрыв строки в абзаце) а черти как, списки делают, отступы между абзацами, даже затычки с клеар:ботх в флоат-контейнерах. Смотрица конечно точно так же, но по моему мнению, это неверно по сути.

Вместо центра давным давно уже используют выравнивание с помощью CSS.

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
Posted

видимо, раз шла речь о негативности отсутствия контейнеров, то предполагается решать проблему переноса через CSS?

white-space:nowrap?

Но тогда как быть с маленькими блоками текста? Например в номере телефона 123-45-67 - только в nobr обернуть

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
видимо, раз шла речь о негативности отсутствия контейнеров, то предполагается решать проблему переноса через CSS?

white-space:nowrap?

Но тогда как быть с маленькими блоками текста? Например в номере телефона 123-45-67 - только в nobr обернуть

CSS

.nobr{

white-space:nowrap

}

<span class="nobr">123-45-67</span>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept