I am trying to put three social buttons to my page but I only see half button top of my page. I am trying to get straight line to center of header. I have tried many ways but every time icons get stuck.Black spot top of the page is icon.
<!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]
This should work
You had a lot of unnecessary absolute positioning. You put your img absolutely positioned, and that affected every image on site. Be careful about that.
This code should work. Your code has many errors in that there are many unclosed divs and lists etc.
<!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>
And 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;
}
Also make sure you validate your site link because you have missing alt tags on your images, and you're using obsolite definitions like <center>.
Hope this helps.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다