I have a horizontal list in my markup with the following CSS:
ul li {
display: inline;
list-style: circle;
list-style-type: circle;
}
When I remove the display: inline; it works fine. But I can't get it to work on the horizontal one.
The list decorators will only be displayed if you don't override the display type for the list item. Rather than setting display: inline, apply a float: left and give some margin to prevent the circles from colliding into the previous element.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
Here is an example.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
/* this bit is optional, it only removes the left padding from the first item */
ul li:nth-of-type(1) {
margin-left: 0;
}
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>
well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY.
Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.
For example:
ul li {
display: inline;
}
ul li:before {
content: "• ";
}
or
ul li{
display: inline-block;
}
ul li{
padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}
but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types
Instead of inline, use:
li {
float:left
}
or
li {
display:inline-block
}
Related
I'm trying to figure out with my drop-down list within my nav is not displaying. I
am also trying to understand how to i would render the drop-down list as a class and how it would be specified in the CSS to not get it confused with any of my of unordered lists. Can someone please help and possibly add a class to the dropdown list so i know how to display it?
Here is my code in Jfiddle:
https://jsfiddle.net/CheckLife/rzxxb2kb/4/
In your css you have:
/*Dropdown Nav */
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
position: absolute;
}
The problem here is that you're setting each individual "li" element to display none, so you're hiding each individual list item. If you show/hide the whole unordered list, then your elements will appear. Additionally, you probably want to remove position:absolute so that they stack vertically
/*Dropdown Nav */
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
EDIT:
In order to address the issue of the list pushing all content down, I recommend not using an ul. Instead you could put each a tag in a div and do the following:
HTML:
<li onmouseover="newText()">Players
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
CSS:
.dropdown-content {
display: none;
position: absolute;
// The below was copied from your other css
background-color: #3b63d3;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
}
li:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/rzxxb2kb/5/
Its the position: absolute; on ul li:hover ul li change it to position: relative;
/*Dropdown Nav */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
position: relative;
}
.clear {
clear: both;
}
W3Schools shows how to create Nav bars with drop down functionality
https://www.w3schools.com/css/css_dropdowns.asp
Here is the code : http://jsfiddle.net/o3omng/hrh1s7ss/
When I use float : left to li tags,
li tags go out of div whose class is na_cate.
Please Maintain li tags in center of na_cate,
and make those li tags left aligned.
Set text-align: center; to div.na_cate ul and display: inline-block; to div.na_cate ul li
TRY - DEMO
You could do this:
.na_cate ul {
list-style: none ;
text-align: center;
}
.na_cate ul li {
display: inline-block;
}
You need to clear the float of your container.
.na_cate li {
float:left;
margin-left:20px;
}
.na_cate ul {
list-style:none;
overflow:hidden; /* clearfix */
}
Alternatively, here is another clearfix that doesn't use overflow but pseudo elements instead.
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
I do not know if this is possible, but I'm trying to indent the <li> in red to wrap underneath itself with CSS. I've used text-indent, padding, margin, and cannot get it to work. The <li> in red seems to be set at the same x/y coordinate as the green text. It only lets me push it away from the time (in green).
I can use a table, but I'm trying to accomplish this with CSS.
The image above is where I am at. The image below is what I am after.
HTML
<div class="agendaList">
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
<ul>
<li>Day, Month Date</li>
<ul>
<li>0:00 am</li>
<li>This is where the event description will appear. I would like for it to wrap under itself and not under the time. How do I start the wrap at the first word in the first sentence (This) of this <li>.</li>
</ul>
</ul>
</div>
CSS
.agendaList ul ul {
list-style: disc;
/* list-style-image: url(bullet.gif); */
margin-left: 0;
padding-left: 0;
}
.agendaList ul ul li {
display: inline;
list-style: none;
color: green;
}
.agendaList ul ul li:last-child {
display: inline;
color: red;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Here are two options:
Absolutely position the first li element and then use a margin to add space to the second list item.
Example Here
.agendaList ul ul li:first-child {
position: absolute;
}
.agendaList ul ul li:last-child {
display: inline-block;
color: red;
list-style-position: inside;
margin-left: 65px;
}
Alternatively, a better option would be to set the display of both li elements to table-cell. Add white-space:nowrap to the first li in order to prevent the text from wrapping.
Example Here
.agendaList ul ul li {
display:table-cell;
list-style:none;
color:green;
}
.agendaList ul ul li:first-child {
white-space:nowrap;
}
.agendaList ul ul li:last-child {
color: red;
list-style-position: inside;
padding-left:20px;
}
In my website, I am trying to get the rollover effects working.
Currently, on no mouse hover, the ul li item is displayed as text but on mouse hover, it has a rollover effect to show the image.
Instead of having text in the normal mouse non-hover state, I want to have images.
That means, mouse hover and non-mouse hover are both different images, and there's no text
I wanted to ask how do I get such a rollover effect working, in contrast to what I have currently. (non-mouse hover is text which I want to to change to images as well)
Here is the jsfiddle of how I currently have rollovers: http://jsfiddle.net/PF35v/7/
You have all of the images hidden by default so when you put an image inside the a tag, it is also hidden.
ul#nav li a img { display: block; }
This will make the images in links always visible but the others hidden by default. I think that's what you're asking for.
Here's two different approaches, I'm sure there are others:
HTML-Centric
<ul id="nav">
<li>
<a href="#">
<span>My Text</span>
<img src="http://goo.gl/tYsDU"/>
<img class="hover" src="http://goo.gl/UohAz"/>
</a>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li a img {
display: inline;
}
#nav li a img.hover,
#nav li a span {
display: none;
}
#nav li a:hover img {
display: none;
}
#nav li a:hover img.hover {
display: inline;
}
http://jsfiddle.net/RdRcj/1
CSS-Centric
<ul id="nav">
<li>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 128px;
height: 128px;
background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
display: block;
width: 128px;
height: 128px;
padding: 0;
}
#nav li a:hover {
background-image: url(http://goo.gl/UohAz);
}
http://jsfiddle.net/RdRcj/
The first is probably the "best" from a flexibility standpoint; you don't have to hard-bake the dimensions in like you do the second. However, if they're unchanging, perhaps the second is preferable for your approach, it just takes targeting each li and a specifically, which can prove a little brittle.