I'm looking for any nice way to automatically put the list disc marker above text instead of at the left. Like so :
I'm currently using something like :
<li>
<br />
Item 1
</li>
<li>
<br />
Item 2
</li>
<li>
<br />
Item 3
</li>
To force the text to be placed under the dot but in one hand adding line breaks before text in each list item makes the source quite confusing and one the other hand, it does not do what I expect, since even with a text-align: center the dot appears slightly on the left because of an implicit margin on the right of each dot.
Maybe am I missing some CSS property or my approach is not good.
Any advice is welcomed, thanks.
li {
display: inline-block;
background: pink;
}
li::before {
content:'•';
display: block;
text-align: center;
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
Those solutions do not change <li> default behavior.
DEMO 1
HTML (with br tag)
ul {
list-style-position: inside;
background: yellow;
overflow: hidden;
}
li {
float: left;
text-align: center;
}
<ul>
<li><br />Item 1</li>
<li><br />Item 2</li>
<li><br />Item 3</li>
</ul>
DEMO 2
HTML (no br tag)
ul {
list-style-position: inside;
background: yellow;
overflow: hidden;
}
li {
float: left;
text-align: center;
}
li:before {
content: "";
display: block;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Related
I'm having a problem displaying a bulleted list like what is on the image attachment link. I've already tried almost possible CSS combination but unable to achieve what I want:
My code goes something like this:
.sunco-listed {
width: 500px;
}
.sunco-listed ul {
text-align: center;
}
.sunco-listed li {
float: left;
padding-right: 25px;
}
.sunco-listed li:nth-child(1) {
list-style: none;
}
<div class="sunco-listed">
<ul>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
</ul>
</div>
Any assistance/help would be highly appreciated.
flex on the parent will retain the list-item bullets, with justify-content: center and flex-wrap: wrap so they'll wrap with the limited width, then use :first-child and :last-child for the first/last effect.
.sunco-listed {
width: 500px;
}
.sunco-listed ul {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.sunco-listed li {
padding-right: 25px;
}
.sunco-listed li:first-child {
list-style: none;
}
.sunco-listed li:last-child {
font-weight: bold;
}
<div class="sunco-listed">
<ul>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
<li>Spare parts 1</li>
</ul>
</div>
I have the following code:
HTML
<ul class="menu">
<li>Item 1</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4</li>
</ul>
CSS
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
Items 1 and 4 work fine but there is one extra space before items 2 and 3 (right after the bullet). I know that's because there is a new line in HTML for these items. However, everything works fine without the ul.menu li::before rule.
I'm sure I'm missing something obvious. Does anyone have an idea how to get rid of the extra space and still preserve new lines in HTML? Some neat solution maybe, rather than just ul.menu li a::before (this one is not good, it makes the bullets clickable as well).
JSfiddle
P.S.: same problem appears even without display: flex; so it's obviously not flexbox-related.
The space you see is a characteristic of all inline elements - just add display: flex to the li too.
See demo below and my updated Fiddle:
body {
font-family: sans-serif;
}
ul.menu {
display: flex;
list-style: none;
}
ul.menu li::before {
content: "\2022";
}
ul.menu li {
display: flex;
}
<ul class="menu">
<li>Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
<li>Item 4
</li>
</ul>
You have to write <li> for item2 and item3 in same line it will remove space.
Try this code. It works.
JSFiddle
HTML
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS
body
{
font-family: sans-serif;
}
ul.menu
{
display: flex;
list-style: none;
}
ul.menu li::before
{
content: "\2022";
}
I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
Current Render: http://i.imgur.com/UNPCOfc.pngDesired Render: http://i.imgur.com/8t6c2XM.png
Hello,
In the example below, I would like my logo element (id="logo") to appear between my 3rd and 4th li element. That is, I want to make it appear exactly in the center of its parent, but still reside in the normal flow with its siblings.
I cannot simply place the logo element in the correct position, because the li elements are automatically generated and are of an unknown amount.
A CSS-only solution would be preferable, if possible.
Thanks!
<style type="text/css">
ul {
width: 100%;
display: table;
}
li {
display: table-cell;
}
#logo {
width: 100px;
height: 100px;
background-color: black;
}
</style>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li id="logo"></li>
</ul>
As CSS solution you can do it like the following code:
Note: you need to add different id attribute for each li element
<style type="text/css">
ul {
display: block;
width: 700px;
overflow: hidden;
zoom: 1;
}
li {
width: 100px;
}
li#menu-item-80,
li#menu-item-81,
li#menu-item-82,
li#logo {
float: left;
}
li#menu-item-83,
li#menu-item-84,
li#menu-item-85 {
float: right;
}
#logo {
width: 100px;
height: 100px;
background-color: black;
}
</style>
<ul>
<li id="menu-item-80">Nav 1</li>
<li id="menu-item-81">Nav 2</li>
<li id="menu-item-82">Nav 3</li>
<li id="menu-item-83">Nav 4</li>
<li id="menu-item-84">Nav 5</li>
<li id="menu-item-85">Nav 6</li>
<li id="logo"></li>
</ul>
As Javascript jQuery solution, you can reorder menu items by appending the last item after the third item as the following jQuery code
<script>
jQuery(document).ready(function ($) {
$('ul li:eq(2)').after($('li#logo'));
});
</script>
Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.
I'm very new at css so please bear with me. thanks
Any help would be appreciated.
Desired:
Item 1 Item 2 Item 3 Item 4 Item 5
Currently:
Item 1 Item 5 Item 4 Item 3 Item 2
CSS
#navlist li
{
display: inline;
}
#navlist #right
{
float: right;
margin-right: 10px;
}
#navlist li a
{
text-decoration: none;
}
HTML
<div id="navcontainer">
<ul id="navlist">
<li>Item 1</li>
<li id="right">Item 2</li>
<li id="right">Item 3</li>
<li id="right">Item 4</li>
<li id="right">Item 5</li>
</ul>
</div>
Try using display: table in your CSS:
#navlist
{
display: table;
}
#navlist li
{
display: table-cell;
padding-right: 10px;
white-space: nowrap;
}
#navlist li:last-child
{
padding-right: 0;
}
#navlist li.span-full
{
width: 100%;
}
And your markup now looks like this:
<div id="navcontainer">
<ul id="navlist">
<li class="span-full">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Here's an updated fiddle: http://jsfiddle.net/QfD6J/7/
You can do it like this jsFiddle example
Using this CSS
#navlist li {
display:inline-block;
list-style-type:none
}
#navlist li:nth-of-type(1) {
margin-right:60px;
}
You can also use float:left instead of display:inline-block
Just put
float: left;
inside #navlist li and #navlist #right.
Why not using 2 lists with one floating on the right? http://jsfiddle.net/rEc3V/
<div id="navcontainer">
<ul class="nav pull-right">
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul class="nav">
<li>Item 1</li>
</ul>
</div>
CSS:
.nav {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
}
.pull-right {
float: right;
}
this seems to work jsfiddle.net/Z3a6Z/23. thanks everyone for the direction.