Back again, same issue.

+2 wiliam pierce · May 30, 2015
I've been having the same issue for a few months now.
 I'm been trying to post a social media bar within the heading
of my site. I have put the three icons(youtube-twitter-facebook)
in a folder I've named "images". Only the last icon listed in my html5
code is displaying(in this case FB but its whatever is listed last). Also
the css seems to have no effect on these buttons. Is there a reason only the
last icon is listed? and why does the css seem to have no effect? thanks again
to all the help I've gotten these last few months.

                                              HTMLCODE
                                 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>im so tired</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
 <div id="big_wrapper">
<header id="top_header">
<img src="mathy.jpg" alt="here tis" style="width:250px;height:93px">
<h1>Nerdy Poker=Money and Girls</h1>
<h3>A Complete guide to crushing the 1-2 game</h3>
</header>

<div id="social-media-icons">
<img src ="images/youtube.png"/>
<img src ="images/twitter.png"/>
<img src ="images/facebook.png"/>
</div>



<div id="top_menu">
<ul>
<li><a href="#"> Home</a></li>
<li><a href="#"> Tells</a></li>
<li><a href="#"> Charts</a></li>
<li><a href="#"> Tools</a></li>
<li><a href="#"> Videos</a></li>
<li><a href="#"> Blog</a></li>
</ul>
</div>

<div id="left">
<nav id="left">
 <ul>
 <li><a href="#">Mathematics</a> </li>
 <li><a href="#">Semi-Bluffing</a></li>
 <li><a href="#">Bluffing</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#">Live Play Tips</a></li>
 <li><a href="#">SEARCH</a></LI>
 <li><a href="#">Products</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#">Live Play Tips</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#">Live Play Tips</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#">Live Play Tips</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#">Live Play Tips</a></li>
 <li><a href="#">Live Play Tips</a></li>
 </ul>
</nav>
</div>


 <section id="middle">
 <div id="middle_header">

 <article><a href="#">
 <header>
 <hgroup>
 <h1>starting hand charts</h1>
 <h2>what to play and when to play it</h2>
 </hgroup>
 </header>
 <footer>
 <p>your starting place of how to play poker</P>
 </footer> </a>
 </article>
</div>


 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>

 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>
 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>
 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>

 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>

 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>
 <article>
<a href="#">
 <header>
 <hgroup>
 <h1>top 10 all time tips</h1>
 <h2>remember these tips to keep you in the game</h2>
 </hgroup>
 </header>
 <footer>
 <p>this will help you avoid stepping into traps</P>
 </footer> </a>
 </article>
 </article>
 </div>
 <div id="right">
<object width="200" height="230"
data="http://www.youtube.com/v/1hFvxzTMw6k">
</object>
<object width="200" height="230"
data="http://www.youtube.com/v/biMS5tWUmrc">
</object>
<object width="200" height="230"
data="http://www.youtube.com/v/5oibCeJhXNc">
</object>
<object width="200" height="230"
data="http://www.youtube.com/v/5woPCbobdb0">
</object>
</div>
<div id="the_footer">
<ul>
<li><a href="#"> Tells</a></li>
<li><a href="#"> Charts</a></li>
<li><a href="#"> Tools</a></li>
<li><a href="#"> Videos</a></li>
<li><a href="#"> Blog</a></li>
</ul>
</div>
</body>
</html>
  

                                      CSS CODE:

*{
margin:0px;
padding:0px;
}
#big_wrapper{
margin:0px;
}
#top_header{
padding: 5px top;
border:1px solid black;
text-align:center;
float:right;
color: #4169E1 ;
background: #D3D3D3;
margin: 1px 0px 1px 1px;
width:100%;
height:90px;
}

img{
border:1 px solid blue;
position:absolute;
top: 0px;
left: 0px;
}
#social-media-icons{float:right;}
#social-media-icons ul li{display:block;}
#social-media-icons ul {padding-top:10px;}




#top_menu{
background: #4682B4;
color: #280000;
border:1px solid black;
}
#top_menu li {
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px tahoma;
}
#top_menu ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;
}

#left{
float:left;
color: #FFD700 ;
background:#4682B4;
margin:0px 0px 0px 0px;
border:1px solid blue;
width:150px;
height:100%;
}
#left ul{
height:100%;
width:90px;
color: #FFD700 ;
margin:1px;
list-style-type:none;
}  
#left ul li{
background-color: 0000FF ;
color: #4169E1;
margin:5px;
padding:15px;
height:1px;
width:104px;
border: 1px outset #E80000 ;
}
#left ul li a{
background-color: #4682B4 ;
display:block;
width:95px;
height:100%;
text-align:center;
text-decoration:none;
line-height:5px;
}
a{
color: #ffffff ;
}
#middle{
background: #280000;
float:left;
margin:0px 0px 0px 0px;
width:650px;
height:100%;
}
#middle_header{
width: 658px;
text-align:center;
background: #C0C0C0 ;
border-bottom:20px solid gray;
padding: 5px;
margin: 1 px ;
margin-bottom:1px;
}
article {
display:inline-block;
width:45%;
text-align:center;
background: #708090 ;
border:1px solid red;
padding:14px;
margin: 0 auto;
margin-bottom:1px;
height:100px;
}
article footer {
text-align:center;
}
#right{
float:right;
background: #A0A0A0 ;
margin:1px 15px 10px 0;
width:170px;
height:100%;
}

#the_footer{
position:bottom;
background: #A8A8A8;
color: #280000;
border:1px solid black;
}
#the_footer li {
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px tahoma;
}
#the_footer ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;
}





























                                            

Post a Reply

Replies

Oldest  Newest  Rating
0 wiliam pierce · May 31, 2015
all 3 are now displaying. I just have to position them better.
Thank you very very much!
 I'll post on the positioning if I have
positioning issues but again thank you very much appreciated!
0 Siamon Hasan · May 31, 2015
why not change 


img{
   border:1 px solid blue;
   position:absolute;
  top: 0px;
  left: 0px;
}

To 


#top_header  img {
   border:1 px solid blue;
   position:absolute;
  top: 0px;
  left: 0px;
}
  • 1

HTML / CSS / Web Design

107,299 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators