2013-12-13 55 views
0

我有一個網站,工作正常,看起來不錯,等等。問題是我不是最好的定位,浮動等,而不是隻排隊在另一個下的元素,我必須手動我爲每增加一個段落設置越來越大的利潤率。HTML元素的動態定位

我的導航欄由一個固定div內的ul組成。 ul不是浮動的,但是「li」是。我需要一種方法來定位這個和其他元素,使得一切都在導航欄下方。我曾嘗試使用明確:兩者;無濟於事。我知道我的定位到處都是,我真的不明白如何/如果定位和浮動繼承。

這裏是鏈接到website

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
     <link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css"> 
     <title> 
      Artwork 
     </title> 
    </head> 
    <body> 
     <div class="navbar"> 
     <img src="images/navbar/title.png" class="navbar"> 
      <ul> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="art.html">Art</a></li> 
       <li><a href="about.html">About Me</a></li> 
      </ul> 
     </div> 
     <h1 id="header">Welcome to my Website!</h1> 
     <p> 
      The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on 
      one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>! 
     </p> 
    </body> 
</html> 

CSS:

html{ 
    height: 100vh; 
    width: 100vw; 
    margin: 0px; 
} 

body{ 
    height: 100vh; 
    width: 100vw; 
    margin: 0px; 
    background-color: #009900; 
} 

div.navbar{ 
    height: 50px; 
    width: 100vw; 
    position: fixed; 
    background-image:url('images/navbar/navbar.png'); 
    background-repeat:repeat-x; 
} 

#header{ 
    position: relative; 
    float: left; 
    margin: 40px 0px 0px 5px; 
    font-family: 'League Gothic', sans-serif; 
} 

p { 
    position: absolute; 
    margin: 100px 0px 0px 5px; 
    font-family: 'Ubuntu', sans-serif; 
} 

img.navbar{ 
    float: left; 
} 

ul{ 
    list-style-type: none; 
    margin: 4px 0px 0px 0px; 
    padding: 0; 
    overflow: hidden; 
} 

a:link,a:visited 
{ 
display: block; 
width: 120px; 
font-weight: 500; 
font-family: 'Ubuntu', sans-serif; 
color: #FFFFFF; 
text-align: center; 
padding: 4px; 
margin: 0px; 
text-decoration: none; 
} 

li{ 
    float: left; 
{ 

回答

0

耶代替人工給裕你爲什麼不使用保證金對整個包裝的內容都遵循固定的導航欄check this fiddle

.nav-bar{ 
    height:50px; 
    overflow:hidden; 
    background-color:#000; 
    width:100%; 
    position:fixed; 
    top:0px; 
    left:0px; 
} 

.content{ 
    margin-top:75px; 
} 

and the html

<div class="nav-bar"> 
    <h1> 
     topbar 
    </h1> 
    <ul> 
     <li>one</li> 
     <li>tow</li> 
     <li>three</li> 
    </ul> 
</div> 
<div class="content"> 
    <h2>content</h2> 
    <p>hi hello ouyasd asdasda dasdasd</p> 
    <p>hi hello ouyasd asdasda dasdasd</p> 
    <p>hi hello ouyasd asdasda dasdasd</p> 
    <p>hi hello ouyasd asdasda dasdasd</p> 
</div>