This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed last month.
I want my button to have a shape like it has on stack overflow Products button.enter image description here
I tried border radius but it wasn't big enough. I tried to search for another options but I didn't found any or didn't understand.
This is my CSS
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
border-radius: 40%;
}
li > a {
color: inherit;
text-decoration: none;
}
nav > ul {
display: inline-block;
vertical-align: middle;
padding: 0.2%;
margin: 0.7%;
What I got from the code
You need to add padding and border-radius as shown below and remove border radius which you have given on :hover
nav > ul > li {
border-radius: 50px;
padding: 10px 15px;
}
Related
This question already has answers here:
My z-index property is not getting set [closed]
(2 answers)
Z-index Won't Work
(3 answers)
Closed 8 years ago.
I have a list that I made is slightly overlapping each element due to the line-height chosen. I would like to have it so that when I hover over each item, the hover animation overlays everything else cover it. I put the z-index on the hover but the hover still stays below some parts.
.sidebar ul {
margin: 0;
list-style-type: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height:20px;
}
a:hover {
color: #424242;
text-decoration: none;
background-color:#424242;
z-index: 100; !important
}
It is tricky, because when you tie the items close to each other you will lose the ability to hover them. Anyway, try this css below. Check this fiddle
Using the property position with fixed or absolute values will stack the items, which I believe is not your intentions to do so. That is why relative is your best friend here
ul {
margin: 0;
list-style-type: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 11px;
}
ul a {
z-index: -10;
position: relative;
}
li:hover a {
color: #424242;
text-decoration: none;
background-color: #424242;
z-index: 100 !important;
}
w3schools zIndex property description:
The zIndex property sets or returns the stack order of a positioned element.
Tip: A positioned element is an element with the position property set to: relative, absolute, or fixed.
You will need to set position to either "relative", "absolute" or "fixed" for your a:hover
So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .
Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle
Use
.cssmenu {
overflow: hidden;
}
Demo here
Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}
I'm working on front-end of an intranet website.
The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.
On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.
Here is the CSS for the list and arrow:
.jt-menu .item-280 li li {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 1px 0 0 1px;
text-align: left;
width: 172px;
list-style: disc inside url("../../../../images/barrow.png");
}
Add this to your CSS:
.jt-menu > li > ul ul li {
width: 240px !important;
}
.jt-menu > li > ul ul a {
display: inline-block;
}
Try adding more left-margin and setting line-height as tall as your image.
This question already has answers here:
Removing ul indentation with CSS
(3 answers)
Closed 4 years ago.
Do you know why I can't remove the margin from my <li> elements? The browser always adds the specific margin for my list, even when I write the code a specific margin. Here is the CSS and HTML code:
#NavLeftList {
height: 57 % ;
width: 15 % ;
position: absolute;
top: 23 % ;
border-style: none;
background: url(images / heaven.jpg);
margin: 0px
}
#NavLeftList ul {
margin-left: 11 % ;
}
#NavLeftList ul li {
text-align: center;
width: 170px;
list-style-type: none;
text-decoration: none;
margin: 10px 0px 0px 0px;
padding: 1px;
}
#NavLeftList li a {
height: 35px;
padding: 10px 0px 0px 0px;
text-decoration: none;
color: #fff;
background: url(images / tabright.gif);
display: block
}
#NavLeftList li a span {
padding: 0px
}
#NavLeftList li a: hover {
color: #7EC0EE;
}
I haven't pasted the HTML code here since it was appearing strangely.
What you’re seeing isn’t a margin on the lis, it’s padding on the ul.
Zero out the ul’s padding.
try list-style-position:inside; on the li. It's probably leaving space that would be filled by the bullet even though you've set list-style-type:none;
Try setting
body{margin: 0;}
or find the containing element for NavLeftList and set that element's margin to 0 as well.
Try following CSS for UL
ul { list-style: none; }
Try making use of a reset.css file which will reset all "default" (and thus different) implementations of paddings and margins in the different browsers.
Example: CSS Reset
I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.
There are two errors in the HTML you would like your help:
The source should not decrease when ally is in bold.
In the event a:hover can not change the size of the tag li.
The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?
I don't know if I understood your question correctly, but can't you put
ul#menu li
{
width:200px; //change this amount...
}
You can prevent the boxes from jumping by
floating the lis
adding a width to the lis
adding left and right padding to the lis
taking the hover off the a and adding it to the lis
--
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
Important:
the bolder text still jumps, but the boxes do not
you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.
I took the liberty to touch your css code to achieve the desired result. It would be:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
What I did was:
Remove padding from li and a elements (it should be 0)
Set the a element to display:block with fixed width and height
Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
Keep the text in the center with line-height and text-align:center
The problem was that padding was pushing the box borders when the element changed its size.