Помощь с дизайном

ven000mus · October 28, 2011

http://meeta.ucoz.ru/666.png - это скрин сайта, в тэг не закрыл, так как разширение слишком большое.

Всем доброго времени суток. Столкнулся с одной проблемой в IE9, поставил меню на jquery & css, во всех браузерах работает нормально, стоит там где нужно, только в ИЕ9 проблема, что видно на рисунке.

Вот CSS код:

ul#navigation {
 position: fixed;
 margin: 0px;
 padding: 0px;
 top: 266px;
 left: -115px;
 list-style: none;
 z-index:9999;
}
ul#navigation li {
 width: 100px;
}
ul#navigation li a {
 display: block;
 margin-left: -2px;
 width: 250px;
 height: 50px;
 background-color:#ff3c00;
 background-repeat:no-repeat;
 background-position:center right;
 border:2px dotted #faf0ad;
 -moz-border-radius:0px 10px 10px 0px;
 -webkit-border-bottom-right-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -khtml-border-bottom-right-radius: 10px;
 -khtml-border-top-right-radius: 10px;
 -moz-box-shadow: 0px 50px 20px #000;
 -webkit-box-shadow: 0px 50px 20px #000;
 opacity: 0.2;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover{
 background-color:#faf0ad;
 border:2px dotted #ff3c00;
 padding-right: 100px;
 text-align: right;
 font-size:16px;
 font-weight:bold;
 color:#000000;
 -moz-box-shadow: 0px 20px 35px #000;
 -webkit-box-shadow: 0px 20px 30px #000; 
 opacity: 1;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
 background-image: url(/img/forum/icon/home.png);
}
ul#navigation .about a {
 background-image: url(/img/forum/icon/users.png);
}
ul#navigation .search a {
 background-image: url(/img/forum/icon/dollar_currency_sign.png);
}
ul#navigation .podcasts a {
 background-image: url(/img/forum/icon/warning.png);
}
ul#navigation .rssfeed a {
 background-image: url(/img/forum/icon/picture.png);
}
ul#navigation .photos a {
 background-image: url(/img/forum/icon/add_to_shopping_cart.png);
}
ul#navigation .contact a {
 background-image: url(/img/forum/icon/telephone.png);
}

А вот код страницы где расположено меню:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>$MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<script type="text/javascript" src="/jquery/jquery-1.3.2.js"></script>
</head>

<body style="background:url('/.s/t/995/1.jpg') #362D29; margin:0px; padding:0 1% 0 1%;"> 

<div style="position:absolute; overflow:hidden; left:1601px; top:186px; width:300px; height:210px; z-index:0"><a href="http://www.facebook.com/ven000mus" target="blank"><img src="/img/socialhub/facebook-logo.png" alt="Facebook" border="0" width="300" height="210" onmouseover='this.src="/img/socialhub/facebook-logo1.png"' onmouseout='this.src="/img/socialhub/facebook-logo.png"' /></a></div>

<div style="position:absolute; overflow:hidden; left:1600px; top:40px; width:268px; height:120px; z-index:1"><a href="http://twitter.com/ven000mus" target="blank"><img src="/img/socialhub/twitter-logo.png" alt="Twitter" border="0" width="268" height="120" onmouseover='this.src="/img/socialhub/twitter-logo1.png"' onmouseout='this.src="/img/socialhub/twitter-logo.png"' /></a></div>

<div style="position:absolute; overflow:hidden; left:1554px; top:158px; width:137px; height:57px; z-index:2"><a href="http://www.youtube.com/user/ven000mus" target="blank"><img src="/img/socialhub/youtube-logo.png" alt="Youtube" border="0" width="137" height="57" onmouseover='this.src="/img/socialhub/youtube-logo1.png"' onmouseout='this.src="/img/socialhub/youtube-logo.png"' /></a></div>

$ADMIN_BAR$

<ul id="navigation">
 <li class="home"><a href="/" title="Главная">На главную</a></li>
 <li class="about"><a href="http://meeta.ucoz.ru/forum/2-2-1" title="О нас">О нас</a></li>
 <li class="search"><a href="http://meeta.ucoz.ru/forum/3" title="Цены">Цены</a></li>
 <li class="photos"><a href="http://meeta.ucoz.ru/forum/4" title="Сделать заказ">Сделать заказ</a></li>
 <li class="rssfeed"><a href="http://meeta.ucoz.ru/forum/5" title="Портфолио">Портфолио</a></li>
 <li class="podcasts"><a href="http://meeta.ucoz.ru/forum/6" title="Для игроков ММОРПГ игр">Для игроков ММОРПГ игр</a></li>
 <li class="contact"><a href="http://meeta.ucoz.ru/forum/9-5-1" title="Контакты">Контакты</a></li>
</ul>

<div align="center" style="height:239px;">
 <a href="/"><img src="/img/meetalogo.png" border="0"></a>
</div>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="70%">
<tr><td width="10" height="10"><img src="/.s/t/995/6.gif" border="0"></td><td style="background:url('/.s/t/995/7.gif');"></td><td width="10" height="10"><img src="/.s/t/995/8.gif" border="0"></td></tr>
<tr><td style="background:url('/.s/t/995/9.gif');"></td><td style="background:url('/.s/t/995/10.jpg') #E9D8AD;padding:10px;">

$GLOBAL_AHEADER$

 <div align="center"><script type="text/javascript" src="http://meeta.ucoz.ru/rtr/1"></script></div>

<div class="forumContent"><table border="0" cellpadding="0" height="30" cellspacing="0" width="100%">
<tr>
<td align="right">[<?if($USER_LOGGED_IN$)?>
<a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><!--<s3065>-->Личные сообщения<!--</s>-->($UNREAD_PM$)</a> ·
<?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script><bgsound src="http://s58.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>-->Новое на сайте<!--</s>--></a> · 
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>-->Пользователи<!--</s>--></a> · 
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>-->Правила поведения<!--</s>--></a> · 
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>-->Поиск по сайту<!--</s>--></a> · 
<a class="fNavLink" href="$RSS_LINK$" rel="nofollow">RSS</a> ]</td>
</tr>
</table>
$BODY$</div><br />

$GLOBAL_BFOOTER$
</td><td style="background:url('/.s/t/995/25.gif');"></td></tr>
<tr><td width="10" height="10"><img src="/.s/t/995/26.gif" border="0"></td><td style="background:url('/.s/t/995/27.gif');"></td><td width="10" height="10"><img src="/.s/t/995/28.gif" border="0"></td></tr>
</table>

<div style="color:#EBDAAF;text-align:center;padding:10px;">$POWERED_BY$</div>

 <script type="text/javascript">
 $(function() {
 $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

 $('#navigation > li').hover(
 function () {
 $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
 },
 function () {
 $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
 }
 );
 });
 </script>

</body>

</html>

Заранее спасибо.

zSpx · October 28, 2011

1. Вопрос риторический: «Как можно оказывать услуги веб-дизайна, не обладая достаточными навыками, для решения собственных проблем?»

2. Код страшный. Без ссылки на сайт мало кто отважится разбираться. upd: острый глаз может адрес на скрине подсмотреть

upd2: пожалуйста, потратьте пару-тройку недель на штудирование этого сайта. :facepalmxd:

Edited October 28, 2011 by zSpx

ven000mus · October 28, 2011

1. Вопрос риторический: «Как можно оказывать услуги веб-дизайна, не обладая достаточными навыками, для решения собственных проблем?»
2. Код страшный. Без ссылки на сайт мало кто отважится разбираться. upd: острый глаз может адрес на скрине подсмотреть
upd2: пожалуйста, потратьте пару-тройку недель на штудирование этого сайта.

1. Согласен, но мы пока учимся.

2. По подробней. 80% кода написано сотрудниками ucoz.ru | www.meeta.ucoz.ru

upd2 - Я этим и занимаюсь...

ceil100 · October 28, 2011

а че такой сайт широченный?

margin: 266px 0 0 -115px;

вместо


 left: -115px;
 top: 266px;

Edited October 28, 2011 by ceil100

ven000mus · October 29, 2011

Еще один вопросик....

Смотрел сайт в разных разширениях, логотип не сужается %(

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

psywalker · October 29, 2011

Еще один вопросик....
Смотрел сайт в разных разширениях, логотип не сужается %(
Кто поможет, как сделать, что бы логотип был как сам сайт, резиновый. Если сужается сайт, сужается и логотип....

Сделай его картинкой. <img>

ven000mus · October 30, 2011

<div align="center" style="height:239px;">
 <a href="/"><img src="/img/meetalogo.png" border="0"></a>
</div>

Так он так и есть....

ceil100 · October 30, 2011

хочешь чтобы масштабировался что-ли?

убери img и сделай картинку фоном для ссылки, а ссылку блочным элементом

Edited October 30, 2011 by ceil100

ven000mus · October 31, 2011

А можно как нибудь по подробней?

Я примерно понял, но в тоже время не въехал ;(

ceil100 · October 31, 2011

как-то так


a {display:block;width:950px;height:239px;background: url(../img/meetalogo.png) no-repeat;margin:0 auto;}

<a href="/">

</a>

</div>

прицепи к этой ссылке какой-нибудь класс, что-бы она за собой другие не потянула

Edited October 31, 2011 by ceil100

ven000mus · October 31, 2011

Ну вот сделал. Только в чем то ошибка ;(

<div align="center" style="height:239px;">
<a class="logonew" href="/"></a>
</div>

a:logonew {display:block; width:950px; height:239px; background: url('http://meeta.ucoz.ru/img/meetalogo.png') no-repeat; margin:0 auto;}

Лого не подгружается.... :blush:

ven000mus · October 31, 2011

Все получилось, поправил ошибку.

Но эффекта резинки все равно нет...

http://viewlike.us/

Проверил там на разных разширениях, шапка все равно не сужается... ;(

ceil100 · November 1, 2011

можешь,тогда вернуть картинку и задать ей ширину 100%, и родительскому контейнеру поставь ширину 70%

но это не очень хорошее решение

или можешь добавить таблице еще одну ячейку и картинку поместить туда

а не масштабируется картинка из-за того что все в процентах, сразу не обратил внимания

Sign In

Помощь с дизайном

Question

Link to comment

Share on other sites

12 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information