Перейти к содержимому

Сервис обмена электронных валют


Вопросы по созданию сайта с использованием ''CSS'', ''JS'', скриптов и др.

#1 Spawn

Spawn
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 16 Июнь 2015 - 14:57

<!DOCTYPE html>
<div>
<html>
<head>
<body style="background:url('images/hi-tech.jpg') no-repeat; background-size: 100%;"> 
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<div style="position:absolute;">
<img src="http://cybertex.moy.su/images/printed_circuit.jpg" width="999" height="391"; style=" position:absolute; top:0px; left:0px;"></div>
<img src="http://cybertex.moy.su/gif/cooltext122066433792606.gif" width="621" height="222" alt="CyberTEX"; style=" position:absolute; top:10px; left:10px;" class="ops">
<style>
.fig { text-align: center; }
</style>
<p class="fig">
</div>
</td></tr></table>
</body>
</html>
</div>

1)Картинка + анимация, до того как наложил анимацию на картинку - картинка была выровняна по центру , а теперь часть кода который центрировал её не работает - почему? как исправить? заменить другим вариантом кода? если да - то каким? и какие атрибуты и значения установить чтобы в любом браузере и мобильных версиях эта картинка была фиксированна в размерах т.е. не изменяла размеры в любых случаях ? 
2)Анимированный текст в GIF - как средствами кодировки сделать фон анимации прозрачным (без использования фотошопов) ? Такое вообще возможно?

 

Если что то не так поправьте меня


 

 

  • 0

#2 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 149 сообщений
  • Репутация: 268

Отправлено 16 Июнь 2015 - 15:38

@Spawn, если я правильно понимаю, удя по коду картинка находится в абсолютном положении и прижата к левому верхнему углу, а гифка также абсолютная но с отступами по 10 пикселей от верха и левого края. о каком центре вы говорите?


  • 0

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



#3 Spawn

Spawn
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2015 - 16:00

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

 

 

В идеале хотелось бы примерно как здесь - http://cybertex.wix.com/cybertex


Сообщение отредактировал Spawn: 16 Июнь 2015 - 16:03

  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 16 Июнь 2015 - 19:04

@Spawn,

есть подозрение, что вам нужно что-то вроде такого:

<!DOCTYPE html>
<html>
<head>
<style>
*{
  padding:0;
  margin:0;
}
#bg_body{
  position:fixed;
  z-index:1;
  width:100%;
}
#content{
  position:relative;
  z-index: 100;
  margin:0 auto;
  width:979px;
  min-height:1200px;
  background:#fff;
}
#head{
  height:285px;
  background:url(http://s018.radikal.ru/i500/1506/9f/80bdaac533b8.jpg);
}
#logo{
  position:absolute;
  top:30px;
  left:0;
  width:621px;
  height:222px;
  background:url(http://s008.radikal.ru/i305/1506/da/7b1c41838158.gif);
}
</style>
</head>
<body> 
<img src="http://cybertex.moy.su/images/hi-tech.jpg" id="bg_body">
<div id="content">
  <div id="head">
    <div id="logo">
    </div>
  </div>
</div>
</body>
</html> 

Результат можно посмотреть по ссылке: https://jsfiddle.net...mbedded/result/


Сообщение отредактировал yury: 16 Июнь 2015 - 19:27

  • 0

#5 Spawn

Spawn
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2015 - 19:47

 yury, Спасибо, почти как хотелось ,  только вот теперь от этой картинки на всю страницу вниз идет белая полоса шириной как сама картинка , как её убрать?

l0n068i2I399o3k9_preview.jpg

Скажите как двигать влево вправо вверх вниз анимированную надпись ? точные координаты сказать пока немагу, потому что будут еще 2-3 блока надписей на этой картинке какого размера пока незнаю , располагаться будут внизу анимиованной надписи и справа


Сообщение отредактировал Spawn: 16 Июнь 2015 - 19:47

  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 16 Июнь 2015 - 20:36

только вот теперь от этой картинки на всю страницу вниз идет белая полоса шириной как сама картинка , как её убрать?

Я специально это место выделил белым, чтоб было видно поле под контент. Убирается правкой стилевого свойства background для блока #content:
#content{
  position:relative;
  z-index:100;
  margin:0 auto;
  width:979px;
  min-height:1200px;
  background:#fff; /*цвет фона, сейчас указан белый*/
}
либо совсем эту строку уберите, либо укажите другой нужный цвет фона
 
 

Скажите как двигать влево вправо вверх вниз анимированную надпись ?

Положение анимированной картинки регулируется стилевыми свойствами для блока #logo:
#logo{
  position:absolute;
  top:30px;/*отступ сверху*/
  left:0;/*отступ слева*/
  width:621px;
  height:222px;
  background:url(http://s008.radikal.ru/i305/1506/da/7b1c41838158.gif);
}
Укажите подходящие значения для параметров top и left и картинка соответственно изменит свое положение.
 
И, на всякий случай, не забудьте перенести картинки фона шапки http://s018.radikal....0bdaac533b8.jpg и анимированного лого http://s008.radikal....b1c41838158.gif с сайта radikal.ru на свой сайт с соответствующим изменением ссылок в стилях.

Сообщение отредактировал yury: 16 Июнь 2015 - 21:50

  • 0

#7 Spawn

Spawn
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 16 Июнь 2015 - 20:44

Огромное вам спасибо за четкую и быструю помощь :)

  yuryв предоставленном вами кусочке кода , вы, как я понимаю использовали только html + css!?
  • 0

#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 16 Июнь 2015 - 21:47

в предоставленном вами кусочке кода , вы, как я понимаю использовали только html + css!?
 

Да


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru