Оформление новости

Victor Ananiev · July 25, 2008

Вот что намудрил. Нормально, или надо что то менять?

Edited August 26, 2008 by Vindex10

Иван Шумов · July 25, 2008

красный раздражает, черный угнетает - в общем только в сообщества вампиров, убийц и т.п.

Victor Ananiev · July 26, 2008

Ваши предложения, желтый и оранжевый?

Я не согласен по поводу красный раздражает, это мне кажется бордовый, ну или коричневый, на худой конец, но никак не красный) А черный сочетается с коричневым.

Victor Ananiev · August 26, 2008

Вот, постарался сделать не красным и не черным)

Собсно сайт:

и блок:

Edited August 26, 2008 by Vindex10

vvsh · August 26, 2008

Новое гораздо красивее старого.

Victor Ananiev · August 26, 2008

Ну это я понял, а менять не надо ничего?

Вo что выщло на штмл(первый раз была картинка))

Edited August 26, 2008 by Vindex10

Dimitry Wolotko · August 26, 2008

Первый вариант - глаза сломаешь.

Второй вариант - я очень быстро читаю - задолбаюсь прокручивать.

Джин · August 26, 2008

мне кажется шрифт Times New Roman не очень подходит для веб. Попробуй поменять на Arial или Tahoma. ну и сделай так чтоб без скроллинга было.

Dimitry Wolotko · August 26, 2008

Verdana - самое оно!

Victor Ananiev · August 27, 2008

Со шрифтами ладно, а скролл в крайних случаях, это краткое описание, там не будет таких больших статей, скролл на картинке это что бы показать как будет выглядеть при больших текстах.

Victor Ananiev · August 27, 2008

Вот индекс, поменял шрифты(Вердана не очень понравился, поставил Arial), и добавил примерное оформление)

При наводе на эскиз(справа их 9 штук) сверху где заголовок блока, будет появлятся название работы.

Edited August 27, 2008 by Vindex10

Dimitry Wolotko · August 27, 2008

Углы плохо сработаны, имхо.

Плюс - кнопка "далее..." - это зло

Victor Ananiev · August 27, 2008

Что означает плохо сработаны? В каком месте?

А что сделать с кнопкой далее?

UPD:

Нашел где плохо с углами, поправить не очень вышло))

Кнопку далее убрал, вместо нее нажатие на весь блок в любую точку с курсором поинтер. При наводе на блок подчеркивается описание. Вот скрины:

onmouseover

onmouseout

Edited August 27, 2008 by Vindex10

Vlad · August 28, 2008

Уголки слишком большой радиус имеют, сложно вписать их будет куда-либо. Выравнивание текста по центру - неудачная идея, это же не заголовок.

Dimitry Wolotko · August 28, 2008

А слабо сделать не валидно, зато без JS?

Victor Ananiev · August 28, 2008

это без JS просто показал что при наводе и при отводе такими подписями, а так там все на CSS.))) Уголки делались фотошопом, yew там в фигурках стандартных есть такой квадрат, с уголками круглыми)

вот полный код:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
body
{
margin:10px;
font-family: Arial, Verdana, Tahoma, Times New Roman;
}
body A
{
text-decoration:none;
}
.block
{
background-color:#eee;
height:189px;
width:50%;
color:#999;
}
.block IMG
{
display:block;
}
.block_leftimg
{
background-color:#fff;
height:189px;
}
.block_leftimg IMG
{
height:100%;
}
.block_center
{
height:100%;
vertical-align:top;
}
.middle_block
{
height:189px;
width:100%;
border-top:1px solid #777;
border-bottom:1px solid #777;
}
.block_title
{
font-weight:bold;
text-align:center;
font-size:18px;
}
.block_date
{
text-align:right;
}
.block_preview
{
width:35%;
}
.block_preview IMG
{
height:90%;
_height:150px;
width:90%;
_width:150px;
margin:0 auto;
background-color:#999;
padding:3px;
}
.block_desc
{
width:65%;
}
.block_desc DIV
{
width:100%;
height:100px;
overflow:auto;
text-align:center;
font-size:14px;
}
.block_rightimg
{
background-color:#fff;
}
.block_rightimg IMG
{
height:100%;
}
.www:hover
{
display:block;
cursor:pointer;
}
.www:hover .block_desc
{
text-decoration:underline;
}
</style>
</head>
<body>
<a class="www" href="#">
<table border="0" height="189px" cellspacing="0" cellpadding="0" class="block">
<tr>
 <td class="block_leftimg"><img src="/img/newsblock/left.gif" /></td>
 <td class="block_center">
	 <table border="0" cellspacing="0" cellpadding="0" class="middle_block">
		 <tr>
			 <td class="block_title">Lorem Ipsum Dol...</td>
				<td class="block_date">14.02.2008 12:30</td>
			</tr>
			<tr valign="middle">
			 <td class="block_preview"><img src="/img/avatar15.jpg" /></td>
				<td class="block_desc"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div></td>
			</tr>
		</table>
	</td>
	<td class="block_rightimg"><img src="/img/newsblock/right.gif" /></td>
</tr>
</table>
</a>
</body>
</html>

РАботает в Опере/ Осел при наводе картинку в стандартные размеры увеличает!)) Как с этим боротся?

Кстати, выравнивание поставил justify.

UPD:

Нашел как закруглять, сделал 10 px радиус) Сейчас переверстаю хак на expression

Edited August 28, 2008 by Vindex10

Victor Ananiev · August 30, 2008

Вот переделал на блоках, без резины. Не знаю нужна ли резина в этом случае...

вот скрин:

вот код:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
*
{
margin:0;
padding:0;
}
body
{
border:0;
font-family:Arial, Verdana, Tahoma, Times New Roman;
margin:20px;
color:#999;
}
html
{
border:0;
}
.block
{
height:189px;
width:500px;
background-color:#eee;
cursor:pointer;
text-decoration:none;
}
.linker_block
{
color:#999;
border:0;
}
.block_left
{
text-align:left;
float:left;
width:11px;
height:189px;
background-color:white;
}
.block_left IMG, .block_right IMG
{
border:0;
}
.block_center
{
border-top:1px solid #999;
border-bottom:1px solid #999;
float:left;
width:478px;
height:187px;
margin:0 auto;
}
.block_center_title
{
text-align:center;
float:left;
width:170px;
height:22px;
font-size:18px;
font-weight:bold;
}
.block_center_date
{
float:right;
width:307px;
height:22px;
text-align:right;
}
.block_center_prev
{
float:left;
height:165px;
width:170px;
text-align:center;
}
.block_center_prev IMG
{
height:85%;
width:90%;
background-color:#999;
padding:3px;
}
.block_center_desc
{
float:right;
height:165px;
width:307px;
font-size:16px;
}
.block_center_desc_text
{
width:300px;
text-align:justify;
margin:0 auto;
overflow:auto;
}
.linker_block:hover .block_center_desc_text
{
text-decoration:underline;
}
.block_right
{
float:right;
text-align:left;
height:189px;
width:11px;
background-color:white;
}
</style>
</head>
<body>
<a class="linker_block" href="#">
<div class="block">
 <div class="block_left"><img src="/img/newsblock/left.gif" /></div>
	<div class="block_center">
	 <div class="block_center_title">Lorem ipsum dol...</div>
		<div class="block_center_date">14.02.2009 12:32</div>
		<div class="block_center_prev"><img src="/img/avatar15.jpg" /></div>
		<div class="block_center_desc"><div class="block_center_desc_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor. Quisque adipiscing. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div></div>
	</div>
	<div class="block_right" align="left"><img src="/img/newsblock/right.gif" /></div>
</div>
</a>
</body>
</html>

Edited August 30, 2008 by Vindex10

Victor Ananiev · August 30, 2008

Если все таки нужна резина, вот резиновый блок, для ИЕ, абсолют и через хак.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style>
body
{
margin:20px;
padding:0;
font-family:Arial, Verdana, Tahoma, "Times New Roman";
}
.link_block
{
text-decoration:none;
color:#999;
}
.block
{
height:189px;
width:50%;
color:#999;
min-width:300px;
_width:400px;
cursor:pointer;
}
.block_left
{
width:11px;
height:100%;
float:left;
}
.block_left IMG, .block_right IMG
{
border:0;
}
.block_center
{
width:80%;
float:left;
background-color:#eee;
border-top:1px solid #999;
border-bottom:1px solid #999;
}
.block_center_top
{
height:15px;
margin-bottom:3px;
}
.block_center_top_left
{
width:30%;
height:100%;
float:left;
text-align:center;
font-size:14px;
font-weight:bold;
}
.block_center_top_right
{
text-align:right;
width:70%;
height:100%;
float:left;
}
.block_center_bottom
{
height:169px;
_height:152px;
}
.block_center_bottom_left
{
height:100%;
width:30%;
float:left;
}
.block_center_bottom_left IMG
{
height:75%;
_height:60%;
width:90%;
margin:0 auto;
background-color:#999;
padding:4px;
}
.block_center_bottom_right
{
height:100%;
width:70%;
float:left;
}
.block_center_bottom_right_text
{
width:90%;
margin:0 auto;
height:100%;
text-align:justify;
font-size:12px;
overflow:auto;
}
.link_block:hover .block_center_bottom_right_text
{
text-decoration:underline;
}
.block_right
{
float:left;
width:11px;
height:100%;
}
</style>
</head>
<body>
<a class="link_block" href="#">
<div class="block">
 <div class="block_left"><img src="/img/newsblock/left.gif" /></div>
	<div class="block_center">
	 <div class="block_center_top">
		 <div class="block_center_top_left">Lorem Ipsum Dol...</div>
			<div class="block_center_top_right">12.03.2009 14:30</div>
		</div>
		<div class="block_center_bottom">
		 <div class="block_center_bottom_left"><img src="/img/avatar15.jpg" /></div>
			<div class="block_center_bottom_right"><div class="block_center_bottom_right_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor. Quisque adipiscing. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div></div>
		</div>
	</div>
	<div class="block_right"><img src="/img/newsblock/right.gif" /></div>
</div>
</a>
</body>
</html>

klierik · August 30, 2008

каке-то оно все бледное... трудночитаемое...

давай те как-то более класически...

создайте спеку... какие пункты меню буду на сайте...

разбейте на области... создайте элементарную решетку помещения данных.

а потом уже создавайте графику для блоков.

советую сходить на templatemonster.com и там черпать идеи для своих блоков

Станислав Петрович · September 25, 2008

Вот что намудрил. Нормально, или надо что то менять?

Приветствую. Надеюсь я не опоздал. Если Вы присмотритесь к тому, куда Вас "притащили", то увидите, что перед глазами имеется ничем не примечательный, почти стандартный блок текста с фото, в рамке (разве что с углами). Ваш первый вариант был хорош. Ключевой проблемой оного считаю:

1. Черный бордер вокруг фото

2. Шрифт, цвет шрифта, размер шрифта

3. Расположение фото и текста относительно друг друга

В зависимости от того, где это будет располагаться могу выразить предположение, что закругленность углов или web 2.0 стиль фоновых картинок не повредит.

С уважением, Станислав Петрович

Victor Ananiev · September 26, 2008

)) спасибо) но я создание этого сайта прекратил(временно), пока не придумаю что на него выкладывать)))

Sign In

Оформление новости

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

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

Обсуждения

Important Information