Develop Reference

How to not overlap the banner with text and images in HTML/CSS?

so I have created a banner for my project, and for some reason, the banner seems to be overlapping with text and images as it hides behind them. How would I fix this? I am going to share the link to my project as I can't post it here since there is a lot of other files.
The banner I am talking about is where it says "Hi there! Thanks for....." in the bottom right corner. Also, I want to make it come in front of everything like it shouldn't hide behind any images or text. Please help as I cannot get this be fixed. The css of the banner is located in assets/css/banner.css THe html of the banner is located near the top of the HTML file. But I will also paste the code here since there might be something I am missing and need to add so that it doesn't overlap with anything.
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner');
banner.classList.add('exponea-in');
return banner.querySelector('.exponea-close').addEventListener('click', function() {
return banner.classList.remove('exponea-in');
});
});
}).call(this);
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.exponea-banner.exponea-in {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner .exponea-close {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner .exponea-label {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner .exponea-text {
margin-bottom: 8px;
}
.exponea-banner .exponea-count {
font-weight: 500;
}
.exponea-banner .exponea-label {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
<div class="exponea-banner">
<div class="exponea-close">
×
</div>
<div class="exponea-text">
Hi there! Thanks for stumbling upon my website!
</div>
<div class="exponea-label">
- Hussain Omer
</div>
<div class="exponea-label2">
(scroll down a bit to close this banner) &#128515
</div>
</div>
Thanks in advance!

Use z-index. For example, try this in your CSS:
.exponea-banner,
.exponea-close,
.exponea-text,
.exponea-label,
.exponea-label2 {
z-index: 10;
}
Remember that the z-index property controls the vertical stacking order of elements that overlap. Using a high number (like 10) you are making sure that this elements stay on top of the others in you page.

CSS, Tooltip: Having a auto-resize background according to tooltip text

Using this codepen, I want to show the tooltip that can auto-resize. What I mean is, if there is a long text to be displayed as the tooltip message, can the tooltip box be resize to adjust the message in multiple lines? I know that ideally tooltip is supposed to be a few words at best, but still, I'm just curious to explore it.
Current:
Expected
Should I change the displayattribute? I tried changing to flex, inline, inline-flex, etc. but none worked. Even tried with width: auto but I think that will require some more logic.

body {
font-family: sans-serif;
}
[data-title] {
outline: red dotted 1px; /*optional styling*/
font-size: 30px; /*optional styling*/
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: calc(100% + 10px);
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #000;
color: #fff;
font-size: 12px;
font-family: sans-serif;
word-break: break-word;
max-width: 150px;
}
[data-title]:hover::after {
content: '';
position: absolute;
bottom: -10px;
left: 8px;
display: inline-block;
color: #fff;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
<h1>Styling html title tooltip</h1>
<span data-title="Here is some extra long text that should break the line">Hover me</span>
I changed bottom: -26px; to top: calc(100% + 10px);.
I removed white-space: inherit;.
I added word-break: break-word;.
I added max-width: 150px;.
Currently the width of the tooltip is limited by either max-width or the width of the span. You could add min-width but that could leave a lot of blank space if the text isn't long enough.
These changes should position the tooltip and the little arrow pointer thingy correctly so the neither overlap.

Change from no wrap to wrap
[data-title]:hover::before {white-space: wrap; }

Can I sample the colour a particular pixel using JavaScript?

I'm currently working on a project which could potentially have a large number of images on it at once. So the design we have puts a small caption on the bottom of the image, as an overlay, with a small ::After 'arrow' pointing into the following section.
The overlay is about 10% transparent, so some of the image is just visible, but depending on the image, the color of the overlay will vary - causing the arrow to mismatch.
Please see this image as an example:
Is there any way I can programmatically sample either one or an average of pixels near the 'arrow', so that it always gets the right color, and looks seamless?
Edit:
.overlay-with-arrow
{
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(62, 62, 62, 0.9);
color: #FFF;
text-align: center;
font-family: Montserrat, SansSerif, serif;
text-transform: uppercase;
}
.overlay-with-arrow::after
{
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(62, 62, 62);
display: block;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: -20px;
z-index: 1;
}

Some hr tags have gaps inside them while other doesn't

I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?

This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}

Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.

Why this javascript show all the lines togeather and not one by one like in the demo page?

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript' src="http://vaakash.github.io/jquery/easy-ticker.js"></script>
<div class="demo3">
<ul>
<li>what's causing the layout to break? Attempting to make a horizontal layout website ?</li>
<li>WordPress Mobify mobile theme, CSS</li>
<li>Gridview with Table.Rows.Count ==0 to show Footer row that include checkbox with imageurl cast</li>
<li>JS/jQuery - animated random name picker</li>
</ul>
</div>
<style>
.demof{
border: 1px solid #ccc;
margin: 25px 0;
}
.demof ul{
padding: 0;
list-style: none;
}
.demof li{
padding: 20px;
border-bottom: 1px dashed #ccc;
}
.demof li.odd{
background: #fafafa;
}
.demof li:after {
content: '';
display: block;
clear: both;
}
.demof img{
float: left;
width: 100px;
margin: 5px 15px 0 0;
}
.demof a{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #06f;
}
.demof p {
margin: 15px 0 0;
font-size: 14px;
}
.demo3 {
font-family: Arial, sans-serif;
border: 1px solid #C20;
margin: 50px 0;
font-style: italic;
position: relative;
padding: 0 0 0 80px;
box-shadow: 0 2px 5px -3px #000;
border-radius: 3px;
}
.demo3:before {
content: "Latest News";
display: inline-block;
font-style: normal;
background: #C20;
padding: 10px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
}
.demo3:after {
content: '';
display: block;
top: 0;
left: 80px;
background: linear-gradient(#FFF, rgba(255, 255, 255, 0));
height: 20px;
}
.demo3 ul li {
list-style: none;
padding: 10px 0;
}
</style>
<script type='text/javascript'>
$(function(){
$('.demo3').easyTicker({
visible: 1,
interval: 4000,
direction: 'up'
});
});
</script>
The text is scrolling up all ok but in the LatestNews i see all the time 4 lines all the lines of text instead of see each time line by line one line each time like in the demo page:
Demo Page
In the LatestNews demo example there is one line each time scrolling up.
What should i change and what cause that so there are 4 lines each time and not one like in the demo page ?

In your particular web-site that you linked at the time the padding as specified in the .demo3 style is set to 0, 0, 0, 80px.
That would usually be enough as you can see in this isolated demo, using your posted code.
Following an inspection of your linked site. The problem seems, that your site also imports another CSS file:
<link rel="stylesheet" type="text/css" href="/files/main_style.css?1398686941" title="wsite-theme-css">
That file contains all sort of styles, including a few with !important and that file seems to over-write or your CSS styles.
IF you open your site, open the debugger and find that <link...> line and delete it (from the console only) you will see your HTML will look fine. Mind you, the rest of your site will not.
I don't know how much influence you have over that file but to compensate without changing it change your padding from 80px to 115px (or what ever suits) in the .demo3 style, similar to this:
.demo 3{
...
padding: 0, 0, 0, 115px // changed from padding: 0, 0, 0, 80px
...
}
I tried the above in the console on your site and it seemed to do the trick.