Jump to content

lock specific LI to bottom of page


Zane
 Share

Recommended Posts

I'm sure the use of position or a negative bottom margin would do this, but then again, I'm not too sure.  What I'm trying to do is take one specific LI, which has an id of "contact" and place it at the bottom left of the screen in a fixed position.

 

http://reallycheapfloors.com

 

If you look at the source, I have this for the navbar



Contact Us.
About Us
Unfinished
Prefinished
Laminate
JANKA Scale



 

It's CSS contains this

div#nav {
height: 100%;
width: 145px;
background-color: black;
background-color: #8C9AA3;
background:url(gradient.jpg);
background-size: 100% 100%;
font-family:"Arial";
margin: 0px; padding: 0px;
padding-top: 0px;
font-weight: bold;
position:fixed;
color:white;
border-right: 1px solid black;
}
div#nav ul {
list-style:none;
margin: 0px;
padding: 0px;
}
div#nav li  {
padding:6px 3px;
text-align:right;
height: 30px;
}

div#nav li a {
text-decoration: none;
color:#eee;
width:100%;
height:100%;
}
div#nav li {
background-color: 649DE8;
}
div#nav li:hover {
background-color: #1364CF;
color:white;
cursor:pointer;
}
div#nav li:hover a {
cursor:pointer;
}

div#nav li.contact {
background-color:#DB4848;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 22px;	
}
div#nav li.contact:hover {
background-color:#FF3C00;
}

 

What would be the easiest method to move that red Contact button to the bottom of that blue bar.?

Link to comment
Share on other sites

Gah, everytime I post a thread I figure the solution out immediately after.

div#nav li.contact {
# background-color:#DB4848;
text-decoration: none;
color: white;	
font-weight: bold;
font-size: 22px;
position:absolute;
bottom:0px;
left:0px;
width:130px;
}

I suppose this is solved now.

Link to comment
Share on other sites

Gah, everytime I post a thread I figure the solution out immediately after.

div#nav li.contact {
# background-color:#DB4848;
text-decoration: none;
color: white;	
font-weight: bold;
font-size: 22px;
position:absolute;
bottom:0px;
left:0px;
width:130px;
}

I suppose this is solved now.

 

Do you want the <li> to stay in the bottom left of the screen even when the page is scrolled, or just until the page is scrolled?

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.