I'm trying to fix this top right, meaning that it stays top right when scrolling, maximizing, and minimizing window. Something like position:absolute; top:0; right:0; .....I can't get it to work. Can you help with syntax?
<div align="center" class="socialbtns">
<ul>
<li>
</li>
<li>
</li>
<li></li>
<li>
</li>
</ul>
</div>
CSS is as follows
#import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #576267;
background-color: transparent;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #576267;
border: 1px solid #000;
}
</style>
Your anchor tags weren't well put together and using the CSS position:absolute with right and top set to 0 to the class .socialbtns.
Run snippet below to see it work
.socialbtns {
position: absolute;
right: 0;
top: 0;
margin-right: 15px;
}
li {
list-style: none;
display: inline;
margin: 5px;
}
a {text-decoration: none;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Related
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I've got a side bar which contains a list, however I want a triangle located at the right side of the div. Now I know about the border trick, but then the text isn't located at the same location where it should be.
JSFiddle: http://jsfiddle.net/ppX53/44/
This is how my code looks like:
HTML:
<li id="activeMenuLi">
Admin Panel
</li>'
CSS:
.multilevelpushmenu_wrapper li #activeMenuLi{
width: 213px;
height: 45px;
border-top: 20px solid transparent;
border-right: 30px solid red;
border-bottom: 20px solid transparent;
}
How it looks like now:
The triangle is not complete, but it needs to be :).I think you know how I want it to look like.
I Use the following sidebar: link.
Note: I am not a complete rookie with CSS. I just hate building sidebars ^^. I'll try building a JSFiddle.
OfficialBAMM
Taking a look at your code, the problem is that you're attempting the "border-trick" on the li itself instead of a :before/:after pseudo-element. If you move the borders to a pseudo-element, it works. I've provided an example below.
body, html {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif
}
h2 {
margin: 0 0 0.5em;
padding: 0.5em;
}
div {
background-color: #40516F;
color: #FFF;
width: 213px;
position: relative;
}
ul, li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
ul { width: 213px; }
li > a {
color: #FFF;
border-top: 1px solid #445675;
padding: 0.6em;
display: block;
position: relative;
text-decoration: none;
}
li > a:hover {
background-color: #364155;
color: #FFE;
}
li.is-active > a:before {
position: absolute;
content: "";
top: 8px;
right: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-left: none;
border-right-color: orange;
}
<div>
<h2><i class="fa"></i>About</h2>
<ul>
<li class="is-active">Our Beliefs
</li>
<li>Our Doctrines
</li>
<li>Our Constitution
</li>
<li>Our Leaders
</li>
<li>Our History
</li>
<li>Church Links
</li>
</ul>
</div>
I've coded a css dropdown menu and cant seem to get the name "LOGOS" to stay within the green box when I hover over the word "Illustration". I've made the word 5em so I can see it. Cant get it to stay in the box...no control of it's position. Can you help?
Thanks,
T.
<div id="nav-bar-sm-cont">
<ul id="sm-nav">
<li id="home">HOME</li>
<li id="about">PROFILE</li>
<li id="illustration">ILLUSTRATION
<ul>
<li id="logos">LOGOS</li>
</ul>
</li>
<li id="billboards">BILLBOARDS</li>
<li id="six-mo">6 MO BREAKFAST</li>
<li id="cal">ARTSHOW</li>
<li id="church">CHURCH</li>
<li id="contact">CONTACT</li>
<li id="cat-ill">CAT ILLUSTRATION</li>
<li id="contact-cat">CONTACT CAT</li>
</ul>
</div>
<!--end nav bar sm container -->
/* START small NAV bar **************************/
#nav-bar-sm-cont { position: absolute;
width: 1000px;
height: 100px;
}
#sm-nav li { position: relative;
top: 30px;
left: 35px;
font-size: .6em;
line-height: 250%;
letter-spacing: 0.3em;
list-style-type: none;
float: left;
}
#sm-nav a:link{ text-decoration:none;
color:silver;
background-color:transparent;
padding: 5px 5px;
}
#sm-nav a:visited {text-decoration:none;
color: #9781B7;
padding: 5px 5px;
background-color: transparent;
}
#sm-nav a:hover {text-decoration:none;
color: #fff;
background-color:#a7d6d5;
padding: 5px 5px;
}
#sm-nav a:active {text-decoration:none;
color:#fff;
background-color: green;
padding: 5px 5px;
}
/*start drop down************************************/
#sm-nav li ul { position:relative;
list-style-type: none;
display: none;
}
#sm-nav li:hover ul { position: absolute;
background: green;
padding: 5px 5px;
display:block;
font-size: 5em;
width: 103px;
height: 10px;
}
/*end drop down*****************************************/
/* END small NAV BAR *****************************/
The problem is that your CSS for the li is affecting both the parent li and the child. To fix that just change:
#sm-nav li {
to
#sm-nav > li {
Now that CSS will only affect the parent li and you're free to adjust the CSS for the child however you want like this:
#sm-nav li:hover ul li { }
JSFiddle
I have been reading and searching the whole day long. I even read this article and tried to work it out but with no success.
So, what I want to do is a CSS menu with sub menus and have the sub menus centered to the page. This is what I have done so far. What I want is that the submenus show up completely centered to the page. Is this possible?
Here's the HTML:
<div id="menu_panel">
<div id="menu_2border">
<div id="menu_section">
<div id='menu1'>
<ul>
<li class='first sub'><a href='#'><span>Hem</span></a>
<ul>
<li><a href='#'><span>Privat</span></a></li>
<li><a href='#'><span>Om Robust</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Koncept</span></a>
<ul>
<li><a href='#'><span>Insikt</span></a></li>
<li><a href='#'><span>Koncept</span></a></li>
<li><a href='#'><span>Aktivering</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Uppdrag</span></a>
<ul>
<li><a href='#'><span>Företag</span></a></li>
<li><a href='#'><span>Privat</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Blogg</span></a>
<ul>
<li><a href='#'><span>Arkiv</span></a></li>
<li><a href='#'><span>Kategori</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Om Robust</span></a>
<ul>
<li><a href='#'><span>Vad erbjuder vi?</span></a></li>
<li><a href='#'><span>Vilka är vi?</span></a></li>
</ul>
</li>
<li class='sub'><a href='#'><span>Kontakter</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
And the CSS:
#menu_panel {
width:100%;
height: 49px;
color:#4b4b4b;
display:block;
border-top:#efefef 1px solid;
}
#menu_2border {
width:100%;
border-top:#7a7a7a 1px solid;
}
#menu_section {
width: 960px;
height: 29px;
margin:auto;
padding: 0 0 0 30px;
color:#4b4b4b;
background-color:#fff;
}
#menu1 ul,
#menu1 li,
#menu1 span,
#menu1 a {
margin: auto;
padding: 0;
position: relative;
}
#menu1 {
height: 29px;
background: #fff;
margin:auto;
}
#menu1:after,
#menu1 ul:after {
content: '';
display: block;
clear: both;
}
#menu1 a {
background: #fff;
color: #4b4b4b;
display: inline-block;
font-size: 15px;
line-height: 29px;
padding: 0px 40px;
text-decoration: none;
}
#menu1 ul {
list-style: none;
/* float: left; */
}
#menu1 > ul > li {
float: left;
}
#menu1 li .mainmenu {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover:after { /* faz as setas debaixo dos items do menu */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 7px solid #fff;
margin-left: -10px;
}
#menu1 > ul > li.sub {
border-right:#d8d8d8 1px dotted;
}
#menu1 > ul > li.first {
border-left:#d8d8d8 1px dotted;
}
#menu1 > ul > li:hover > a {
background: #efefef;
}
#menu1 .sub {
z-index: 1;
}
#menu1 .sub:hover > ul {
display: block;
background-color:#
}
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin:auto;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
#menu1 .sub ul li {
*margin-bottom: -1px;
}
#menu1 .sub ul li a {
background: #fff;
filter: none;
font-size: 13px;
display: block;
line-height: 120%;
padding: 10px 30px;
}
Notice that there are pointing arrows in each item of the menu, and they should stay where they are. What should be centered are the big submenu rectangles.
Many thanks in advance!
I dont explicitly understand your situation, do you need something like this? If so, i will make clear understanding on it.
#menu1 .sub ul { /* faz o formato das caixas do sub-menu */
display: none;
position: absolute;
width: 803px;
height: 189px;
margin-left: -401.5px; /* width divided by 2 */
left: 50%;
border-bottom: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
background: #FFF;
}
Example / Screen Result
You need to apply absolute positioning to your drop down menu, and have it relate to your top-level menu by applying relative positioning only to it. That direct relationship means you can set your drop-down menu to left: 0 and right: 0, sticking it to the left-most side and right-most side respectively of the top-level menu regardless of where it appears in your HTML (ie. it will match the width of your top-level ul).
Because you have set position:relative to a number of items, and some of your code might be dependant on that, I can't easily change your code to make it work. However, I put together this quick demonstration on jsfiddle to illustrate my explanation. I hope it helps.
I have been struggling with this code for quite a few hours now and I have been unable to fix it. This is my CSS for my horizontal navigation:
#topmenu {
position: relative;
width: 690px;
left: 270px;
top: 11px;
}
#nav {
padding: 0px;
margin: 0px;
float: left;
}
#nav li {
float: left;
position: relative;
list-style: none;
margin: 0px;
margin-right: 6px;
}
#nav li ul {
display: none;
margin: -1em 0 0 -3em;
padding: 1em;
padding-top: 1.2em;
position: absolute;
top: 24px;
z-index: 500;
opacity: 0.96;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
display: block;
clear: both;
}
#nav li ul li a {
border-radius: 0px;
width: 125px;
font-size: 11px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 5px;
}
#nav li ul li span {
float: left;
color: #FFF;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
background: #6AC1F3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0px;
width: 145px;
}
#nav a {
float: left;
color: #FFF;
font-size: 13px;
text-decoration: none;
display: block;
background: #6AC1F3;
padding: 5px 25px 5px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-top-left-radius: 10px;
-webkit-top-right-radius: 10px;
}
#nav a:hover, #nav a.selected {
background-color: #FEA14F;
}
And this is my HTML code:
<div id="topmenu">
<ul id="nav">
<li><a class="rounded" href="index.html">Home</a></li>
<li><a class="rounded" href="about-us.htm">About Us</a></li>
<li><a class="rounded" href="contact.htm">Contact</a></li>
<li><a class="rounded" href="#">Services</a>
<ul>
<li><span>Manage</span></li>
<li>IT Management</li>
<li>Helpdesk Support</li>
<li>Planning and Consulting</li>
<li><span>Instruct</span></li>
<li>Software Training</li>
<li>Custom Curriculum</li>
<li>Social Networking</li>
<li><span>Grow</span></li>
<li>Website Design</li>
<li>Website Optimization</li>
<li>Internet Marketing</li>
<li><span>Secure</span></li>
<li>Remote Back Up</li>
<li>Scanning and Storage</li>
<li>Spam and Virus Protection</li>
</ul>
</li>
<li><a class="rounded" href="products.htm">Products</a></li>
<li><a class="rounded" href="real-estate-solutions.htm">Real Estate Solutions</a></li>
</ul>
</div>
The code works in Firefox, Chrome, but I am unable to make it work for IE. I have created additional rules for IE:
body {
behavior: url(csshover.htc);
}
#topmenu {
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
But all the menu does is display the drop-down, but when I try to select an item in the drop-down menu, the menu disappears.
What's the issue?
I see that you've mostly figured this out. You can use a semi transparent png to get the 96% opacity effect.
Alternatively you can use jquery's opacity, which i think is cross browser...
from my experience removing the filter isn't enough. the main problem is that IE li's don't extend to create one uninterrupted sequence, thus leaving empty spaces which aren't covered by the :hover rule, consequently causing the sub-menu to disappear.
the solution is to add a background color or image to the submenu's li and the triggering top menu li, in order to create a continuous sequence of li elements, with no spaces. (transparent background color won't work). if you don't want a background color applied simply add a 1pxX1px transparent PNG background image instead.
hope you find this helpful.