製作響應式頁腳與內部圖像

我試圖做出響應式頁腳而不使用引導程序。只是CSS，但東西不對。頁腳中的按鈕也是圖片而不是文字鏈接。頁腳的結構是製作響應式頁腳與內部圖像

<div id="footer"> 
    <ul> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image26"></a> </li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image27"></a></li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image25"></a> </li> 
     <li><a href=""><img src="images/button.png" width="221" height="61" id="Image24"></a></li> 
    </ul> 
    <p>Copyright &copy; | all rights reserved.</p> 
</div>

這是頁腳的CSS

#footer{ 
    background: url(../images/bg-footer.png) repeat-x center top; 
    min-height: 300px; 
    margin-top: -45px; 
    overflow: hidden; 
    background-position-x: -15px; 
} 

#footer ul { 
    list-style: none; 
    margin: 50px auto 0; 
    overflow: hidden; 
    padding: 0; 
    width: 960px; 
} 

#footer ul li { 
    float: left; 
    height: 60px; 
    line-height: 60px; 
    margin: 0 0 0 25px; 
    width: 220px; 
} 

#footer ul li:first-child { 
    margin: 0; 
} 

#footer ul li a { 
    background: url(../images/bg-menu1.png) no-repeat 0 -70px; 
    color: #2B0D05; 
    display: block; 
    font-family: 'PlayballRegular'; 
    font-size: 30px; 
    text-align: center; 
    text-decoration: none; 
} 

#footer ul li.current a, 
#footer ul li a:hover { 
    background: url(../images/bg-menu1.png) no-repeat 0 0; 
    font-family: PlayballRegular; 
} 

#footer p { 
    margin: 80px 0 0; 
    text-align: center; 
    text-transform: lowercase; 
}

結果是，當我調整窗口有三個按鈕，而不是4和<p></p>變得不可見。

這是我到目前爲止嘗試的JSFFIDLE。

來源

2015-07-13 Stan

@media only screen and (max-width: 480px) { 
#footer ul li a img { 
    max-width: 100%; 
    display: block; 
    /* height: auto; */ // may b this thing makes the change for this resolution. 
}

嘗試更改此CSS媒體查詢選擇器部分後，這件事可能會對你有幫助。

現在這裏是爲您<p>標籤的變化

#footer p { 
    margin: 80px 0 0; 
    text-align: center; 
    text-transform: lowercase; 
    color: white; // to show white colored text only. 
} 

@media only screen and (max-width: 480px) { 
#footer { 
    /* max-height: 0; */ // this thing was causing for <p> tag that was not showing 
    overflow: hidden; 
    width: 100%; 
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm6W-Dhy2DYzedY8Y9dXl7HypMH6IQoJxWG-VQ4igf4Dhep0yC0knRYOZX); 
    width: 100%; 
}

改變上述兩個變化在哪裏改變，可以幫助您有什麼需要

來源

2015-07-13 08:30:40

此解決該問題與圖像的數量。 '

文字

'仍然不可見 – Stan

只需一分鐘，我只是忘記了那麼這個花花公子的老闆 –

@Stan看看編輯的答案。 –

製作響應式頁腳與內部圖像

回答

相關問題