The title is probably kind of confusing.
I have a list of some elements, that each have a CSS hover effect applied (the background lightens). However, I would like each element to fill all of the space in its container, which they currently don't do.
Ex:
How it should be:
In addition, I need the elements to be close together, inline-element style, as seen in the first example. I have looked into display:inline and display:inline-block on a div tag; however, that caused the div to behave like in the first example (the element doesn't fill all of its horizontal space, visible from the hover effect). Ex:
<div style="display:inline-block">Example 1</div>
On the other hand, using a span has the inverse effect, causing a second-example-esque problem. Ex:
<span style="display:block">Example 1</span>
Is there any way to do both? i.e. Is there any type of element or CSS trick with inline-element-like vertical padding and block-element-like horizontal padding?
Add width: 100%
(Demo)
<span style="display: inline-block; width: 100%;">
You may follow something like the following:
CSS:
#nav{
width: 33%;
border: 2px dotted #000;
}
#nav ul{
padding: 0px 0px 0px 0px;
}
#nav ul li {
width: 100%;
list-style: none;
display: inline-block;
}
#nav ul li:hover{
background-color: #ffccaa;
}
#nav ul li a{
padding: 5px 0px 5px 10px;
text-decoration: none;
}
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
Checkout this DEMO
Related
My code works ok if the amount of items li I have is longer than the height of the div container. However, if I only have one item, the border does not fill the empty space.
The following image illustrates the problem
As you can see I'm using a plugin to work with the scrollbar, called perfectScroll.
My code is pretty simple and you can see the issue in JSFiddle.
<!-- This div has a 200px height fixed -->
<div class="col-md-5">
<ul>
<li>Text 1</li>
</ul>
</div>
Try this one then:
ul
{
margin-left: 0px;
border-left: 1px solid #44A4E3;
padding-left: 15px;
min-height: 100%;
}
working fiddle
make the ul height as its parent div
ul
{
margin-left: 0px;
border-left: 1px solid #44A4E3;
padding-left: 15px;
min-height:100%; //ADD THIS
}
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
I have the following mark up:
<ul data-role="listview" data-inset="true" class="stuff site-content lists">
<li>
<div class="nearby"> 20 </div>
<h1> name</h1>
</li>
</ul>
css is:
.nearby{width: 85px;
height: auto;
float: left;
margin-right: 10px;
font-size: 26px;
text-align: center;
padding: 15px 0;
border: 2px #c1c1c1 solid;
background: #fafafa;
}
li{padding: .7em 15px;
display: block;
}
Unfortunately, the div doesn't sit nicely in the middle as it is too tall. Anyway, the li item could also increase in height so that its padding is dependent on the div rather than the h1?
You will have to add the following for it to work:
li{overflow:hidden;}
When setting the parent of a floated element to overflow:hidden; you force it to wrap the entire floated content. This is a very useful technique and it is used alot.
set float:left for ul and li both i always have this problem try it
I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.
As an example, I am looking at this particular nav menu from David Appleyard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
</style>
</head>
<body>
<!-- Grey Menu -->
<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li class="active">About</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?
Also, on a side note, why does he set his #menu li as to display:block?
Here's the breakdown:
display: block;
He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.
View a JSFiddle isolating the padding on an anchor
Note: I only floated the a to keep it from extending the entire width of the iframe
Centering horizontally
The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.
Here's a JSFiddle isolating this centering effect.
Note: The parents being floated left is what causes everything to appear on the same line
Centering vertical
Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;
Here's a JSFiddle isolating the vertical centering.
Other possibilities
You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!
Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.
Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").
Using a list, I want to create a list of links as in the image
<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;">
<ul>
<li id="active"><span><a id="current" href="#add" class="button">News</a></span></li>
<li><span> Updates</span> </li>
<li><span>Contact Us</span></li>
<li><span>Website </span></li>
<li><span>Refresh</span> </li>
</ul>
</div>
I am kind of stuck on the CSS (button) and probably the spacing between the list elements. to make the list appear in this form. Anyone with an idea of how I can tackle this please?
or another way is to use floats, and make the ul display: inline-block to contain the floated li's
you need to slightly change the HTML so the span is inside the a - this is so you can hide the spanned text, but keep the image background and clickable area for the a elements, also I'd give each link a unique reference (class or ID) so the backgrounds can be applied separately.
example HTML:
<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;">
<ul>
<li class="active"><span>News</span></li>
<li><span> Updates</span></li>
<li><span>Contact Us</span></li>
<li><span>Website </span></li>
<li><span>Refresh</span> </li>
</ul>
</div>
you can then put the whole background on the ul and put the individual images on each link.
#toolbarbottom ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background: #ff0;
}
#toolbarbottom li {
float: left;
width: 80px;
height: 80px;
border: 1px solid #000; /* not required, just to show where individual links are */
}
#toolbarbottom li a { /* make link fill the li element */
display: block;
height: 80px;
}
#toolbarbottom li span { /* hide the text */
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip: rect (1px 1px 1px 1px);
}
/* couple examples of where to put individual backgrounds */
#toolbarbottom #mupdates {background: #dad;}
#toolbarbottom #mcontact {background: #0f0;}
fiddle: http://jsfiddle.net/YaS9J/
css
#toolbarbottom li {
display:inline-block;
padding:0 10px;
}
/* if you have one */
#toolbarbottom li img {
display:block;
}
You should first set up your css as an external style sheet rather than hard code it into your html. (See http://www.w3.org/TR/html4/present/styles.html for more on this). To add spacing between the li elements you can use the css cascade to add some bottom padding as follows:
#toolbarbottom ul li {
padding-bottom:4px;
}
To make the list appear inline you would use:
#toolbarbottom ul{
list-style: none;
display: inline;
padding-left: 0;
margin-left: 0;
}
Those button look like images, so to achieve that you'd just include them within each li element:
<li><img src="/path/to/image.jpg"></li>