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";
}
Related
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>
I created a navigation bar at for my website using an in-line list and then it has been styled. Each <li> is exactly the same but I want the last one to have a different size as i wish to change the width and padding of it.
I have no idea how I am able to do this, I've tried multiple ways but experienced lots of problems along the way. I tried adding styling in the <li> tag on the HTML page, but it changed absolutely nothing, I then tried using the last-child selector which worked to an extent. It allowed me to change the padding of it but not width. But it didn't just change it for the last one but also the first one.
CSS:
.dropdown{
position: relative;
margin: 0 auto;
float: right;
top: 20px;
font-size: 13px;
}
.dropdown li {
float: left;
width: 155px;
background-color:#373737;
position: relative;
border-bottom:1px solid #575757;
border-top:1px solid #797979;
}
.dropdown li a {
display: block;
padding: 10px 8px;
color: #fff;
position: relative;
z-index: 2000;
text-align:center;
}
.dropdown li a:hover,
.dropdown li a.hover{
background: #CF5C3F;
position: relative;
}
.dropdown :last-child li a{
padding: 0px;
width: 40px;
}
HTML
<ul class="dropdown">
<li><a id="page1" href="index.html">Home</a></li>
<li>Internet Architecture
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Four</li>
</ul>
</li>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
</li>
<li>Item One
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
<li><img src="images/contact_white.png" width="30px" height="auto"></li>
</ul>
Does anyone have any idea on how to fix this?
I want the last one to have a different size as i wish to change the width and padding of it.
So if you meant last child of level 1 than use
ul.dropdown > li:last-child {
/* Target */
}
And if you meant each last child of li on 2nd level ul, than use
ul.dropdown > li > ul > li:last-child {
/* Target */
}
Demo
Demo (Just more elements, nothing fancy)
I may be missing something here, but if I understand your question right it's as simple as giving the <li> you want to be the odd one out an id, and then using css to change li#myId..
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.
I'm currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I'm having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.
My CSS can be found below along with an example of the current display and the html used to generate the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#style_me > li > a{
color: #124162 !important;
}
/HTML/
<nav id="navigation" class="navigation">
<ul>
<li class="current">Home</li>
<li>Who Are We?</li>
<li>Why Join Us?</li>
<li>Contact Us</li>
</ul>
/* This is the menu element that needs styling */
<ul id="coolMenu">
/* THis should be blue background white text */
<li>Login / Register
<ul id="style_me">
/* These should be grey background blue text */
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
</ul>
</nav>
Any help would be greatly appreciated. It's been a couple of years since I've had to do any CSS and my memory is a bit flakey!
This should do what you want:
#style_me li a {
color: #124162 !important;
}
(just spaces instead of >) And, perhaps, you won't need that !important.
Update: try even more specific CSS selector if what you posted is being overridden.
#coolMenu li #style_me li a {
color: #124162 !important;
}
I want to build CSS drop down menus.
I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL.
If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I put that UL in a DIV. So how can I do it?
CSS Code:
li{
list-style: none;
float: left;
}
li ul {
display: none;
background-color: #69f;
}
li:hover > div#mDiv {
display: block;
}
.menuDiv{
display: none;
}
li:hover > ul {
display: block;
}
Markup:
<ul>
<li>Heading 1</li>
<li>Heading 2
<div class = "menuDiv" id = "mDiv">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</li>
<li>Heading 3
<ul>
<li>Subitem 4</li>
<li>Subitem 5</li>
<li>Subitem 6</li>
</ul>
</li>
</ul>
Get rid of the > combinator so the inner uls get picked up whether they're in a containing div or not:
li:hover ul {
display: block;
}
If the > in your rules is required change this rule:
li:hover > div ul, li:hover > ul {
display: block;
}
Your problem is that because of your css, the div is shown on :hover, but the inner ul is not.
So you can use #BoltClock's solution or change:
li ul {
display: none;
background-color: #69f;
}
to:
li ul {
background-color: #69f;
}
li > ul {
display: none;
}