X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Внимание, слои!, Дизайн сайта
pix87
pix87
Topic Starter сообщение 10.6.2012, 17:47; Ответить: pix87
Сообщение #1


Участник
***

Группа: User
Сообщений: 238
Регистрация: 19.12.2009
Поблагодарили: 15 раз
Репутация:   4  


Хотелось бы услышать мнение бывалых верстальщиков. Вобщем, на главной странице должны определенным образом выводиться анонсы статей. Определенным с точки зрения дизайна. Я сделал с горем пополам, выводиться как надо, но подозреваю что сильно намудрил с кодо, есть некоторые артефакты.

Так должно выводиться в итоге, так и выводиться, но есть проблемы -
Прикрепленное изображение


При загрузке страницы все это выглядит вот так -
Прикрепленное изображение


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

Сама структура анонса выглядит так -
Прикрепленное изображение


Смысл такой. Титл (н2)- должен идти поверх всего и если название статьи длинное должен залазить на картинку.
по сути все сделано при помощи 2х div и атрибута z-index.
Но во время подгрузки почему то браузер подгружает не частями все, сначала как самые легкие - h2, а потом к ним сам анонс и картинки.
Ниже приведу код, может можно как то сделать все это проще?
P.S. На картинки наложен эффект полупрозрачности, при наведении становиться нормалной прозрачности

Вывод

div id="anyclass" >

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&amp;h=140&amp;w=280&amp;q=60&amp;zc=1"  class="img-left" /></a>
</div>
<div class="woter" >
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

    
     <span><?php the_content_limit("$secret_word", ""); ?> </span>
    </div>
    <div style="clear:both;"></div>


Css

.woter{

height:142px;

width:650px;
position: absolute;

border: 1px solid #203040;
padding: 0px 0px 0 0;

}
*html .woter { /* хак для ie6 */
background: none; /* убираем обычный background */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/11.png'); /* png с прозрачностью для ие6 */
}

.woter h2 a{
padding: 0px;
border: 1px solid #203040;
z-index: 1000;
position    : absolute;
background        : rgb(255, 255, 255); /* на случай, если следующая строка не сработает */
background        : rgba(255, 255, 255, 1);    
}

.woter h2 a:hover{
z-index: 1000;
}

.woter span p{
width: 370px;
margin:0px 10px 0px 10px;
padding:30px 5px 5px 0px;
font:  11px Helvetica, Sans-Serif;
color:#000;
}
.grad1 {
z-index: 800;
position    : absolute;
border: 0px solid #203040;
background: url(images/11.png) top right repeat-y;
height:148px;
width:44px;
padding:0px 0px 0px 390px;
}


#anyclass A IMG{
z-index: 700;
border: 0px solid #203040;
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=60);}

#anyclass a:hover img {
z-index: 700;
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);background:none;}

#anyclass a img {
z-index: 700;
OPACITY:0.3px;
-MOZ-OPACITY:0.3px;
FILTER:alpha(opacity=60)
}

#anyclass a:hover img {
z-index: 700;
OPACITY:1px;
-MOZ-OPACITY:1px;
FILTER:alpha(opacity=100);
BACKGROUND:none
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pix87
pix87
Topic Starter сообщение 11.6.2012, 19:31; Ответить: pix87
Сообщение #2


Участник
***

Группа: User
Сообщений: 238
Регистрация: 19.12.2009
Поблагодарили: 15 раз
Репутация:   4  


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

Прикрепленное изображение


Сообщение отредактировал pix87 - 11.6.2012, 19:33
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nemovalex
Nemovalex
сообщение 11.6.2012, 19:43; Ответить: Nemovalex
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 480
Регистрация: 18.4.2012
Из: Москва
Поблагодарили: 120 раз
Репутация:   24  


Могу попробовать помочь, все зависит от Вашей CMS.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pix87
pix87
Topic Starter сообщение 11.6.2012, 19:48; Ответить: pix87
Сообщение #4


Участник
***

Группа: User
Сообщений: 238
Регистрация: 19.12.2009
Поблагодарили: 15 раз
Репутация:   4  


(Nemovalex @ 11.6.2012, 18:43) *
Могу попробовать помочь, все зависит от Вашей CMS.


Wordpress
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Max_Q
Max_Q
сообщение 11.6.2012, 20:52; Ответить: Max_Q
Сообщение #5


Участник
***

Группа: User
Сообщений: 118
Регистрация: 13.11.2011
Поблагодарили: 46 раз
Репутация:   13  


Если я правильно понял - то:
у .woter h2 a уберите свойсто background
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pix87
pix87
Topic Starter сообщение 11.6.2012, 20:58; Ответить: pix87
Сообщение #6


Участник
***

Группа: User
Сообщений: 238
Регистрация: 19.12.2009
Поблагодарили: 15 раз
Репутация:   4  


(Max_Q @ 11.6.2012, 19:52) *
Если я правильно понял - то:
у .woter h2 a уберите свойсто background


Зачем убирать, она добавляет белый фон с регулируемой прозрачностью если титл длинный и залазит на картинку
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Внимание: рисую всё (верстаю)
5 Anntoly 1094 4.11.2016, 14:13
автор: grumdas
Открытая тема (нет новых ответов) На что следует обращать внимание при покупке сайта?
новый сайт
13 Prix 2468 3.8.2016, 9:21
автор: Telnor
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВнимание PSD макет по низкой цене!
Psd макет по низкой цене
0 LockeR 1121 23.2.2014, 16:13
автор: LockeR
Горячая тема (нет новых ответов) Внимание, продавцам контента
Важно!
68 jack 7708 6.7.2013, 0:05
автор: jack
Открытая тема (нет новых ответов) Внимание! 69 сайтов (авто\строительство и другие) в зоне .ru в индекс Google с доходом + 19 доменов бонусом!
1 zuziken 1257 22.2.2012, 17:05
автор: zuziken


 



RSS Текстовая версия Сейчас: 18.12.2017, 20:51
Дизайн