The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Aug 1 2018, 08:03 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Could you link to the page so we can see what else you've got?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TacklitBit
post 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)
Attached File  home_html.txt ( 2.08k ) Number of downloads: 495
Attached File  home_css.txt ( 645bytes ) Number of downloads: 496
Attached File  base_css.txt ( 1.16k ) Number of downloads: 572
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 3 2018, 08:01 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:59 AM