Обвиване на Div, въпреки че използвам overflow: hidden

Опитвам се да създам заглавка с различни изображения и тяхното описание. Искам тяхното описание да се показва, когато преместваме курсора на мишката върху съдържанието с помощта на jQuery. Публикувам само моя HTML и CSS, тъй като мисля, че там е проблемът.

jQuery работи, но проблемът е, че дори след използване на скрито препълване, div с клас headerCont се увива на следващия ред. Може ли някой да ми помогне с това. Благодаря.

Не ми е позволено да публикувам изображения, така че това е връзката към изображението, което ще ви помогне да ме разберете ->

http://image.bayimg.com/cabjpaaeg.jpg

http://img145.imageshack.us/img145/3236/cabjpaaeg.jpg

PS в изображението по-горе поставих мишката върху един от div с клас headerCont. Искам ТЕКСТЪТ да е поставен до изображението. Също така последният div преминава към следващия ред, когато един от div е разширен (не знам правилната дума, за да обясня това!) вместо първоначалното си място

HTML кодът:

<html>
<head>
    <title>Silder</title>
    <link rel="stylesheet" type="text/css" href="/bgcss/default.css" />
</head>
<body>
    <div class="header">
        <div style="margin: 5px; width:1300px; overflow: hidden;">
        <div class="headerCont" style="background-color: #cdcdcd;  ">
            <div><img src="image/1.jpg" style="height: 317px; width: 214px; float:left; " /></div>
            <div style="float:left;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #719501; ">
            <div><img src="image/2.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #f3f3f3; ">
            <div><img src="image/3.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #719501; ">
            <div><img src="image/4.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:186px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        <div class="headerCont" style="background-color: #f3f3f3;">
            <div><img src="image/5.jpg" style="height: 317px; width: 214px;" /></div>
            <div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
        </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jQuery.js" ></script>
    <script type="text/javascript" src="js/home.js" ></script>
</body>

CSS CODE:

#content{
margin-left: auto;
margin-right: auto;
width: 90%;
border: 2px solid;
border-color: #272727;}
.outter{
border:2px solid #000000;
margin:4px;
position: relative;
}
.header{
width:1300px;
height:400px;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
margin-bottom:20px;
overflow:hidden;
position: relative;
}
.headerCont{
height: 100%; 
width:214px;
padding:5px;  
float:left;
overflow:hidden;
position:relative;
}
.header img{
border-color:#000000;
}

JavaScript:

$(".headerCont").mouseover(function(){
  $(this).animate({
width:400,
  }, 300 );
});

$(".headerCont").mouseout(function(){
  $(this).animate({ 
width: 214,
  }, 200 );
});

html css overflow
person DhruvPatel    schedule 20.08.2012    source източник
comment
Силно бих ви насърчил да публикувате кода си home.js просто защото все още съм малко объркан какво прави вашият сайт и/или какво се опитвате да постигнете. Изображението, което публикувахте, също дава грешка 403 Forbidden.   -  person aug    schedule 21.08.2012
comment
Публикувах моя javascript и друга връзка за моето изображение. Надявам се този път да се получи   -  person DhruvPatel    schedule 21.08.2012
comment
Изображението е 403 - Забранено   -  person j08691    schedule 21.08.2012
comment
опитайте да копирате и след това да го поставите в URL адреса. Не знам защо, но това работи за мен. Дори публикувах друга връзка от imageshack, която трябва да помогне   -  person DhruvPatel    schedule 21.08.2012
comment
Само малко повече пояснение, така че всичко, което искате, е текстът да се показва до div, когато поставите курсора на мишката над div? Не за да намеря начин да заобиколя проблема ви, но предлагам да разгледате Jquery's Tooltip плъгин като Мисля, че това е, което се опитвате да постигнете (и е много по-лесно, отколкото просто да го направите сами).   -  person aug    schedule 21.08.2012
comment
Да, искам текстът да се показва до div, когато задържа курсора на мишката. И наистина мисля, че проблемът е в моя css или html, защото прекъснах връзката на javascript и страницата все още не беше така, както исках да бъде   -  person DhruvPatel    schedule 21.08.2012

Отговори (1)


arrow_upward
0
arrow_downward

@dawnoflife Може би му липсват разрешения?
person DhruvPatel    schedule 21.08.2012