Assining a facebook icon nuderneath a floating nav bar |
Assining a facebook icon nuderneath a floating nav bar |
TacklitBit |
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 |
pandy |
Aug 1 2018, 08:03 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Could you link to the page so we can see what else you've got?
|
TacklitBit |
Aug 2 2018, 02:11 AM
Post
#3
|
Group: Members Posts: 2 Joined: 1-August 18 Member No.: 26,683 |
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. This post has been edited by TacklitBit: Aug 2 2018, 02:14 AM 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 |
pandy |
Aug 3 2018, 08:01 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
Lo-Fi Version | Time is now: 24th April 2024 - 06:18 AM |