I am making a to-do checklist webapp and I am using Raphael SVG icons as the checkmarks and status icons next to the list items.
As far as I know, this means that I can't use the standard unordered list bullet-point deal.
Here is what I am using for the list items:
<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>
I insert the checkmark icon inside the item-status class span with Javascript (Raphael).
and here is my CSS
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
padding-left: 14px;
}
span.item-status {
display: inline-block;
vertical-align: top;
margin-top: -5px;
cursor: pointer;
}
span.item {
vertical-align: top;
}
That's fine if the "list item" is less than one line, but if it is more than one line it makes it look like this:
and I want it to look more like this (mockup):
TL;DR: I want it to look like that second picture, not the first.
this looks like something along those lines to me:
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
padding-left: 14px;
}
span.item { width: 7em; }
span.item-status, span.item {
display: inline-block;
vertical-align: top;
margin-top: -5px;
cursor: pointer;
}
</style>
<ul>
<li class='list-item'><span class='item-status'>*</span>
<span class='item'>List Item 2 List Item 2 List Item 2 List Item 2 </span></li>
<li class='list-item'><span class='item-status'>*</span>
<span class='item'>List Item 3 List Item 3 List Item 3 List Item 3 </span></li>
</ul>
Since this is structurally tabular data, a table element is the most natural solution. It is also the most robust, since it works even when CSS is disabled:
<table>
<caption>List Title</caption>
<tr valign=top><td>✓<td>List Item Lorem Ipsum Dolor Sit Amet This is a
pretty long to do people really shouldn’t make
them this long
<tr valign=top><td>✓<td>List Item 2
</table>
You can use CSS to make the list title appear in large size and bold
For simplicity, I have used the CHECK MARK character. Replacing it by the use of an icon font trick does not affect the problem presented. (But I would use a simple image rather than such a trick.)
Related
for a website I'm creating, I want to insert list items with different kind of numberings (many are custom) I have to reproduce the same style of the picture below::
so I was thinking that the best solution it is to manually create the left part where you insert the numbering, I want to use list items, manually inserting the numbering but I want to keep the effect that forces the text in line out from underneath the number, like there is when using the 'numbered list' option in Word. What is the most simple solution to do so? Consider that I need to do that sticking to this schema (since I'm using a javascript that enables text to expand/collapse items)
ul,
#myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
user-select: none;
font-size: 16px;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.baret {
cursor: pointer;
user-select: none;
}
.baret::before {
margin-top: 10px;
content: "\1F4DA";
color: black;
display: inline-block;
margin-right: 6px;
}
.bested {
display: none;
margin-left: -40px;
}
.active {
display: block;
}
.spacing {
margin-bottom: 10px;
}
.spacing2 {
margin-left: 20px;
}
<ul class="nested">
<div class="spacing"></div>
<li>(1) Something has a cause.</li>
<li>(2) There are no causal loops.</li>
<li>(3) Nothing has an infinite causal history.
<div class="tooltip">ⓘ<span class="tooltiptext">This is causal finitism. Note that causal finitism is consistent with there being actual infinities.</span></div>
</li>
<li>(4) So, there is an uncaused cause (1-3).
<div class="tooltip">ⓘ<span class="tooltiptext">Suppose x causes y, and that everything has a cause. So, y has a cause, z. Since (2) implies all causes are distinct, z must also have a cause, ad infinitum. I.e., x must have an infinite causal history,contra (3). QED.</span></div>
</li>
<li>(5) If there is an uncaused cause, God exists.</li>
<li>(6) Therefore, God exists.</li>
<li><span class="baret"> </span>
<ul class="bested">
<li>Alexander Pruss, <i>Infinity, Causation, and Paradox</i> (Oxford, 2018). Alexander Pruss, “Paradoxes of Infinity and the First Cause,” in Rasmussen and Vallier (eds.), <i>A New Theist Response to the New Atheists</i> (Routledge, 2020), ch. 1.</li>
</ul>
</ul>
</li>
</ul>
The easiest way is to use list-style: none and x:before {contents: xyz }
.foo {
list-style: none;
}
.foo li:nth-of-type(1):before {
content: "> ";
}
<ul class="foo">
<li>Element One</li>
<li>Element Two</li>
<li>Element Three</li>
</ul>
Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.
you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/
You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}
Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.
I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.
My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.
This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?
I would be very grateful. Thanks in advance.
Edit: Here's an example of what I ment: Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/
I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.
Your can use toggleSlide method in two lines like
$(function(){
$('button').click(function(){
$('ul').slideToggle();
});
});
ul {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:
$('[data-toggle]').on('click', function(e){
e.preventDefault;
var thisLink = $(this);
var toToggle = $( thisLink.data('toggle') );
toToggle.slideToggle(200);
})
* {
font-family: sans-serif;
}
.toggle-menu a {
display: block;
float: right;
padding: 5px 20px;
text-align: center;
background: none #F1B475;
cursor: pointer;
}
#menu-main {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#menu-main a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
#menu-main a:hover,
#menu-main a:focus {
background: none #D0812D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
<p>
HALLO
<a data-toggle="#menu-main" title="Click to toggle">+</a>
</p>
</div>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<p>
Other content
</p>
Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground
I have tried to combine a span element and a list that uses in-block formatting. There seems to be so misalignment of the elements.
Also, would anyone know how to wrap the elements within a fixed width?
Her's a link
<http://jsfiddle.net/joewaldronrit/3nhdnbL8/#&togetherjs=97QmIzvPKD>?
CSS:
.word-sugg-hint{
position:absolute;
top: 50px;
text-align: left;
font-size: 12px;
padding-right: 0px;
color:rgb(32,106,138);
}
.sugg-details{
display:inline-block;
text-align:left;
}
ul.suggestion-list li{
display: inline-block;
font-size: 14px;
height:0px;
}
ul.suggestion-list{
display: inline-block;
font-size: 12px;
margin-left: 0px;
padding-bottom:3px;
}
ul.suggestion-list li:hover{
color:rgb(105, 131, 73);
cursor:pointer;
text-decoration: underline;
}
ul.suggs.suggestion-list li{
/*
width:180px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
*/
float: left;
height: 20px;
color:#0000FF;
font-size:14px;
display:inline-block;
padding:0px;
}
Javascript:
var crateItems = ["apples", "bananas", "grapefruit"];
var suggList = document.getElementById("suggestion-list");
for (var i = 0; i < suggList.children.length; i++) {
if (crateItems.length === i) break;
suggList.children[i].innerHTML = crateItems[i] + (i < crateItems.length - 1 ? "," : "");
}
HTML
<div class="word-sugg-hint" id ="sugg-div">
<h class="sugg-details"> Did you mean? </h>
<ul id="suggestion-list" class="suggestion-list suggs">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
This answer assumes that instead of an <h> element, you mean <span>.
The main reason your elements were misaligned was your float:left was clashing with your display: inline-block. That solved your first problem. Your second question, how to wrap elements within a fixed width. If you see my jsFiddle, I simply wrapped the span and ul with a div that had a class called 'wrap'. I gave that element a fixed width. I also gave it a background color so you can easily see the width of each div. Because div's are block elements, I had to make it display as inline-block. You will see the text is aligned, and the widths are the same. Take away the background color, and I think it renders the way you wish: http://jsfiddle.net/3nhdnbL8/2/
As a greater take away, may I suggest, when working with CSS to get the desired look, too often we keep adding stuff. It is important to remember that when you add something, that may clash with something that already exists. Each time you want to add something, I would first ask if there is anything you should take out. It is a good idea to plan our CSS the same way we plan our JavaScript. Too much CSS causes a great deal of conflicts, and can become very difficult to debug.
Good luck.
This question already has an answer here:
How to highlight active tab on the website menu?
(1 answer)
Closed 9 years ago.
My question is :
I have a menu items, and I want to highlight the active tab that users switch to that points to another page for sure .
stackover flow use :
.nav {
float: left;
font-size: 125%;
}
.nav ul {
margin: 0;
}
.nav li {
background: none repeat scroll 0 0 #777777;
display: block;
float: left;
margin-right: 7px;
}
**.nav .youarehere {
background: none repeat scroll 0 0 #FF9900;
}**
.youarehere a {
color: #FFFFFF;
}
.nav li:hover {
background-color: #FF9900;
}
.nav a {
color: #FFFFFF;
display: block;
padding: 6px 12px;
text-decoration: none;
}
Can anybody tell me what else they use to make this work ?
menu :
<ul class="nav">
<li> <a href="{$smarty.const._URL}/index.{$smarty.const._FEXT}" class="wide-nav-link menu_link" >{$lang.homepage}</a></li>
<li class="dropdown">
{$lang.category} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_video_categories}
</ul>
</li>
{if $smarty.const._MOD_ARTICLE == 1}
<li class="dropdown">
{$lang.articles} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_article_categories}
</ul>
</li>
{/if}
<li> {$lang.top_videos}</li>
<li>{$lang.new_videos}</li>
<li>{$lang.random_video}</li>
{if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}
<li>{$lang.contact_us}</li>
{if isset($mm_menu_always_inject2)}{$mm_menu_always_inject2}{/if}
{if $logged_in != 1 && isset($mm_menu_notlogged_inject)}{$mm_menu_notlogged_inject}{/if}
</ul>
Or you can add programmatically class="active" (or selected) to the current selected menu and do this:
.nav li a.active {
color: #FFFFFF;
}
#ChrisHerbert your solution will not work... you will change all the li of the menu... because the class is in your body tag. (EDIT: the solution was changed, see comments)
With #ChrisHerbert answer, you can do it in two ways:
1) with Javascript, take the class in the body tag then select the one with the associate index (:eq() in jQuery). (you can find a way without javascript for non-javascript user)
OR
2) you can do: .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you know the index of each page in your menu! Or other child selector but, old versions of IE don't like it!
I think you should do it with my solution rather then the body tag. Still, it is really useful to have that class in the body for page specific thingy to add.
Add a unique class to the <body> tag of each page. For example, on the home page:
<body class="home">
On the contact page: <body class="contact">
On the blog page: <body class="blog">
..and so on.
Then, in your CSS, do something like this:
.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
// styling to indicate active state
}
I think the question is, are you looking to have this done dynamically? Or are you coding each page? The other two solutions are great, but a bit overkill if actually you're accessing each page individually. You could just add a class to the selected nav element depending on the page. This is probably the easiest to get your head around if you've not done it before, but #ChrisHerbert's solution is the nicest way of doing it dynamically just using CSS (no PHP ifs etc).
HTML
<div class="nav">
Home
About us
Portfolio
</div>
CSS
.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}
EDIT: Just realised that #AnnieCaron's answer is the same as mine.