CSS лунанне працуе толькі на верхнюю палову My Button

Я на самой справе пацягнуўшы мяне за валасы на гэтым. Я не раблю вэб-старонак, прафесійна або на рэгулярнай аснове; і я сапраўды тупік.

Вы можаце перайсці на маёй старонцы работы ў прагрэсе тут:

http://damienivan.com/wip/042/

Пры навядзенні курсора на адну з кнопак ніжэй «прыкмет працы,» стан лунання і «спасылка палец» з'яўляюцца толькі тады, калі курсор знаходзіцца над верхняй часткай кнопкі.

CSS з'яўляецца:

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
        }

    .work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

HTML з'яўляецца:


    <div class="work_button">
        

demo reel

</div>

Поўны файл CSS знаходзіцца па адрасе:

http://damienivan.com/wip/stylesheets/main.css

Загадзя дзякую! Я сапраўды затрымаўся тут.

-Damien

0
Калі ў вас ёсць такія праблемы, вы павінны спачатку праверыць сродкі распрацоўкі браўзэра. Там вы, напрыклад, ёсць інструмент, які паказвае вам элемент, які знаходзіцца пад бягучай пазіцыяй курсора мышы, і там вы можаце ўбачыць, што ваш зноска гэта накладыванія меню.
дададзена аўтар t.niese, крыніца
Аб Божа, цяпер я адчуваю сябе тупы! Дзякуй!
дададзена аўтар Damien Ivan, крыніца

7 адказы

Паспрабуйце павялічыць вышыню вашага work_wrapper

Паспрабуйце гэта:

#work_wrapper {
    height: 125px;
    padding-top: 14px;
    position: relative;
    width: 890px;
}

або Вы таксама можаце паспрабаваць гэта

#footer_wrapper { clear: both; }
3
дададзена
Павелічэнне thei вышыні не з'яўляецца добрай ідэяй. Не выкарыстоўвайце вышыню на ўсіх, але перапаўнення: схаваны (гл мой адказ).
дададзена аўтар ralph.m, крыніца
@Romancha горшае рашэнне, паколькі яно не ліквідуе зыходную праблему.
дададзена аўтар Christoph, крыніца
@DamienIvan калі ён сапраўды працаваў плз прыняць адказ.
дададзена аўтар edd, крыніца
ён вырашае праблему, можа быць статычным спосабам, але ён вырашае.
дададзена аўтар edd, крыніца
там быў рост на першым месцы, і я даў хуткае рашэнне @ дарэчы ralph.m ваш адказ халаднавата
дададзена аўтар edd, крыніца
Ідэальны адказ, што я шукаю
дададзена аўтар Romancha KC, крыніца
Пра чалавека, які быў вельмі простым і відавочным. Я мяркую, што гэта тое, што я атрымліваю для працы Сезам 4am. Вялікае вам дзякуй! І так, павялічваючы памер #work_wrapper цалкам працуе ў маім выпадку, дык гэта тое, што ён павінен рабіць у любым выпадку.
дададзена аўтар Damien Ivan, крыніца

Праблема заключаецца ў тым, што ваш #work_wrapper дзіў мае фіксаваную вышыню (дрэнная ідэя). Выдаліць гэтую вышыню, і замест таго, каб усталяваць яго ў перапаўнення: схаваны , так што ён абгортвае вакол кнопак:

#work_wrapper {
width: 890px;
height: 100px;    /*  REMOVE THIS  */
padding-top: 14px;
position: relative;
overflow: hidden;  /*  ADD THIS  */
}

Акрамя таго, вы не павінны быць сапраўды выкарыстоўваючы DIV і h2 ўнутры вашай спасылкі. Зачысціце іх, і зрабіць гэта замест таго, каб:

HTML:

demo reel

CSS:

#work_button_wrapper a {
  display: block;
  float: left;
  width: 174px;
  text-align: center;
  line-height: 58px;
  background: #3FC0E9;
  font-size: 1.25em;
}

#work_button_wrapper a:hover {
  background: white;
  color: #3FC0E9;
}
2
дададзена
Прахалоднае, дзякуй, я палатаю гэта таксама. Вельмі высокая ацэнка!
дададзена аўтар Damien Ivan, крыніца

Гэта CSS заява можа дапамагчы вам:

 #footer_wrapper { clear: both; }

ДАРЭЧЫ: Укладанне ў DIV ў якарнай тэг гістарыяграфіі ня сапраўды.

1
дададзена
Або проста выкарыстоўваць HTML5 Doctype :)
дададзена аўтар Wipster, крыніца
Праўда! Дзякуй за дапаўненне. (Але я думаю, толькі для тэга?)
дададзена аўтар Wipster, крыніца
@Wipster дэль і модулі падлічваць таксама <�я> празрыстае ўтрыманне . Але калі шчыра я не ведаю поўны спіс ні я магу знайсці адзін на w3c.
дададзена аўтар t.niese, крыніца
@Christoph не <�я> рядный </я> больш, але <�я> празрысты dev.w3.org/html5/markup/a.html <�я> Змены ў HTML5 [...] асобнік а> элемент/код <�цяпер дазволена таксама ўтрымліваць паток ўтрыманне (па сутнасці, тое, што было ў папярэдніх версіях, званых <�я> «блок» ўтрыманне) - калі бацькоўскі элемент гэтага асобніка элемента з'яўляецца элемент, які мае права ўтрымліваць паток ўтрыманне. [...]
дададзена аўтар t.niese, крыніца
Для дадзенага DOCTYPE Вы маеце рацыю, але з html5 сапраўды паставіць DIV ўнутры а
дададзена аўтар t.niese, крыніца
@ T.niese Калі ласка, вы можаце даць спасылку, каб даказаць сваё сцвярджэнне? Я не бачу прычын, чаму яны павінны змяніць механіку, каб забараніць блокавыя элементы ўнутры инлайн-элементаў.
дададзена аўтар Christoph, крыніца
@ T.niese дзякуй за спасылку. Аднак паток кантэнту! = Блокавыя элементы. Я лічу html5 адрозненне даволі неинтуитивными. У асноўным блок элемент будзе паток - фармулюючы ўтрыманне ... -_-
дададзена аўтар Christoph, крыніца
дададзена аўтар HerrSerker, крыніца
Я не разумеў, што гняздуюцца ў DIV у якасці а ня дзейнічае. Паспрабую фіксуючы гэта.
дададзена аўтар Damien Ivan, крыніца

З дапамогай Google Chrome або Mozilla Firefox для адладкі вэб-старонкі. Абодва браўзэра мае магчымасць выкарыстоўваць WebDeveloper інструменты, якія дазволяць Вам візуалізаваць CSS лепш. Гэта дапаможа вам убачыць, што адбываецца, і ў гэтым выпадку ёсць cssobject блакіроўка паловы вашай кнопкі. Вялікі плюс у гэтым у Firefox з'яўляецца тое, што ён мае опцыю 3D-прагляду. Гэта выглядае выклікаюць на першы, але гэта можа быць вельмі карысна пры спробе праглядзець, што адбываецца ў CSS.

1
дададзена
У Firefox я рэкамендаваў бы пашырэнне Firebug над ўбудаванымі інструментамі Webdev.
дададзена аўтар HerrSerker, крыніца
Не ведаю, што адзін. Гэта можа спатрэбіцца. Нажаль, мая відэакарта, здаецца, не быць у стане.
дададзена аўтар HerrSerker, крыніца
Найбольш вызначана !!! Пашырэнне Firebug сапраўды выдатны інструмент, які вы толькі павінны ўсталяваць! Але варыянт 3D, што я ўжо тут не з'яўляецца часткай Firebug, але сам Firefox: developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_vie‌ ш
дададзена аўтар Borniet, крыніца
Так, вы маеце рацыю, дзякуй. Звычайна я раблю гэта, я думаю, я проста не думаў, прама лол.
дададзена аўтар Damien Ivan, крыніца

Перамясціць тэг ўнутры сну і дадайце шырыню і вышыню для тэга (ужо вы даяце вышыня і шырыня для DIV, які ахоплівае тэг так што няма нічога дрэннага ў прадастаўленні такой жа вышыня і шырыня у тэг )

#work_button_wrapper
        {
        width:              890px;
        float:              left;
        padding-top:        9px;
        /* border:              2px solid #FFF; */
        }

    .work_button    
        {
        width:              174px;
        height:             58px;
        float:              left;
        background:         #3FC0E9;
        border-right:       4px solid #30A9D0;
  text-align:center
        }
    .work_button a
        {
        text-decoration:    none;
        font-size:          15px;
        color:              #FFF;
        height:58px;
        width:174px
}
h2{
  height:100%; width:100%
}
    .work_button a:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

    .work_button_last
        {
        width:              178px;
        border-right:       0px solid #30A9D0;;
        }   


#work_button_wrapper a:hover
        {
        /* background:          #3FC0E9; */
        background:         #FFF;
        color:              #30A9D0;
        }
.work_button:hover
        {
        background:         #FFF;
        color:              #30A9D0;
        }

<�Моцны> DEMO

0
дададзена

Праблема заключаецца ў футер вашай старонкі. Гэта над кнопкамі.

Дайце кнопкі Z-індэкс, і ён будзе выдатна працаваць!

You can always give your footer a z-index:-1;

Кнопкі будуць паказаны зверху і маюць парыць на кнопку цэлага

0
дададзена

Вы падмяшаць убудаваныя і блокавыя элементы. Праверце H2 і вы бачыце інтэрактыўныя элементы сканчаюцца.

enter image description here

Рэфактарынгу HTML ніжэй:

<div id="work_button_wrapper">

                
            demo reel           
    

              
            hp            
    

        
            free world          
    

               
            dabo            
    

               
            sugar skull          
    

</div>

CSS:

body {
font: 17px/19px Helvetica, sans-serif;
color: #FFF;
}

#work_button_wrapper
    {
    width:              890px;
    float:              left;
    padding-top:        9px;
    overflow:hidden;
    }

.work_button    
    {
    width:              174px;
    float:              left;
    overflow: hidden;
    background:         #3FC0E9;
    border-right:       4px solid #30A9D0;
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 24px;
        font-weight: normal;
        letter-spacing: -1.5px;
        text-align: center;
            padding: 20px 10px;
}

.work_button:hover
    {
    background:         #FFF;
    color:              #30A9D0;
    }

.work_button_last
    {
    width:              178px;
    border-right:       0px solid #30A9D0;;
    }   

http://jsfiddle.net/brutusmaximus/ZPunN/

0
дададзена