1. 首頁
  2. 問答
  3. 如何修復我的投資組合網站的路線？

如何修復我的投資組合網站的路線？

2014-06-27 52 views
-1

我是新來的HTML和CSS，並試圖建立我的第一個投資組合網站。如何修復我的投資組合網站的路線？

我有一些困難，想知道是否有人能帶領我走向正確的方向。我希望我的導航欄保持固定，以便在向下滾動頁面時不會移動。但所有的身體項目都沒有正確對齊。我似乎無法讓我的形象，表格和目標正確對齊。

我想發生：

  • 的圖像是最左邊的頁面中，居中，和下方的導航欄
  • 表對齊圖片正下方（無論圖像，表格也是如此） ps該表只是鏈接到我的社交媒體帳戶
  • 目標是在頁面的右側，圖像旁邊，但它們之間有很多空間
  • 標題是高於目標（無論目標是什麼，標題）
  • 結論：在頁面的右邊應該是客觀和稱號，並在頁面的左邊應該是圖像和表格

問題我有：

  • 標題隱藏在後面導航欄
  • 表，圖像和目標將不會正確對齊

任何幫助將不勝感激，謝謝！

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
<title>FULL NAME</title> 
</head> 

<body> 

<div id="center"> 
<h1>NAME</h1> 
<img src="#"/a> 
<table> 
<tr> 
<td><a href="#"><img src="#"/></a></td> 
<td><a href="#"><img src="#"/></a></td> 
<td><a href="#"><img src="#"/></a></td> 
<td><a href="#"><img src="#"/></a></td> 
<td><a href="#"><img src="#"/></a></td> 
</tr> 
</table> 

<h4>Objective<h4> 

</div> 

<div id="navigation"> 
<ul> 
<li><a href="#">MENU ITEM</a></li> 
<li><a href="#">MENU ITEM</a></li> 
<li><a href="#">MENU ITEM</a></li> 
<li><a href="#">MENU ITEM</a></li> 
<li><a href="#">MENU ITEM</a></li> 
</ul> 
</div> 


<div id="footer"> 
<div id="bottom"> 
<p> &copy; All Rights Reserved by FULL NAME<span class="em"></span></p></div> 
</div> 
</body>  
</html>

CSS

body { 
    padding: 0; 
    margin: 0; 
    max-width: 960px; 
    font-family: Verdana, Geneva, Sans-serif; 
} 

#navigation { 
    position: fixed; 
    top: 0; 
    color: #FFFFFF; 
    height: 50px; 
    text-align: center; 
    width: 100%; 
    margin: 0; 
} 

#navigation li { 
    font-size: 30px; 
    padding-left: -20px; 
    padding-right: -20px; 
    color: white; 
    text-decoration: none; 
    font-family: Georgia, Serif, Times; 
    display: inline; 
    float: left; 
} 

#navigation ul { 
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li { 
    width: 20%; 
    float: left; 
    color: #00131C; 
} 

#navigation a:link, a:visited { 
    color:#FFFFFF; 
    background-color:#000000; 
    text-align:center; 
    padding:6px; 
    text-decoration:none; 
    display: block; 
} 

#navigation a:hover, a:active { 
    background-color:#FFFFFF; 
    color: #000000; 
} 

#circle{ 
    border-radius: 100% 100% 100% 100%; 
    width: 300px; 
    height: 300px; 
    position: center; 
} 

.center { 
    font-family: Verdana, Geneva, Sans-serif; 
    text-align: center; 
    top: 100px; 
    float: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

.center img { 
    float: center; 
    margin-right: auto; 
    margin-left: auto; 
} 

.center p { 
    text-align: left; 
    position: relative; 
    float: right; 
    font-family: Verdana, Geneva, Sans-serif; 
    font-size: 30px; 
    top: -100px; 
} 

.center p{ 
    width: 50%; 
    background: #FFFFFF; 
    border: 5px solid #FFFFFF; 
    border-radius: 10px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    margin: 0 auto; 
    padding: 15px 10px 15px 10px; 
    background: #FFFFFF; 
    position: top; 
} 

.center table { 
    background-color: #FFFFFF; 
    margin-left: 10px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    position: center; 
} 

table img { 
    height: 40px; 
    width: 40px; 
    float: center; 
    position: center: 
} 

#footer{ 
    clear: both; 
    position: relative; 
    bottom: 0; 
    height: 3 px; 
    background-color: #FFFFFF; 
    padding: 0; 
} 

#bottom p { 
    color: black; 
    font-size: 15px; 
    padding-left: -20px; 
    padding-right: -20px; 
    padding-top: 17px; 
    padding-bottom: 17px; 
    text-decoration: none; 
    font-family: Georgia, Serif, Times; 
    float: center; 
    position: center; 
}

來源

2014-06-27 user3781682

回答

相關問題

 相關問題