2013-01-19 39 views
1

我在嘗試查看是否有任何方法使用CSS與Gumby框架的「跳過鏈接」錨鏈接解決方案來調整固定位置標題。在帶有固定CSS標題的Gumby框架中使用'跳過鏈接'

我已經嘗試推動層與負邊界下來,也試圖目標與CSS的數據類型屬性無濟於事。到目前爲止我嘗試過的所有內容也都將頁面上的div移動了。

我的標題有682px的固定高度,我想找到一種方法來保持所有內容的下面,並跳過鏈接功能仍然工作。

任何建議將不勝感激!

Example Link

部首CSS:

body { 
    padding-top:268px !important; 
} 

.fixed_header { 
    width: 100%; 
    height: 268px; 
    background: url(../img/green_header_grad.png) repeat-x; 
    ; 
    position: fixed; 
    text-align: center; 
    z-index: 999; 
    border-bottom: 1px solid #FEFEF4; 
    -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3); 
    box-shadow: 3px 3px 6px rgba(0,0,0,0.3); 
    top: 0px; 
} 
+0

你能澄清到目前爲止你所得到的和你想要的*它是什麼? – cimmanon

+0

當然。我的頂部標題具有234px的固定位置高度,我正在尋找最多四個頁面上的跳過鏈接,所有帳戶的偏移量。我會更新這個問題來澄清。 – jsuissa

回答

1

更改體的邊緣值或者插入一個偏移量以匹配固定的頁眉高度是第一步。

似乎有什麼工作是將數據類型屬性移動到要跳過的圖層內的跨度內。然後跨度需要一個絕對位置,然後爲負值或偏移需要被應用到匹配頭(-286px):

HTML:

<div class="four columns sidebar""> 
<span class="anchor" id="founder" data-type="skiplink_3"></span> 
</div> 
<div class="eleven columns main_col"></div> 
</div> 

CSS:

span.anchor { 
position:absolute; 
top: -268px; 
display: block; 
visibility: hidden; 
} 
1
body { 
    padding-top:234px; 
} 
+0

感謝您的建議!嘗試了「輔導服務」鏈接,抵消依然不對,但我可能會錯過一些東西。 – jsuissa

1

刪除margin-top: -268px;span.anchor(style.css的線149),例如:

span.anchor { 
    display: block; 
    height: 268px; 
    visibility: hidden; 
} 
+0

謝謝。我明白這是如何工作的,但現在錨點將每個部分向下移動268px。如果我刪除'height:268px',它會拋出跳過鏈接。 – jsuissa