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.
Related
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.
First, I should mention that I'm about 4-weeks new to the coding world, and this is the first time I'm trying to make (what I thought would be) a simple site.
I have seen many similar questions on Stack Overflow, but in trying to adapt the code samples provided in the solutions, the solution would stop working.
So, the current hurdle is:
I have a menu defined in HTML with a sub-menu in one of the <li> elements ("Portfolio"), and that <li> element contains the character ▼ (▼).
I set up an onclick event for that <li> element so that when it was clicked it would do two things: expand/display the sub-menu <li> elements directly below it (pushing the other <li> elements in the menu further down), and replace the ▼ character with a ▲ character (▲)... until the <li> element was clicked again to shrink/hide the sub-menu.
I'm not sure if it matters, but this menu is inside a grid item because the page is set up using CSS Grid.
So basically:
HOME
ABOUT US
PORTFOLIO ▼
INFORMATION
CONTACT
...would become:
HOME
ABOUT US
PORTFOLIO ▲
LINK 1
LINK 2
LINK 3
INFORMATION
CONTACT
No matter how I set up my classes and IDs, I cannot get the arrow symbol to swap, and somewhere along the line, I messed up the coding and now the sub-menu doesn't even expand anymore.
It's likely embarrassingly bad code (given that I've tried to mash together bits from samples I've seen) but here is what I have. Thanks in advance.
var arrowstring = document.getElementById("arrowdirection").innerHTML;
document.getElementById("IDforPortfolioLink").classList.toggle("show");
if (IDforPortfolioLink.classList.contains('show')) {
arrowstring = "▲"
} else {
arrowstring = "▼"
}
arrowdirection.textContent = arrowstring;
}
.sub-menu-content {
display: none;
position: absolute;
}
.sub-menu-content a {
display: block;
}
.sub-menu-content a:hover {
background-color: green;
}
.show {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>About us</li>
<li class="LinkForPortfolio" id="IDforPortfolioLink" onclick= "myFunction()">LINK <span class="arrow" id= "arrowdirection">▼</span><div class="sub-menu-content" id="myportfolio">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</li>
<li>Information</li>
<li>Contact</li>
</ul>
</body>
</html>
Well, your code had so many flaws I had to rewrite it.
I'll explain everything that I possibly can of what I did here:
I changed the HTML a bit: I have added div's, instead of ul's with li's, inside a nav(container). It's more indicated to do so because it keeps the markup clean, and is less harder to debug.
I have assigned nav a display: flex; justify-content: center; align-items: center; which centers the divs inside nav, and inlines them. I did so with nav div, which pretty much centered the text inside of them.
I have removed all of the classes expect of .portfolio because it's useless to have that many classes.
I made div.expand-portfolio a child of div.portfolio, which in itself(.expand-portfolio) has another ul child, which holds the links. You might've noticed that I've added .portfolio a position: relative; and .expand-portfolio a position: absolute;. I did that because, I wanted to take .expand-portfolio out of the document flow, which basically means I wanted to make .expand-portfolio not interact with any element on the page. Now, when assigning position: absolute; to a child inside a container, the child's position is going to be relative to the document and not the parent. This is why you may add position: relative; to the parent.
I created a separate class called .expanded which gives .expand-portfolio a height of 150px when assigned to it.
You also might have noticed I gave the divs inside the nav a transition: 500ms ease, what that does is make the transition between the properties smooth, and not sudden. You may remove that property from them if you don't want that.
Now, the javascript.
When I made those 3 variables, which are the references of the elements from the page, you noticed I used document.getElementsByClassName followed by a [0]. What document.getElementsByClassName() returns is: a nodelist. Documentation here. It's basically a sort of "array", and with [0] appended to it, I select only the first and only element of the page with that class.
You may have observed I added the onclick function in the javascript file. Personal preference. I said that when I click the portfolio button, first, you should change that span's innerHTML. (the span element holds the actual symbol). I also said you should toggle the .expanded class. And, I made an if statement, checking if .expand-portfolio doesn't contain the class. If it doesn't, you can pretty much see what it does.
I hope it helps. If you have any more questions, ask them in the comments.
var portfolio = document.getElementsByClassName("portfolio")[0];
var portfolioInner = document.getElementsByClassName("inner-html")[0];
var expandPortfolio = document.getElementsByClassName("expand-portfolio")[0];
portfolio.onclick = function(){
portfolioInner.innerHTML = "▲";
expandPortfolio.classList.toggle("expanded");
if(!expandPortfolio.classList.contains("expanded")){
portfolioInner.innerHTML = "▼"
}
};
html, body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.menus-container {
height: 100%;
width: auto;
}
.menus-container > div {
padding: 10px 10px 5px;
transition: 500ms ease;
width: 30%;
height: 100%;
cursor: pointer;
}
.expand-portfolio {
overflow: hidden;
width: 100px;
height: 0;
background-color: #000;
transition: 500ms ease;
}
.expand-portfolio ul {
padding-left: 25px;
}
.expand-portfolio ul li {
padding: 10px 0 10px 0;
color: #fff;
}
.portfolio span {
margin-left: 5px;
}
.expanded {
height: 150px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menus-container">
<div>Home</div>
<div>About Us</div>
<div class="portfolio">Portfolio <span class="inner-html">▼</span>
<div class="expand-portfolio">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
</div>
<div>Information</div>
<div>Contact</div>
</div>
</body>
</html>
I am trying to style a little bit my menu.
I am using bootstrap and font awesome css styles.
I think it will much better to show the problem on live page.
I need to achieve two goals
I need to put this chevron icon at the bottom with little margin (2-3px)
like this. So it should be at the bottom in any case with little margin.
The problem is that < li > items is not resized according to the content inside it. As you can see on this screenshot. It is sticked to the bottom border and if I add some margin I will get following result
I am using following styles
.item-icon-container {
margin: 2px 0 15px 0;
float: right;
display: block;
height: 100%;
}
.item-icon-container .expand-indicator {
display: block;
}
.item-icon-container .badge {
display: block;
}
Here is full HTML code http://pastebin.com/S26C9xSU
Please help to solve the problem.
I would be grateful for any help
To make sure that all elements inside LI affected it's height we can add last element into LI with style clear:both
Possible solutions:
1) Use CSS with :after selector
.list-group-item a:after{
content:"";
font-size: 1px;
display:block;
clear:both;
}
2) Extra element. At the end of each li you can add
<div style="clear:both;"></div>
Something like:
<li id="cat-id-5" class="cat-parent-empty list-group-item">
<div class="item-icon-container">
<span class="badge">1</span>
<i class="fa expand-indicator fa-chevron-down"></i>
</div>
<a href="http://crosp.net/category/technology/" title="View all posts in Technology">
<i class="fa fa-tasks fa-fw" aria-hidden="true"></i>
Technology
</a>
<div style="clear:both;"></div>
</li>
CSS style looks better. Extra element has better compatibility.
Try adding padding to your expand-indicator element (I'm guessing, without seeing your HTML). https://jsfiddle.net/ve39a1qj/
.item-icon-container .expand-indicator {
display: block;
padding-bottom: 20px;
}
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.)
I need to increase the margin-left on comments that are parents (comments that are replies).
The margin left is now 46px, 58px etc.
Is there some way to set the margin-left disqus should offset comments with?
Answer through script
If you mean comments on comments on comments, you can use the following method, which has an offset of 46 + 12 for each parent.
$(".comment:not(.changed)").each(function(){
$(this).addClass("changed");
var parents = $(this).parents(".comments");
$(this).css("marginLeft", 46 + ( parents.length * 12));
});
Answer through CSS
If you got a static amount of comments, you can use css
.comment{ margin-left: 46px; }
.comment .comment{ margin-left: 58px; }
.comment .comment .comment{ margin-left: 70px; }
Best solution
But it's better to nest them, so you can just use margin-left: 12px; and the nested already moved 12px and now his margin will be there aswell. So moved another 12px.
Then the HTML will ook like:
<ul>
<li>COMMENT
<ul>
<li>COMMENT
<ul>...ETC</ul>
</li>
</ul>
</li>
</ul>
And the CSS:
ul{ margin-left: 12px; }