Количество текста не увеличивает площадь DIVа

animegirl · February 15, 2012

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


<!DOCTYPE html>
<html>
	<head>
		<style>
@charset "UTF-8";

BODY {
margin:0px;
border:0px;
padding:0px;

overflow:hidden;

font-family:'Lucida Sans Unicode','Arial';/*''Arial','Lucida Sans','Lucida Grande','Verdana','Tahoma';*/
font-size:16px;

width:100%;
min-width:600px;
}

#main_mail {
margin:0px;
border:0px;
padding:0px;

width:100%;
min-width:600px;
height:100%;

position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
}

#chat_main_menu {
margin:0px;
border:0px;
padding:5px;

width:100%;
min-width:600px;
height:30px;

position:absolute;
top:0px;
left:0px;
right:0px;
bottom:auto;
}

.chat_main_field {
margin:0px;
border:0px;
padding:0px;

width:100%;
min-width:600px;
height:auto;

position:absolute;
left:0px;
top:30px;
right:0px;
bottom:0px;
}

.chat_show_from {
margin:0px;
border:0px;
padding:0px;

position:absolute;
top:7px;
height:25px;
bottom:auto;
left:7px;
width:auto;
right:7px;

background-color:blue;
}

.chat_show_time {
margin:0px;
border:0px;
padding:0px;

position:absolute;
top:auto;
height:25px;
bottom:7px;
left:7px;
width:auto;
right:7px;

background-color:green;
}

.chat_show_left_block {
margin:0px;
border:0px;
padding:0px;

width:200px;
height:70px;

position:absolute;
left:0px;
top:0px;
right:auto;
bottom:0px;
float:left;

background-color:red;
}

.chat_show_message {
margin:0px;
border:0px;
padding:0px;

position:absolute;
top:7px;
height:auto;
bottom:7px;
left:7px;
width:auto;
right:7px;

overflow:visible;

background-color:yellow;
}

.chat_show_message_readed {
margin:0px;
border:0px;
padding:0px;

position:absolute;
top:7px;
height:auto;
bottom:7px;
left:7px;
width:auto;
right:7px;

background-color:#d9e8ff;
}

.chat_show_message_unreaded {
margin:0px;
border:0px;
padding:0px;

position:absolute;
top:7px;
height:auto;
bottom:7px;
left:7px;
width:auto;
right:7px;

background-color:#345F9F;
}

.chat_show_right_block {
margin:0px;
border:0px;
padding:0px;

width:auto;
min-width:400px;
height:auto;
min-height:70px;

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:200px;

background-color:green;
}

.chat_show_message_line {
margin:0px;
border:0px;
padding:0px;

position:relative;
width:100%;
min-width:600px;
height:auto;
min-height:70px;

background-color:#894564;
}

.show_chat_inside {
margin:0px;
border:0px;
padding:0px;

width:100%;
min-width:600px;
height:auto;

position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;

background-color:#465166;
}
		</style>
	</head>
	<body onload="func_load_chatlist();">
		<div id="dynamic_data" style="display:none;"></div>
		<div id="main_mail">
			<div id="chat_inside" class="chat_main_field" style="display: block">
				<div id="showcid3" class="show_chat_inside">
					<div id="mid=354345" class="chat_show_message_line">
						<div class="chat_show_left_block">
							<div class="chat_show_from"></div>
							<div class="chat_show_time">
								<a title="06.01.70 01:55:45">01:55</a>
							</div>
						</div>
						<div class="chat_show_right_block">
							<div class="chat_show_message_unreaded">
								<div class="chat_show_message">?ber 100.000 Menschen demonstrieren in Deutschland gegen das ACTA-Abkommen

		In ganz Deutschland hatte die Piratenpartei als Teil eines breiten B?ndnisses zu Demonstrationen gegen das umstrittene ACTA Abkommen aufgerufen. Die Nachricht vom Vortag, dass die Bundesregierung die Unterzeichnung des ACTA-Abkommens vorerst verweigert, f?hrte die Demonstranten nicht in die Irre. In 60 deutschen und zahlreichen weiteren europ?ischen St?dten gingen sie auf die Stra?e: In M?nchen waren es 20.000, in Berlin und Stuttgart jeweils 10.000, in D?sseldorf 7.000, in Frankfurt am Main 6.000.</div>
							</div>
						</div>
					</div>
					<div id="mid=121329075128" class="chat_show_message_line">
						<div class="chat_show_left_block">
							<div class="chat_show_from"></div>
							<div class="chat_show_time">
								<a title="12.02.12 19:32:08">19:32</a>
							</div>
						</div>
						<div class="chat_show_right_block">
							<div class="chat_show_message_unreaded">
								<div class="chat_show_message">xxx</div>
							</div>
						</div>
					</div>
					<div id="mid=121329213183" class="chat_show_message_line">
						<div class="chat_show_left_block">
							<div class="chat_show_from">B</div>
							<div class="chat_show_time">
								<a title="13.02.09 23:31:35">23:31</a>
							</div>
						</div>
						<div class="chat_show_right_block">
							<div class="chat_show_message_unreaded">
								<div class="chat_show_message">netnetnet</div>
							</div>
						</div>
					</div>
					<div id="mid=121329138885" class="chat_show_message_line">
						<div class="chat_show_left_block">
							<div class="chat_show_from">A</div>
							<div class="chat_show_time">
								<a title="13.02.09 23:31:30">23:31</a>
							</div>
						</div>
						<div class="chat_show_right_block">
							<div class="chat_show_message_unreaded">
								<div class="chat_show_message">dadada</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Как видно из названий, это чат, данный пункт, это там где выдаются сообщения, надо, чтоб при большом сообщение его строка вертикально увеличивалась, до нужных размеров, третий день мучаюсь с позиционированием элементов, вроде всё уже выглядело, как хотелось бы, и тут проблема с растяжкой ((

lexxcode · February 15, 2012

ооой, как много букв. Вы лучше дайте ссылку, на страницу, а там и посмотрим

animegirl · February 15, 2012

Так она на моём компе, её онлайн нету :mellow:

lexxcode · February 15, 2012

У вас изрядный перебор с абсолютным позиционированием.

Из-за того, что применяются top, left, bottom, right одновременно у вас задается размер элемента, естественно он становится не тягучим.

Каждое сообщение это линия, блок, в котором слева ник и дата, справа тело сообщения.

И так, для начала создадим контейнер, для всего этого добра, пускай, это будет .wrapChat

css


@charset "utf-8";
html, body {
	height:100%;
}
body {
	background:#fff;
	color:#000;
	margin:0;
}
body {
	font: 0.75em/1.5em Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
.wrapChat {
	background:#465166;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

html


<div class="wrapChat">

</div>

Далее создаем блок(и) для сообщений внутри .wrapChat

css


.chatBox {
    margin:0 0 10px;
    overflow:hidden;
}

html


<div class="wrapChat">
	<div class="chatBox"></div>
	<div class="chatBox"></div>
	<div class="chatBox"></div>
	<div class="chatBox"></div>
</div>

Теперь внутри .chatBox создадим структуру для левой колонки и блока сообщения

css


.chatBox-side {
    width:200px;
    float:left;
}
.chatBox-base {
    overflow:hidden;
}

html


<div class="chatBox">
	<div class="chatBox-side"></div>
	<div class="chatBox-base"></div>
</div>

собственно почти все, теперь добавим, блоки автора и даты в левую колонку (chatBox-side)

css


.chatBox-autor {
    display:block;
}
.chatBox-time {
    display:block;
}

html


<div class="chatBox-side">
	<a href="#" class="chatBox-autor">Pupkin</a>
	<time class="chatBox-time" datetime="2004-07-24T20:09:18">20:09</time>
</div>

Теперь не много марафета, т.к. я просто показываю пример, я от стиля отошел.

итог по ссылке

Это только один из возможных вариантов, так на вскидку. Знающие, сейчас могут начать кричать, что много всего. Да можно сократить, но я оставил так, чтоб было понятней.

Sign In

Количество текста не увеличивает площадь DIVа

Question

animegirl

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

lexxcode

Link to comment

Share on other sites

animegirl

Link to comment

Share on other sites

lexxcode

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information