So, I have an unordered list which contains buttons for a keypad. The problem is that for some reason, There's an extra <li> element in the end of the list and this just ends up screwing everything. How could I fix this?
<ul id="buttons">
<li><div><a><span>1</span></a></div><div><a><span>2</span></a></div><div><a><span>3</span></a></div></li>
<li><div><a><span>4</span></a></div><div><a><span>5</span></a></div><div><a><span>6</span></a></div></li>
<li><div><a><span>7</span></a></div><div><a><span>8</span></a></div><div><a><span>9</span></a></div></li>
<li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div><li>
</ul>
//as you can see only 4 li elements
//styles
li {
width: 100%;
border-spacing: 10px 5px;
display: table;
table-layout:fixed;
text-align: center;
}
ul {
position: relative;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
list-style-type: none;
}
But when I open the document in chrome, There are 5 <li> elements.
There is a typo error. Problem is at your last list item . It is not closed properly. It should be like this :
<li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div></li>
You have used <li> instead of </li> to close your last list item
so your could should be
<ul id="buttons">
<li>
<div><a><span>1</span></a></div>
<div><a><span>2</span></a></div>
<div><a><span>3</span></a></div>
</li>
<li>
<div><a><span>4</span></a></div>
<div><a><span>5</span></a></div>
<div><a><span>6</span></a></div>
</li>
<li>
<div><a><span>7</span></a></div>
<div><a><span>8</span></a></div>
<div><a><span>9</span></a></div>
</li>
<li style="max-width:80px;margin:auto;">
<div><a><span>0</span></a></div>
</li>
Related
I have been tasked with styling a website, where I have encountered a hurdle regarding the horizontal alignment of elements inside list items.
I have replicated the structure of the menu in question with this JSFiddle.
I want to know how I can keep the position of the green divs (as shown from the start) when I expand the menu, using the button in the fiddle. I need them to keep horizontal alignment with the first <a> element in their respective <li> element, when the submenus are displayed.
you can do it like this for example:
<html>
<script>
function clickFunction(){
var elements = document.getElementsByClassName("submenu");
for(var i = 0; i < elements.length; i++){
elements[i].classList.toggle("display-sublist");
}
}
</script>
<style>
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul li{
width: 100%;
background-color: blue;
}
.submenu{
display: none;
}
.display-sublist{
display: block;
}
ul li a{
width: 95%;
background-color: red;
}
.main-test {
display: inline-block;
float: left;
width: 90%;
}
.cancel-test{
display: inline-block;
background-color: green;
float: right;
width: 10%;
}
.expand-button{
clear: both;
display: block;
}
</style>
<body>
<ul>
<li>
<a class="main-test" href="#">Something</a>
<a class="cancel-test">x</div>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
<a class="main-test"href="#">Something</a>
<a class="cancel-test">x</a>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
Something
</li>
<li>
Something
</li>
</ul>
<button onclick="clickFunction()" class="expand-button">Expand</button>
</body>
</html>
Here is the HTML code :
<div id="tp-nb">
<ul>
<div id="tp-ls">
<li>
account-icon
</li>
<li>
notification-icon
</li>
<li>
icon
</li>
<li>
Images
</li>
<li>
Gmail
</li>
</div>
</ul>
And here is the CSS part:
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 300pxx;
}
li{
float: right;
display: block;
padding: 10px;
}
When I change the css (li) to the id "#tp-ls" it loses it's layout and bunches all up completely. I've tried changing it from id to class, but as I figured out, made no difference.
Is there any possible way of handling a groupe of without affecting ALL ? I'm sure there is, however I fail to understand how it's possible. I also lack the knowledge thereof to know what I"m looking for, and therefore don't know how to search it on google ( for those of you whom would reply with "google it". )
Thank you, and until I get a response I'll continue searching what i'm searching for.
Here you make some mistakes
You must not use div inside ul
You can see that tp-ls this id is not assigned to any li so you have to give this id in ul
Example
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 300pxx;
}
#tp-ls li{
float: right;
display: block;
padding: 10px;
}
<div id="tp-nb">
<ul id="tp-ls">
<li>
account-icon
</li>
<li>
notification-icon
</li>
<li>
icon
</li>
<li>
Images
</li>
<li>
Gmail
</li>
</ul>
</div>
Hope this will helps you :)
I have created a very simple dot navigation on my site banner HERE. The HTML code i have used is as follows:
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
</ul>
Now for the <li> element i have the following code:
.banner ul.carousel-dots li {
height: 13px;
width: 13px;
display: inline-block;
background: url(../img/res/carousel-dots.png) 0 0 no-repeat;
margin: 0;
cursor: pointer;
}
Now even though i have margin: 0; in my style, i get a margin between the left and right, i don't know where are these spaces coming from , i would want the dots to be touching each other , side to side. So whats causing this mysterious margin ?
white space between inline-block elements?
The space is actually created by the "enter" between your elements.
How to remove the space between inline-block elements?
In the question above there are a lot of different answers how to remove it.
I set the parent element font-size to 0.
ul {
font-size: 0;
}
ul.carousel-dots li {
height: 13px;
width: 13px;
display: inline-block;
/*background: url(../img/res/carousel-dots.png) 0 0 no-repeat;*/
background-color: black;
border-radius: 50%;
margin: 0;
cursor: pointer;
}
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
</ul>
Ok, the answer is a bit tricky, if you want it fixed, you have to remove the space between the </li> and the next <li>
So, this:
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
Should become this:
<ul class="carousel-dots">
<li>
</li><li>
</li><li class="active">
</li>
The reason of this issue is the fact that when using inline-block, spaces are also considered inline characters, leaving space in between.
PS: There are also other ways to remove the space, by using word-spacing or other such things, but I find the simplest solution to be always the best, plus on html you should always try to minimize your code before shipping, so a few lines of code less is always better than a few more
I have the following code to show a division on hover. It is initially hidden and i'm trying to show one division on hover of another element.
.topNav {
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu {
list-style-type: none;
}
.mainMenu li {
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a {
text-decoration: none;
color: white;
}
#item1 {
display: block;
}
#item1:hover #item1detail {
background: #444;
visibility: visible;
}
#item1detail {
position: absolute;
top: 152px;
left: 250px;
background: #ccc;
width: 750px;
height: 400px;
border: solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
on hover of the list item item1 i want to show the division itemdetail. The above code is not working. What am i doing wrong?
As I see it the only solution to display the given div without touching the HTML would be Javascript... As the others suggested already...
BUT... there's a solution with one slight change to your HTML and CSS each.
The main problem is this CSS-selector:
#item1:hover #item1detail
which would translate to "id item1detail INSIDE of an hovered id item1".
You can fix this by placing the div inside of the li and change the selector to:
#item1:hover + #item1detail
Since the div is positioned absolute anyway it doesn't make a visual difference... at least for your snippet...
Updated version of your snippet:
.topNav
{
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu
{
list-style-type: none;
}
.mainMenu li
{
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a
{
text-decoration: none;
color: white;
}
#item1
{
display: block;
}
#item1:hover + #item1detail
{
background: #444;
visibility: visible;
}
#item1detail
{
position: absolute;
top: 152px;
left: 250px;background: #ccc;
width: 750px;
height: 400px;
border:solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li >
<a id="item1" href=""> item 1</a>
<div id="item1detail">
Some random content
</div>
</li>
<li> item 3</li>
<li> item 4</li>
<li> item 5</li>
<li> item 6</li>
<li> item 7</li>
<li> item 8</li>
<li> item 9</li>
</ul>
</div>
You'll have to use javascript
<script>
function myFunction() {
if (document.getElementById("item1detail").hidden==false){
document.getElementById("item1detail").hidden = true;
}else{
document.getElementById("item1detail").hidden = false;
}
}
</script>
and
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" onhover="myFunction()" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
I would do that using jQuery.
$('#item1').hover(function(){
$('#item1detail').show();
}, function(){
$('#item1detail').hide();
});
The reason your CSS isn't working is because you're using this selector:
#item1:hover #item1detail
Which selects the element with id #item1detail occurring within the element with id #item1, if the #item1 element is hovered.
In your current markup, #item1detail is outside #item1, and so does not match the selector. Moving #item1detail should get you the behavior you want. (And there will probably be some layout work to do from that point.)
The #item1detail element is not a sibling of the #item1 element, so that is why the #item1:hover #item1detail CSS rule does not apply as you expect it to.
I believe if this is to work with CSS only (not JavaScript), then you will have to make #item1detail a sibling of #item1.
I may seem really silly or outright wrong in the way I code. However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box. How would I fix this?
Here is the code:
<nav>
<div class="wrapper">
<div class="brand">
<img class="UKLogo" src="images/logo.png" alt="">
</div> <!-- brand -->
<div class="navigation">
<ul class="nav-ul">
<li> HOME </li>
<li> ABOUT </li>
<a href="#">
<li class="course-li">
COURSES
<ul class="drop-down">
<li class="list-item"> Driver CPC </li>
<li> First Aid </li>
<li> Other </li>
</ul>
</li>
<li> CONTACT </li>
<!-- <li> TESTOMONIALS </li> -->
<!-- <li> FAQs </li> -->
</ul>
</div> <!-- Navigation -->
</div> <!-- Wrapper -->
</nav>
nav {
margin: 0px;
padding: 0px;
height: 75px;
background-color: #FFF;
}
.brand {
margin: auto;
width: 960px;
}
.company-name {
padding: 0px;
margin: 0px;
}
.UKLogo {
padding: 0px;
margin: 0px;
position: relative;
top: 11px;
}
.navigation ul li {
display: inline-block;
margin: 10px;
position: relative;
left: 380px;
top: -46px;
}
.navigation ul a {
color: black;
margin-left: 40px;
text-decoration: none;
font-family: Lato;
font-weight: 300;
}
.navigation ul a:hover {
color: #169ec5;
font-weight: 300;
}
.course-li:hover .drop-down {
left: 0px;
}
.drop-down {
position: absolute;
left: -5px;
z-index: 1;
background-color: white;
left: -9999px;
}
Thank you ever so much for looking and helping. Always open to criticism whether its the way I code or anything else.
Here is a JSFiddle https://jsfiddle.net/vj41qLts/
Many Thanks!
You need to declare a position in the parent, for the child to reside in. An element with position: absolute; will position itself to the first parent with position: relative;. If there is no parent with position: relative;, it will use the browser window instead.
See fix example here: https://jsfiddle.net/vj41qLts/1/
I think there are two thing you need to change:
ul li will select everything li in the navigation even the dropdown, ul>li will only select the immediate child, instead of running down the nested elements.
you need to add position:relative; in your dropdown's parent.
One of the first issues I see is the fact that your markup for your main links isn't setup correctly. Following a structure more link the below should give make it work the way you want it to:
<nav>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li>
<a href="#">Courses<a>
<div>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</div>
</li>
</ul>
</nav>
Then use CSS or JS to control showing and hiding the dropdown of links.