2016-08-05 45 views
1

上定位任何競爭,當我嘗試將h3添加到網站上時,它只停留在頂部我嘗試在CSS中使用位置,頂部,左側但它不我不想回應它。我也試圖用w3schools的一個畫廊模板來看看它是否會讓我移動畫廊,但仍然沒有運氣。我試圖研究這個,但我沒有運氣。很抱歉,長碼。頁腳和標題不會允許我在網站

<html> 
<link rel="stylesheet" href="sheet.css"> 
<head> 
<title> Jon Barton </title> 
</head> 
<header> 
<ul class= "nav-men"> 
<li><a HREF="Gallery.html"> Gallery</a> </li>  
<li><a HREF= "JB.html">About me</a> </li> 
<li><a HREF= "contractme.html"> Contract me</a></li> 
</ul> 
<h1><span> Software Developer </span> </h1> 
<p class = "kicker" >Ideas // Desinger // Implement </p> 
</header> 
<body> 
<h3> Work</h3> 
<footer> 
<div class = "footer"> 
<div class ="content-wrap"> 
<ul> 
<li><a href= "Gallery.html "> </a></li> 
<li><a href = "JB.html"> </a></li> 
<li><a href= "contractme.html"> </a></li> 
</ul> 
<p class = "copyright"> All content copyright 2016</p> 
</div> 
</div> 
</html> 

css有點遺憾,有些只是重複。

#css 
    header { 

background: url(.//277H.jpg) ; 
text-align: center; 
width: 100%; 
height: auto; 
position: absolute; 
    } 

.nav-men li { 
display:inline; 
margin-left: 100px ; 

} 


.nav-men ul{ 


margin: 30px 30px 0px 0px; 
padding: 0; 
list-style-type: none; 
text-align: center; 
text-decoration: none; 

} 



    .nav-men a { 
      color:white; 
} 



    .nav-men a:hover, a:visited, a:link, a:active 
    { 
text-decoration: none; 
} 


h1 { 
font-size: 60px; 
color: white; 
letter-spacing: 0.05em; 
text-transform: uppercase; 
text-align: center; 
font-weight: 700; 
margin-bottom: 20px; 
} 

span { 
    display: inline-block; 
padding: 0.2em 0.6em ; 
border: white solid 10px; 
} 


.kicker { 
    text-align: center; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5em; 
    color: white; 
    } 




    body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 


    .alt-selction { 
     background: black; 
     } 

    .thumb-container { 
max-width: 980px ; 
margin: 0px auto ; 
padding-bottom: 100px; 
     } 

.thumb-unit { 
    display:block; 
    width: 25%; 
    height: 150px; 
    float:left ; 
    } 



    .footer { 
    margin: 30px; 
    background: url(../277H.jpg) ; 
    width: 100%; 
    height: 100px; 
    clear: both; 
    bottom: -53px; 
    left:-30; 
    right:0; 
    position: absolute; 
    background-size: cover; 
    float: left; 
    } 

    .content-wrap { 
    float: left; 
    } 


li {  
display:inline; 
margin-left: 100px ; 
} 


ul{ 

margin: 30px 30px 0px 0px; 
padding: 0; 
list-style-type: none; 
text-align: center; 
text-decoration: none; 

} 

a { 

    color:white; 


} 


    a:hover, a:visited, a:link, a:active { 
text-decoration: none; 
} 

回答

2

這是因爲<header>footer的位置是絕對的。 position:absolute定位在元素相對於最近定位的祖先,而不是相對於定位在視口,等固定。(從here

從類header & .footer卸下position:absolute。然後它會讓你把任何東西放在它們之間。

0

我建議先清理一下你的HTML,把你的頁眉和頁腳放在body元素內,然後正確關閉你的body元素,否則你很可能會遇到其他問題。

看到這個搗鼓一個例子: https://jsfiddle.net/jowxoaca/1/

而且,jonju提到,去除position:absolute頁眉和頁腳會解決您的訂購問題。