Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Assining a facebook icon nuderneath a floating nav bar

Posted by: TacklitBit Aug 1 2018, 04:39 PM

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

Posted by: pandy Aug 1 2018, 08:03 PM

Could you link to the page so we can see what else you've got?

Posted by: TacklitBit Aug 2 2018, 02:11 AM

I cant really link it because its not live yet. I'm just doing a project in order to start a portfolio.

Images are taking me over the allocated file size, but hopefully the attached markup text will allow you to run it / find the fix.

Thanks.

Attached File(s)
home_html.txt ( 2.08k ) Number of downloads: 495
home_css.txt ( 645bytes ) Number of downloads: 497
base_css.txt ( 1.16k ) Number of downloads: 573

Posted by: pandy Aug 3 2018, 08:01 AM

Remove 'position: fixed' from .fa (in both style sheets)
Remove 'position: fixed' from #navigation
Add 'clear: left' to the rule for .fa

Remove 'display: right' wherever you find it and never use it again. There is no such thing.