Html和css社交按钮位于页面顶部

时间：2014-08-24 11:36:17

标签： html css icons

我正在尝试将三个社交按钮放到我的页面上，但我只看到页面顶部的半按钮。我想直接到标题中心。我尝试了很多方法，但每次图标都卡住了。黑色的页面顶部是图标。

<!DOCTYPE html>

<HEAD>
<TITLE> FEEL THE GAME  </TITLE>

<LINK href="to.css" rel="stylesheet" type="text/css">

</HEAD>

<body>
<div id="header">

<div class="icons">
<a class="fb-link" href="#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>

<img src="logo2.png">

<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">HOME</a>

</li>
</li>
<li> <a href="#">dropdown #1</a>

<ul>
<li><a href="#">dropdown #1 item #1</a>

</li>
<li><a href="#">dropdown #1 item #2</a>

</li>
<li><a href="#">dropdown #1 item #3</a>

</li>
</ul>
</li>
<li> <a href="#">dropdown #2</a>

<ul>
<li><a href="#">dropdown #2 item #1</a>

</li>
<li><a href="#">dropdown #2 item #2</a>

</li>
<li><a href="#">dropdown #2 item #3</a>

</li>
</ul>
</li>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
</div>
</div>
<div id="wrapper">
<div id="content_area">
<p></p>
</div>
</div>
<DIV ID="footer"></DIV>

<center>
<video width="900" height="550" controls  >
<source src="fifa.mp4" type="video/mp4">
<source src="fifa.ogg" type="video/ogg">
<source src="fifa.webm" type="video/webm">
<object data="fifa.mp4" width="320" height="240">
<embed src="fifa.swf" width="320" height="240">
</object> 
</video>
</center>

</BODY>

</HTML>

CSS

body {
margin:0;
padding:0;
min-width:525px;
font-family: Arial;
font-size: 17px;
background-image:url('fifa2.jpg');
}

#header {
float: left;
width: 100%;
height: 100px;
position: absolute;
background-image:url('purty_wood.png');

}

#footer {
float: left;
width: 100%;
background-image:url('classy_fabric.png');
font-size: 14pt;
font-weight: bold;
text-align: center; 
position: absolute;
height: 40px;
left: 0px;
bottom: 0px;
}

#wrapper {
padding-left: 200px;
padding-right: 200px;
overflow: hidden;
}


#content_area {
position: relative;
float: left;
width: 100%;
padding-bottom: 2000px;
margin-bottom: -2000px;
}


#nav {
background-image:url('classy_fabric.png');
margin-top: 68px;
}
#nav_wrapper {
width: 335px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}


img{
position:absolute;  
right: 640px;
top: -50px; 
}

video {
margin-top: 250px;
}

.fb-link, .twr-link, .inst-link {
display:block; 
width:64px; 
margin-left:20px; 
}
.fb-link{
margin-left:0; 
}

![My page icons stuck top of the page.][1]

1 个答案:

答案 0 :(得分：0)

这应该有效

Fiddle

你有很多不必要的绝对定位。您将img置于绝对位置，这会影响网站上的每张图片。小心一点。

此代码应该有效。您的代码有很多错误，因为有许多未公开的div和列表等。

<!DOCTYPE html>

<head>
<title> FEEL THE GAME  </title>
<link href="to.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="header">
        <div class="icons">
            <a class="fb-link" href="#">
                <img src="facebook-64.png" />
            </a>
            <a class="twr-link" href"#">
                <img src="twitter-64.png" />
            </a>
            <a class="inst-link" href"#">
                <img src="instagram-64.png" />
            </a>
        </div>
        <img src="logo2.png" />
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">dropdown #1</a>
                        <ul>
                            <li><a href="#">dropdown #1 item #1</a></li>
                            <li><a href="#">dropdown #1 item #2</a></li>
                            <li><a href="#">dropdown #1 item #3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">dropdown #2</a>
                        <ul>
                            <li><a href="#">dropdown #2 item #1</a></li>
                            <li><a href="#">dropdown #2 item #2</a></li>
                            <li><a href="#">dropdown #2 item #3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
    </div>
    <div id="wrapper">
        <div id="content_area">
            <p></p>
        </div>
    </div>

    <center>
    <video width="900" height="550" controls>
        <source src="fifa.mp4" type="video/mp4" />
        <source src="fifa.ogg" type="video/ogg" />
        <source src="fifa.webm" type="video/webm" />
        <object data="fifa.mp4" width="320" height="240">
            <embed src="fifa.swf" width="320" height="240" />
        </object> 
    </video>
    </center>
    <div id="footer"></div>
</body>
</html>

和CSS 

body {
    margin:0;
    padding:0;
    font-family: Arial;
    font-size: 17px;
}

#header {
    width: 100%;
    background: #f5f6f7;
    position: relative;
    padding-top:20px;
}

#footer {
    width: 100%;
    background: #f5f6f7;
    font-size: 14pt;
    font-weight: bold;
    text-align: center; 
    height: 40px;
}

#wrapper {
    padding-left: 200px;
    padding-right: 200px;
    overflow: hidden;
}


#content_area { 
    width: 100%;
}

#nav {
    background: #ddd;
    margin-top: 68px;
    display:inline-block;
}

#nav_wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
}

.icons{
position: absolute;
top: 0;
left: 0;
}

.link img {
    display:inline-block; 
    width:32px; 
    margin-left:5px; 
}

.link:first-child img{
    margin-left:0;
}

.centered{
    text-align:center;
}

另外，请确保验证您的网站link，因为您的图片上缺少alt标记，并且您使用的是像<center>这样的淫秽定义。

希望这有帮助。

相关问题
最新问题