I've been having this issue in different places where I have a ul list and Im trying to add it on top of a div (image, or a background) but the list does not appear on top. I wonder if it gets sent in the back..i even added z-index
JSFiddle
CSS
.toolbar p{ text-align: right; padding: 10px 180px 0 0; color: #fff; font-size: 26px; z-index: 1; }
.toolbar { width: auto; height: 50px; background-color: #cc1e2c; z-index: 1;}
.social-icons { z-index: 2;}
HTML
<div class="col_full toolbar">
<p>CALL NOW: +1 555.555.1234</p>
<ul class="social-icons">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
The reason you aren't seeing anything is because you posted links, without any content. If you added words, the list would appear:
<div class="col_full toolbar">
<p>CALL NOW: +1 555.555.1234</p>
<ul class="social-icons">
<li> Twitter </li>
<li> Instagram</li>
<li> Facebook</li>
</ul>
</div>
On this example I made the height bigger so you could see that the links are in fact on top.
If you want to see the images, you need to use the image tag like so:
<li> <img src="path/to/your/twitter_image.jpg"/> </li>
JSFiddle
Related
I have a div. And this div contains a very long list. This list becomes scrollable automatically.
This div is then inside another div, which fills out the entire screen.
Scrolling works fine, but it only works when the mouse is over the inner div, the one that actually contains all the data.
But I want scrolling to work, also when the mouse is over the parent div, the one that fills out the entire screen.
How do I do that?
You can see the sample here:
https://openage.org/fs/jsl_forritun/?page=hlutir
It doesn't scroll when the mouse is over the darker part. /:
you have two divs that contains your content body
id= "nhreyfing"
give him this style padding: 0 20vw; background: black
or what so ever padding you wanna give him
id= "content"
give him your rgb(213, 191, 134) background
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B2832;
}
.main {
margin: 0 auto;
padding: 40px;
width: 700px;
height: 100vh;
overflow-y: auto;
background: #D5BF86;
}
.main ul {
margin: 0;
padding: 0;
}
.main ul li {
list-style: none;
}
.main ul li:nth-child(n+2) {
margin: 10px 0 0;
}
.main ul li a {
padding: 10px;
display: flex;
color: #000;
background: #C6B076;
text-decoration: none;
}
<div class="main">
<ul>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>
Do the following:
remove CSS properties from
BODY element {height:100%}
remove {max-width: 800px} and add CSS to id="initial_screen_base" element:
div#initial_screen_base {
max-width: 100vw;
padding: 0px 20vw;
background-color: rgb(43, 40, 50);
}
if you want it to me maxed always to 800px (for smaller devices it will be full width), make it like this:
div#initial_screen_base {
background-color: rgb(43, 40, 50);
max-width: 100vw;
padding: 0;
padding-right: calc((100% - 800px)/2);
padding-left: calc((100% - 800px)/2);
}
for your id="node":
div#node {
background-color: rgb(213, 191, 134);
}
You should remove you inline CSS and put them in a style TAG inside your HEAD. That way you will fave more clear code for yourself to edit.
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 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.
I have a weird problem where my links work fine on one page or fail to do so on another. Here is my code for the non-working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
And the code for the working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
<a class="activeLink" href="side2.html">ABOUT US</a>
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
I am able to see the links fine, but they are not clickable.
Here is the CSS for the nav, ul and wrapper:
nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}
EDIT: I figured out the issue. I had a div overlapping my ul.
FIDDLE
The # would normally reference an anchor on your page and scroll there. Since you are just using the # it links to itself, so the page wouldn't reload, and would stay in the same place.
Your CSS also specifies not to decorate (underline) the hyperlinks, giving the impression that the link does nothing.
Edit: http://jsfiddle.net/2L3hL7w6/
I've added some CSS to highlight in red if a link has been visited - you'll see if you click on one of your links on the page it changes to red, showing the link does in fact work.
nav a:visited {
color: #ff0000;
}
All the links are the same in your example code. So when you once clicked one link....nothing more will happen since you are already there.