Помогите решить простую задачу

veromi · October 30, 2011

Нужно сделать простенькую табличку с несколькими ячейками. Хотелось бы его сделать на дивах..

Какая-то хрень выходит, причем в разных браузерах выглядит по разному... Подскажите где косяк?



<style>
/* Задаю границы по ширине, центральное выравнивание, бордюр */
.otziv{width:750px; margin: 0 auto;  padding:0;  border: 1px solid #feb735; 
background-color:#222;}

/* Левая верхняя ячейка */
.author_otziv{width: 599px; height:25px ;position: relative; float: left; border-bottom:1px solid #feb735;}
/* Правая верхняя ячейка */
.date_otziv{width:150px;height:25px ; position: relative; float: right; border-bottom:1px solid #feb735; border-left:1px solid #feb735; }
/* Правая нижняя ячейка*/
.id_otziv{width:150px;height:25px ; position: relative; float: right; border-top:1px solid #feb735; border-left:1px solid #feb735;}


</style>


<body>




<div class='otziv'>
<div class='author_otziv'><h3>Автор</h3>
</div>
<div class='date_otziv'><p>Дата отзыва</p>
</div>
<div id='text_otziv'>
<p>Отзыв бла бла бла</p>
</div>

<div class='id_otziv'>
<p>ID</p>
</div>
</div>












</body>

psywalker · October 30, 2011

А ты покажи на рисунке, что нужно сделать?

И, надеюсь, доктайп стоит?

Покажи тестовую страницу.

veromi · October 30, 2011

Моя ссылкаВот ссылка...

Причем в хроме и в ИЕ табличка выглядит поразному..

Вот что я хочу сделать.

psywalker · October 30, 2011

Оно?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	.wrap { border: 1px solid #000; overflow:hidden; width: 500px; height: 300px; position: relative;}
		.wrap .right { float: right; width: 100px; height: 30px; background: red;}
		.wrap .left { overflow: hidden; background: yellow; height: 30px;}
		.wrap .bottom { position: absolute; width: 100px; height: 50px; background: blue; bottom: 0; right: 0;}

</style>
</head>

<body>
	<div class="wrap">
		<div class="right"></div>
		<div class="left"></div>
		<div class="bottom"></div>
	</div>
</body>
</html>

veromi · October 30, 2011

Все так..

Только основной контейнер дожен быть не фиксированным, а резиновым по вертикали.... Должен растягиваться вниз в зависимости от объема текста..

psywalker · October 30, 2011

Все так..
Только основной контейнер дожен быть не фиксированным, а резиновым по вертикали.... Должен растягиваться вниз в зависимости от объема текста..

А можно я не буду за тебя убирать высоту с контейнера? :rolleyes:

veromi · October 30, 2011

Огромное приогромное Спасибо!

veromi · October 30, 2011

Все хорошо.. но как теперь отцентровать текст внутри этой таблице по вертикали?

Особенно ужасно выглядит в хроме.. Моя ссылка

ceil100 · October 31, 2011

у H3 отступы убери

Edited October 31, 2011 by ceil100

veromi · October 31, 2011

у H3 отступы убери

У h3 нет отступов..

body{margin:0; padding:0;}

Edited October 31, 2011 by veromi

ceil100 · October 31, 2011

у заголовков по умолчанию есть отступы сверху и снизу, а то что ты обнулил, body еще не значит, что снял отступы и с заголовков!

.otziv_left h3 {margin:0;}

если нужно только в таблице

зачем по твоему делают такие длинные файлы reset.css?

veromi · October 31, 2011

пасиб!

Sign In

Помогите решить простую задачу

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information