I am trying to make the menu links (under Menu) on the following website fill the full width of the bar. So when you have "Soup & Salad" as active, it extends all the way to the left of the blue bar. There should also be no space between blocks when you hover over the link next to the active state.
http://www.woodonwellington.com/
ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;
}
#menuNav li
{
display: inline;
list-style-type: none;
}
#menuNav a {
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;
}
It happens because your li is set to display:inline; In your code you have an enter and a couple of spaces/tabs between the <li></li> blocks. To fix this you have to write the tags right after eachother. You want to limit the space between those <li> tags.
In stead of this:
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Do this:
<ul>
<li>
Content
</li><li>
Content
</li><li>
Content
</li>
</ul>
Answer on comment:
The same problem appeared on the link itself. As you can see on the image below you made the li elements touch eachother.
Now to make the links touch eachother you have to do the same.
Instead of:
<li>
<a>Link</a>
<li>
Do this:
<li><a>
Link
</a><li>
It is not a nice solution but it will fix your spacing between the links.
you could use display:table/table-cell to acomplish this:
basic CSS to apply:
#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}
remove any floats from CSS to test this. float kills display (unlesss set to flex, but this is another option)
You can simply remove the display: inline; in your .css and add float:left;
#menuNav li
{
list-style-type: none;
background-color:red;
float:left;
}
This will remove all the spaces.
Check this
http://jsfiddle.net/BishanMeddegoda/30w56oft/
Related
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
I have placed one div inside of another, but it keeps appearing below the div it is nested inside. What I want is to get the login div to appear inside the navdiv but push it over to the right of the page.
I can get it over there by adding position absolute, (which I'm also unsure about) but it then behaves in ways I don't want when I resize the page.
Please try to explain what is happening here as simply as possible. Thanks!
http://jsfiddle.net/viggie/5we2wxug/
#navdiv {
display: block;
background-color: blue;
height: 20px;
margin-bottom: 7px;
}
ul {
text-align: center;
}
#navdiv li {
background-color: red;
display :inline;
font-size: 1.3em;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
margin-left:35px;
margin-right:35px;
margin-bottom:4px;
}
#navdiv li a:visited {
color: yellow;
}
#navdiv li:hover {
background-color: green;
}
#login {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
top: 0;
right: 0;
}
#login li {
verticle-align: middle;
}
HTML
<div id="navdiv">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
<div id="login">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
While your #login div is technically inside of #navdiv, #navdiv has a height set which is stopping the background from extending to cover the #login as well - The #login is inside it structurally, but visually it's overflowing the #navdiv area.
So, to stop that bit, simply remove the height from #navdiv.
To align the login to the right, I'd recommend making the #login ul an inline-block that's simply aligned right. You lose the absolute andfloat issues, and it's easy to make responsive.
#login {
text-align: right;
}
#login ul {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
display: inline-block;
}
Note, I also put the background color on the ul since it's more accurate to the #login area - probably you'll want to modify the styling some yet anyways.
http://jsfiddle.net/daCrosby/5we2wxug/1/
Put this code in your css
.left_part { float:left;width:72%;}
.right_part { float:right;width:28%;}
.right_part ul { padding-left:0px;}
and add this in body part
<div id="navdiv">
<div class="left_part">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
</div>
<div class="right_part">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
i just gave you normal idea and now i hope you can manage your own css with this way...hope it helps..
Updated
according to you...just use Float in ul and in login div as login div will not go with ul until you are not using float left or right properties..they have their own css and you have to use float for this...there can be more option but float will help you in your case if you don't want more div..
How can I add an icon in front of a specific list item?
<ul class="rightNav2">
<li id="homeLnk">Home</li>
</ul>
I have the following style for the list items already and I want to add a specific icon in front of one of the items. The image however does not appear.
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
color: white;
}
.rightNav2 #homeLnk {
list-style-image: url('/images/homeIcon.png');
}
There are several methods to add an image to a list item.
Here is one using a background image. http://jsfiddle.net/p05g14zm/
rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 20px;
color: white;
}
.rightNav2 #homeLnk {
background-image: url('http://i.stack.imgur.com/vQ4nM.jpg?s=32&g=1');
background-repeat: no-repeat;
background-size: contain;
}
Try
.rightNav2 #homeLnk:before {
content: url('/images/homeIcon.png');
}
Also you might want to make sure that the image path is correct.
Please check out my codepen... I believe this may help you:
http://codepen.io/anon/pen/myRWmZ
html:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<ul>
<li>Link 1</li>
<li class="home">Link 2</li>
<li>Link 3</li>
</ul>
CSS:
ul {
list-style-type: none;
}
li.home::before {
font-family: FontAwesome;
content: "\f015";
margin-right: 3px;
}
li.home {
margin-left: -18px;
}
So what I did was place an icon using the :before selector. The margin adjustments are meant to ensure that each of the list items still align properly.
The css below would add an icon to the left of the home li element.
.rightNav2{
list-style:none;
padding:0;
margin:0;
}
.rightNav2 li{
padding:0;
margin:0;
}
.rightNav2 #homeLnk {
padding-left: 35px;
/* padding-left above is the width of the icon plus any whitespace between text */
min-height:10px;
/* min-height above is the height of the icon */
background-image: url('/images/homeIcon.png') no-repeat center left;
}
I would as in the answer above recommend considering icon fonts if this a responsive site.
Background images on zoom can become very grainy.
Problem
The list-style-image property determines whether the list marker is
set with an image, and accepts a value of "none" or a URL that points
to the image: ~css tricks
This means that, rather than applying this styling to the li, you're meant to apply it to the parent ul. Something like:
ul {
list-style-image: url(images/bullet.png);
}
So you can't place it on a single element using just this syntax (unless you wanted to use the :first-child selector (not tested))
My Solution
This solution may or may not be of use to you, but it's using pseudo effects (meaning no real 'extra' elements need to be added). The pseudo element would also be clickable, too (with no need of worrying about image sizing, as this would do it for you):
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
position: relative;
display: block;
/*only for demo*/
}
.rightNav2 #homeLnk a:before {
content: "";
height: 100%;
width: 20px;
left: -20px;
top:0;
position: absolute;
background: url(http://placekitten.com/g/20/20);
}
<ul class="rightNav2">
<li id="homeLnk">Home
</li>
<li>another link
</li>
<li>and another link
</li>
</ul>
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
I guess the simple solution i found is below
ul{
display:flex;
}
A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>
I have list items that displayed inline.
I want to align them vertically inside the green div.
<div id="topMenu" class="topMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Documents</li>
<li>Articles</li>
<li>Info</li>
</ul>
</div>
.topMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.topMenu a
{
color: White;
font-weight: bold;
text-decoration: none;
}
.topMenu
{
background-position: center;
background-color: Green;
height: 30px;
font-family: arial, Helvetica, sans-serif;
font-size: 0.8em;
vertical-align: middle;
text-align:center;
}
online demo
You could add line-height:30px; to your li elements, (the same as the height of the menu bar)
Demo
You can just the display of your <li> elements a bit, like this:
.topMenu li
{
display: inline-block;
list-style-type: none;
padding: 6px 10px;
}
Check out an updated demo here
Alternatively, you could add the padding to the <ul> with a new rule:
.topMenu ul {
padding-top: 6px;
}
Check out that version here
In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right".
You have to go with the padding property if you want to be strict xhtml and delete vertical-align.
Furthermore it makes no sense to try to align something vertically, that is displayed inline.
Just consider: padding is the inner space between the element and the boxmodel border.
Internet Explorer didn't support inline-block until version 8.
You might try the work-around here.