I'm trying to add space between a bottom border line and my <li> item but no luck.
My code:
<div class="menuwrap">
<div class="menu">
<ul>
<li>Home
</li>
<li>Query
</li>
<li>Reports
</li>
</ul>
</div>
</div>
CSS styles:
.menu {
color: #000;
background: #FFF;
}
.menu ul {
list-style: none;
display: inline;
float: left;
padding-left: 40px;
margin-top: 90px;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a:hover {
padding: 0 10px 0 10px;
font-size: xx-large;
border-bottom: 1px solid white;
border-spacing: 20px;
}
.menu li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: large;
}
.menuwrap {
overflow:hidden;
}
I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.
Adding a padding-bottom or margin-bottom seems to be working.
li:hover{
padding-bottom: 10px;
}
Here's a FIDDLE
or
li:hover{
margin-bottom: 10px;
}
Here's a FIDDLE
Update: After reading your comment and having a look at the fiddle you provided, I've created one which does what you are trying to do. It's different from the code you provided but it's easier to read and you can modify it according to your needs
.menu{
list-style-type: none;
}
.menu li{
display: inline-block;
*display: inline;
zoom: 1;
margin: 10px;
}
.menu li a{
text-decoration: none;
color: #000;
border-bottom: 2px solid #000;
padding-bottom: 30px;
}
.menu li a:hover{
font-size: 2em;
font-weight: bold;
}
FIDDLE
I guess you didn't give your styles. padding-bottom works. Please check http://jsfiddle.net/VZCrq/8/
Related
I'm trying to justify variable number of li elements, to fill the width of a ul block with equal spacing between them. It would be important to have minimal distance between the elements.
I tried various solutions from StackOverflow answers, for example https://stackoverflow.com/a/10020586/3897243, but none of them worked out for me.
HTML:
<ul class="clearfix">
<li>Covenantal
</li>
<li>Inyoite
</li>
<li>Myopical
</li>
<li>Funiculate
</li>
<li>Uncompromisingness
</li>
</ul>
CSS:
li {
float: left;
list-style: none;
font-size: 20px;
line-height: 1.5;
display: inline-block;
}
ul::after {
width: 100%;
display: inline-block;
content: ".";
visibility: hidden
}
li {
display: inline-block
}
https://jsfiddle.net/r1mw5j9h/
Using display:table; width:100%; on your wrapping <ul> and display:table-cell; text-align:center; on the <li> will ensure that all elements will fit side by side using the minimum available width and will split the available padding evenly when there is more space to give.
See your updated fiddle here: https://jsfiddle.net/r1mw5j9h/2/
if you want space between each elements then try setting
li {
float: left;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
padding:5px; // try adding padding
}
padding property will give you space between elements.
is that what you want?
ul, li {
padding: 0;
margin: 0;
}
ul {
background-color: #888;
text-align: center;
}
ul > li {
display: inline-block;
vertical-align: middle;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
}
ul > li a{
display: block;
color: #fff;
text-decoration: none;
padding: 0 15px;
border: 1px solid #000;
}
<ul>
<li>Covenantal
<li>Inyoite
<li>Unpollutable
<li>Bibliopolical
<li>Vibrato
<li>Myopical
<li>Funiculate
<li>Indesignate
<li>Uncompromisingness
</ul>
I've posted my codes on JsFiddle. Problem is if i hover a link that background color does not appear fully. Background color only appears for the text only. i want that background color should appear based on the particular width and height of the link.
HTML :
<div id="menu">
<ul class="menubar">
<li>link</li>
<li>link1</li>
<li>link2
<ul class="sidemenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
CSS :
body
{
background: rgba(120,120,120,0.1);
padding: 0;
margin: 0;
}
#logo
{
height: 50px;
}
#menu
{
background-color: #CC0000;
height: 40px;
}
.menubar
{
list-style-type: none;
text-align: center;
width: auto;
position: relative;
}
.menubar li
{
display: inline-block;
padding: 10px 20px 5px 20px;
}
.menubar li a
{
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.menubar li a:hover
{
background-color: rgba(255,255,255,0.3);
}
.sidemenu
{
display: none;
}
.menubar li:hover .sidemenu
{
display: block;
}
.sidemenu
{
background-color: #CC0000;
position: absolute;
height: 40px;
width: 70px;
height: 100px;
}
.sidemenu li a:hover
{
background-color: rgba(255,255,255,0.3);
}
If you apply the effect on the <li>, the hover effect will work, but the dropdown won’t show until your mouse is perfectly placed on the link itself. This can be confusing for the user since the effect and the result differ.
I suggest you apply the padding to the link instead so the link area is bigger. It fix the visual problem and also improve the experience.
.menubar li {
display: inline-block;
}
.menubar li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
Here’s a complete Fiddle with some extra fixes to your dropdowns.
Simply change this:
.menubar li a:hover
To this:
.menubar li:hover
This will apply the background to the whole list item when hovered.
Updated fiddle.
change
.sidemenu li a :hover
{
background-color: rgba(255,255,255,0.3);
}
with
.sidemenu li:hover
{
background-color: rgba(255,255,255,0.3);
}
FIDDLE
I am trying to make my nav span the entire div, I want their background colour/target to have a width of 33%
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
#nav1 {
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
}
#nav2 {
background-color: #c73d00;
color: white;
padding: 10px 100px 10px 100px;
font-size: 1.3em;
text-decoration: none;
}
There are a couple things wrong with your setup (for example: you have multiple ids, which is a no-no, so I've changed them to classes).
I've also gone through and tried remove some repetitious styling. So you'll see that a lot of the button styles have been condensed into one #nav a style, then the custom colours have been applied in separate styles.
I've set the font-size property in #nav to 12px, but that was only for demonstration purposes. Please edit this to your liking.
This fiddle should help:
Fiddle:
http://jsfiddle.net/fACmM/
HTML:
<div id="nav">
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</div>
CSS:
#nav
{
width:100%;
font-size:12px;
}
#nav a
{
width:33%;
float: left;
color: white;
padding: 10px 0px;
font-size: 1.3em;
text-decoration: none;
text-align:center;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}
Added display:block to your CSS.
See fiddle: http://jsfiddle.net/djwave28/audAt/6/
<nav>
<ul>
<li>Home
</li>
<li>Lesson 1: Intro
</li>
<li>Lesson 2: Creating a Project
</li>
</ul>
</nav>
nav ul {
list-style:none;
}
nav ul li {
float:left;
width:30%;
}
#nav1 {
position:relative: float:left;
background-color: #a43200;
color: white;
text-decoration: none;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
display:block;
}
#nav2 {
display:block;
position:relative: float:left;
background-color: #c73d00;
color: white;
padding: 10px 0px 10px 0px;
font-size: 1.3em;
text-decoration: none;
}
use class instead of id by the way this article help you understand why you used class instead of id with your current code
html
<nav>
Home
Lesson 1: Intro
Lesson 2: Creating a Project
</nav>
css
nav {width:960px}
nav a {
float:left;
text-decoration: none;
padding: 10px 50px 10px 50px;
font-size: 1.3em;
color: white;
}
.nav1 {
background-color: #a43200;
}
.nav2 {
background-color: #c73d00;
}
working demo
hope this help you
I have a small design problem in my css, and I'd like to know if someone could check it out for me. The design problem is in the rollover effect of my horizontal navigation. There seems to be some sort of added margin or padding, but I'm having trouble finding the problem in the css. I will paste the code I'm using below, so you can see for yourself. You won't be able to see the problem until you rollover the navigation list items.
HTML:
<div class="Horiznav">
<ul>
<li id="active">Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
CSS:
.Horiznav {
background: #1F00CA;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
display: inline;
}
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
background: #16008D;
color: #fff;
}
#active a { border-left: 1px solid #fff; }
Since you have the li elements display:inline the problem (extra gap to the left of each menu/list item) is as a result of the white-space in the HTML markup. You can either:
A - Get rid of the white-space in the HTML:
<ul><li id="active">Link #1</li><li>Link #2</li><li>Link #3</li><li>Link #4</li><li>Link #5</li></ul>
B - Or, use the font-size:0 trick:
Set font-size:0 on the ul container and override this with font-size:whatever on the li child elements:
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
font-size: 0; /* #1 */
}
.Horiznav ul li {
display: inline;
font-size: 16px; /* #2 */
}
http://jsfiddle.net/EZSvC/4/
C - Or, use a floated layout:
Float the li elements (they are then implicitly displayed as blocks) and clear the floats on the ul container with overflow:hidden. However, you will need to give the container width and apply margin:0 auto if you want it centred.
http://jsfiddle.net/EZSvC/5/
just add "display:inline-block" in "Horiznav ul li a" in you css
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
display:inline-block;
}
here is the jsFiddle file
hope this will solve your problem.
I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help.
Here's my HTML code:
<div id="container">
<ul id="nav">
<li class="active">Home</li>
<li>Teaching Assistants</li>
<li>Course Info</li>
<li>Time Table</li>
</ul>
</div>
and Here's the CSS file:
#container {
position: relative;
top: -2em;
z-index: 2;
width: 1200px;
margin: auto auto;
}
#nav {
position: relative;
float: left;
margin-left: 400px;
}
#nav li {
list-style: none;
float: left;
border-right: 1px solid #afc4cc;
}
#nav li a {
position: relative;
z-index: 2;
float: left;
padding: 5px 45px;
font-size: 15px;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
color: #39aea8;
}
ul, li {
margin: 0;
padding: 0;
}
ul#nav li a:link,ul#nav li a:visited {
color: #39aea8;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #f4ba51;
text-decoration: none;
}
There's something wrong with your CSS code. Just replace this:
ul#nav li a:hover,ul#nav li a:active{
}
with this:
ul#nav li a:hover,ul#nav li.active a{
// here styling
}
and you are good to go. You just made a mistake while calling the active class in CSS.
ul#nav li.active a { color: #f4ba51 ; }