Всплывающий текст

[McLotos]

Добрый день, в общем делаю такую фишку, Шапка сайта будет состоять из картинок (банеров), при наведении на которые должен появляться текст, всё бы хорошо, но текст появляется правее картинки, следовательно все банеры не помещаются, помогите подправить css

#header #banner
width: 730px;height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease; }

#header #banner:hover{line-height: 133px; color: #575858; }

#header #banner img{ float: left; margin: 0 15px; }

Edited April 2, 2013 by McLotos

[Zippovich]

из приведенного куска непонятно чего ничего не понятно

ссылку на сайт давайте

и желательно картинку как должно быть

[McLotos]

Ну если Вам в коде ничего не понятно, тогда я не знаю как Вам ещё объяснить =)

Попробую "на пальцах"

Есть несколько дивов #banner которые находятся в диве #header

В дивах #banner есть картинки

При наведении на эти дивы #banner:hover, на них должен появляться текст который плавно "падает" сверху до нужного уровня. А реально этот текст оказывается чуть правее, я пробовал поиграться с шириной дива, но это ничего не дало, текст все-равно оказывается правее

[gibigate]

Если хотите поверх картинки, то придется текст обернуть в какой либо элемент, и с помощью position:absolute расположить где нужно

[Zippovich]

еще раз повторю, не видя полного кода (ни html) из куска css ничего нельзя понять.

убедительно Вас прошу, если Вы хотите решить свою проблему обратить на мои слова внимание.

[spdif]

из объяснения на пальцах,

выходит следующая конструкция:

<div id="header">
<div class="banner">
<img/> a </div>
<div class="banner">
<img/> b </div>
<div class="banner">
<img/> c </div>
<div class="banner">
<img/> e </div>
<div class="banner">
<img/> f </div>
</div>

смущает то что элементов с id="banner" более чем один...

вернее будет использовать class="banner",

а элементу <img> задать position: absolute;

Edited April 2, 2013 by spdif

[Switch74]

экстрасенс ?!.

[McLotos]

Ну в общем после некоторых плясок с бубном код чуть-чуть изменился и проблема решена, сейчас объясню более предметно:

Есть див header внутри него несколько дивов, внутри каждого из них есть ещё под одному диву

<header id="header">
<div id="banner" class="Projects">
<a href="#">Проекты</a>
<div class="description">
всплывающее описание
</div>
</div>

<div id="banner" class="Partners">
<a href="#">Партнеры</a>
<div class="description">
всплывающее описание
</div>
</div>
/*здесь ещё 3 блока*/
</header>

Вообще таких блоков там 5

Т.е. теперь в html нету картинок, они указываются в css

В CSS это оформлено так

#header {
height: 280px;
    border:1px solid #ffffff;
    width:60%;
    margin-left:20%;
    margin-right:20%;
    overflow:hidden;
background-image:url(glass.png);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
padding-left:20px;
padding-top:10px;
padding-bottom:10px;
-moz-box-shadow: 0 0 40px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 40px rgba(255,255,255,0.5);
    box-shadow: 0 0 40px rgba(255,255,255,0.5);
}

#header div.banner{width:19.5%; float:left; height:275px; z-index:100;}

#header div.banner a {font-family: 'Times New Roman', serif;
font-size: 0.75em;margin-top:10%;display: block; outline: none;text-decoration: none;height:30px; width:100%;padding-top:4px;text-height:5px;text-align:center;
font-size:18px; color:#F2FF00;-moz-box-shadow: 0px 5px 50px rgba(0,250,255,0.7);
    -webkit-box-shadow: 0px 5px 50px rgba(0,250,255,0.7);
    box-shadow: 0px 5px 50px rgba(0,250,255,0.7);
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}

#header div.banner a:hover {font-family: 'Times New Roman', serif;
font-size: 0.75em;margin-top:10%;display: block; outline: none;text-decoration: none;height:30px; width:100%;text-height:5px;text-align:center;
font-size:24px; color:#08FF00;
-moz-box-shadow: 0px 5px 50px rgba(242,255,0,0.7);
    -webkit-box-shadow: 0px 5px 50px rgba(242,255,0,0.7));
    box-shadow: 0px 5px 50px rgba(242,255,0,0.7);
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
 }

#header div.banner a:hover + div.description {
    margin-top:10px; line-height: 50px; text-shadow: 1px 1px 2px #4C00FF, 0 0 1em #ffffff;font-style:bold; text-align:center; -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));margin-bottom: 30px; position:relative;z-index:auto;
}

#header div.banner div.description  {text-align:center;margin-top:10px;width:100%; height: 50px; line-height: 50px; color: transparent; font-size: 25px;  font-weight: 50; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;text-align:center;z-index:auto;}

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

В общем получается так:

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

Edited April 4, 2013 by McLotos