The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Assining a facebook icon nuderneath a floating nav bar
TacklitBit
post Aug 1 2018, 04:39 PM
Post #1





Group: Members
Posts: 2
Joined: 1-August 18
Member No.: 26,683



Hi,

Im new to this and im stuck. I've got a vertical, floating nav bar on the left side of my page, which is fine (please dont laugh at my markup, it works lol). In addition to this i want to display a facebook icon directly beneath the nav bar, that also floats, but isnt joined to the nav bar as such. I've been playing around for a while, and i cant for the life of me get the facebook icon to sit beneath the nav bar. I dont know whether to display the class within the <ul> tags or even provide it with its own <li> tags, but nothing i do is working. The markup i have below (I hope what ive provided helps) is currertly set up to include the facebook icon as an additinal link in the nav bar (image attached), rather than dispalying the icon outside of the nav bar but sitting diretly underneath it. Can anyone help? Tom hanks.


HTML..........................................................................................................................................................................
<div id="navigation">
<ul>
<li><a href="home.html" class="active">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact Us</a> </li>
<a href="#" class="fa fa-facebook"></a>
</ul>
</div>

CSS...............................................................................................................................................................................
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: FFFFFF;
border: 1px solid #555;
float: left;
}

#navigation li a{
display: block;
padding: 8px 16px;
border-bottom: 1px solid #555;
color:black;
}

#navigation {
padding-bottom: 50px;
position: fixed;
margin-left: 20px;
}

.active {
background-color: pink;
color: white;
}

li a:hover {
background-color: #F0F8FF;
color: #FFC0CB;
}

.fa {
padding: 20px;
font-size: 50px;
width: 50px;
text-align: center;
text-decoration: none;
}


Edit - It wont let me attached an image

This post has been edited by TacklitBit: Aug 1 2018, 04:41 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st February 2019 - 03:40 AM