I have a problem with showing the span on the hover from my canvas. I have found a lot articles on Stack Overflow but I don't get it.
This is my html:
<section id="graphs">
<span id="tooltip">thisistest</span>
<canvas id="myChart" class="tooltip" width="550" height="350"></canvas>
</section>
and this css:
//This part works
span#tooltip {
display: none;
position: relative;
top: 8px;
left: 10px;
padding: 5px;
margin: 10px;
z-index: 100;
background: #333;
border: 1px solid #c0c0c0;
opacity: 0.8;
width: 300px;
color: White;
text-align: left;
}
//This does not show the span...
canvas.tooltip:hover #tooltip {
display: block;
}
I quickly made this fiddle.
The main problem is your :hover statement.
in the fiddle on line 22 of css.
http://jsfiddle.net/robbiebardijn/hDbq3/
#graphs:hover #tooltip
Related
This question already has answers here:
Create line after text with css
(8 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 1 year ago.
I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.
This is what I want,
This is what I've got so far.
a {
background: none;
}
a::after {
content: "";
border: 3px solid #000;
display: block;
position: relative;
top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>
And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/
Why is the position relative with negative top margin not working?
This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:
html,
body {
margin: 0;
}
a.link1:link,
a.link1:visited {
text-decoration: none;
font-size: 24px;
color: green;
}
.link1 {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: #dfd;
padding: 6px 10px;
}
.text1 {
flex-grow: 0;
display: inline-block;
}
.line {
height: 2px;
background: #fa0;
flex-grow: 1;
margin: 0 20px 0;
}
<a class="link1" href="#">
<div class="text1">Explore all Services</div>
<div class="line"></div>
</a>
I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline
You can adjust the thickness of the line and the color of the font.
.my_underline {
overflow: hidden;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
color:aqua;
}
.my_underline:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
Use theses styles ,
a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}
a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
I would like to make the background an image. All my other HTML elements will go on top of it. The problem is that it won't stack. Every time I try, the text just goes to the bottom. Also, I want to use vanilla HTML and CSS and do not want to use canvas. This is my code.
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
.navBar:hover {
border: 2px solid black;
}
h3 {
z-index: 2;
}
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<img src="..." width="100%" height="100%">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>
I don't know if there is a reason as to why the image has to be in the html, but why not use it in the css directly?
background: gainsboro url(...) left / cover no-repeat;
By doing some code change this will works.
HTML
<div class="main">
<img src="https://rajeshdoot.com/niwax-demos/html/images/about/about-dg-agency.jpg" width="100%" height="100%">
<div class="title">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>
</div>
css
.main {
position: relative;
}
.main .title {
z-index: 2;
position: absolute;
top: 50%;
}
Like the previous contributor suggested, use the css background-image property instead of embedding an image.
See this jsfiddle here: https://jsfiddle.net/6zo9h08m/
I used your example code, removed the img element and added a css selector for the body that sets a background-image instead.
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background-image: url('https://via.placeholder.com/150/FF0000/FFFFFF')
}
You can change background image position to 'fixed' and z-index can be less than navbar.
style ="position:fixed; z-index:1; top:0px; left:0px;"
Instead of inline, you can also give css cass to image tag and css above.
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
.navBar:hover {
border: 2px solid black;
}
h3 {
z-index: 2;
}
<div class="navBar" onclick="toHomePage()">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<img src="..." style ="position:fixed; z-index:1; top:0px; left:0px;" width="100%" height="100%">
<h3>Blablabla</h3>
<br>
<h3>01234567890</h3>
I am trying to add a pseudo before and after vertical line to a textfield for styling purposes. These elements need to be flush to the text -20px left and -20px right.
This works fine when the text is on one line as an inline-block, but as soon as the text spans multiple lines the width expands to that of the parent and the pseudo elements are no longer just 20px from the text.
Is there a way in which I can accomplish this using CSS?
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2 {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-color: blue;
color: white;
}
span {
position: relative;
background-color: green;
}
h2::before,
h2::after {
content: '';
position: absolute;
top: 0;
width: 4px;
height: 20px;
background: black;
}
h2::before {
left: -20px;
}
h2::after {
right: -20px;
}
<!-- Single line example works as the black bars are 20px away from the start/end of text-->
<div class="container">
<h2><span>This is a title</span></h2>
</div>
<br> <br>
<!-- double line doesn't work because the h2 is now the full width of the container -->
<div class="container">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
Edit: Here is a working version using tables, but if anyone has a better solution I'd love to hear it: https://codepen.io/anon/pen/MqveLQ
So from what i can see is the issue here is where you are applying the borders with before and after. You need to alter where you apply your borders. Remove them from the h2, and add in a new html element that wraps the h2 and apply there.
eg:
<div class="container">
<div class="headerwrap">
<h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
</div>
</div>
<div class="container">
<div class="headerwrap">
<h2><span>This is a title</span></h2>
</div>
</div>
CSS
.headerwrap::before,
.headerwrap::after {
content: '';
position: absolute;
top: 0px;
bottom:0;
margin:auto;
width: 4px;
height: 20px;
background: black;
}
.headerwrap::before {
left: 10px;
}
.headerwrap::after {
right: 10px;
}
Here is a working example: https://codepen.io/FEARtheMoose/pen/VGbJjO?editors=1100#0
Edit: altered example after comments - https://codepen.io/FEARtheMoose/pen/VGbJjO
I have moved your code to this fiddle: https://jsfiddle.net/n2Lr6xy5/13/ and removed position: absolute along with stripping out some of the other styles as they seemed unnecessary and I think I have created what you're after.
Here is the updated CSS:
.container {
width: 500px;
background-color: red;
text-align: center;
margin-left: 40px;
}
h2{
display: inline-block;
}
h2:after,
h2:before {
content: "";
width: 4px;
height: 20px;
background: #000000;
display: inline-block;
margin: 0 10px;
}
For my web app's landing page, I'm trying to create a title that appears overlaid on a dotted line (similar to this effect). This is what I currently have:
How do I create this such that the dotted line does not run through the title? I prefer to use the simplest CSS/HTML I possibly can and support the max number of browsers.
My code is pretty rudimentary. So far it is:
<h2>New Account:</h2><br>
<h2 style="margin-top:-0.5em;border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
With the example below you don't need to know the background color, is perfectly scalable, the dots extend to the remaining space of the title.
Actually, the title can wrap on multiple lines.
Feel free to tweak it to your needs and don't forget to prefix.
dotted-container {
border: 2px dotted red;
border-top-width: 0;
margin: 2rem 1rem;
display: block;
}
dotted-container>.content {
padding: 1rem;
}
dotted-title {
display: flex;
align-items: center;
height: 2px;
margin: 0 2px;
}
dotted-title > span {
padding: 0 1rem;
}
dotted-title:after,
dotted-title:before {
border-top: 2px dotted red;
content: '';
display: inline-block;
height: 0;
flex:1;
}
<dotted-container>
<dotted-title>
<span>title</span>
</dotted-title>
<div class="content">
Actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>some other title</span>
</dotted-title>
<div class="content">
Some other actual content
</div>
</dotted-container>
<dotted-container>
<dotted-title>
<span>and here's a title<br /> on two lines</span>
</dotted-title>
<div class="content">
Some content for a title on two lines.
</div>
</dotted-container>
Of course, you might want to adjust the margin/padding to your own liking and to accommodate any title wrapping on more than one line.
If you want to replace the "crappy" dotted line with a true dotted one, here's an example. Read the blog post to understand it.
Another good write-up on border-image property here.
Also note you don't have to use custom tags, as I did. It's an example. You may use classes or any other selectors that work for your specific case.
And here's an SCSS script I made you can use to pass in your selectors and desired margin/padding values. Far from perfect, but seems to do the trick:
$border-width: 2px;
$border-style: dotted;
$border-color: red;
$container: 'dotted-container';
$title: 'dotted-title';
$content:'.content';
$padding: 2rem;
$margin: 1rem;
$title-padding-value: 3;
$title-padding-unit:rem;
#{$container} {
border: $border-width $border-style $border-color;
border-top-width: 0;
margin: #{$title-padding-value/2}#{$title-padding-unit} $margin $margin $margin;
display: block;
> #{$content} {
padding: #{$title-padding-value/2}#{$title-padding-unit} $padding $padding $padding;
}
#{$title} {
display: flex;
align-items: center;
height: $border-width;
margin: 0 $border-width;
> span {
padding: 0 $padding;
}
&:after,
&:before {
border-top: $border-width $border-style $border-color;
content: '';
display: inline-block;
height: 0;
flex: 1;
}
}
}
Here's a solution with a combination of pseudo elements, flexbox, and absolute positioning.
* {
margin:0;padding:0;
box-sizing:border-box;
}
body {
background: url('https://s-media-cache-ak0.pinimg.com/originals/33/3b/4f/333b4f22ae39d1aaf8c23d77e759d8e1.jpg') 0 0 no-repeat / cover;
}
h2:before,h2:after {
content: '';
bottom: 50%;
border-top: 3px dotted black;
flex: 1 0 0;
}
h2:before {
margin-right: 1em;
}
h2:after {
margin-left: 1em;
}
h2 {
display: flex;
align-items: center;
font-size: 3em;
position: absolute;
top: 0; left: 0; right: 0;
transform: translateY(calc(-50% + 1px));
text-shadow: 0 3px 0 #fff;
}
section {
border: dotted black;
border-width: 0 3px 3px;
position: relative;
width: 80%;
margin: 3em auto;
padding-top: 3em;
background: rgba(255,255,255,0.5);
}
<section>
<h2>New Account:</h2>
<p>foo</p>
<p>foo</p>
<p>foo</p>
</section>
You can use a combination of z-index and background-color, as shown in the snippet below:
z-index pulls the New Account: title in front, then the background-color hides the border behind the it
body {
background: green;
}
#one {
position: absolute;
left: 35px;
z-index: 1;
background: green;
display: inline-block;
color: white;
}
#two {
position: absolute;
z-index: -1;
top: 55px;
margin-top: -0.5em;
border: 2px dashed white;
border-radius: 4px;
color: white;
display: inline-block;
padding: 10px 5px 5px 5px;
}
<h2 id="one">New Account:</h2><br>
<h2 id="two">Choose Nickname:<br>Password:<br></h2>
Perhaps you can do something like this:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box {
background: green;
padding: 15px;
width: 250px;
height: 250px;
}
.inner-box {
border: 1px dotted #ffffff;
height: 100%;
position: relative;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.inner-box p {
position: absolute;
width:70%;
text-align: center;
top: -25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #ffffff;
display: block;
background: green; /* Make it the same as background color */
}
<div class="box">
<div class="inner-box">
<p>My Awesome Title</p>
</div>
</div>
I would suggest having a background colour on the "New Account" if the background is only one colour, that way the dotted line will not be seen as it is covered by the background colour.
The code snippet shows how this can be adjusted to show more or less of the dotted border either side of the title.
.parent{
background-color: green;
position: relative;
font-size: 14px;
}
.parent h2:first-child{
color: #fff;
text-align: center;
z-index: 1;
background-color: green;
position: absolute;
left: 20px;
padding: 0 5px;
}
.parent h2:last-child{
margin-top: 15px;
z-index: 0;
}
.parent_two h2:first-child{
left: 12px;
padding: 0 17px;
}
<div class='parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>
<div class='parent_two parent'>
<h2>New Account:</h2><br>
<h2 style="border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>
</div>
I would move the title up with absolute positioning (just make sure the parent is relative positioned), wrap the title text in a <span> and then add padding and matching background color to that <span>.
body {
margin: 0;
background-color: green;
}
.box {
position: relative;
margin: 1rem;
padding: 1rem;
color: white;
box-sizing: border-box;
border: 1px dashed white;
}
.box-title {
position: absolute;
top: -1rem;
left: 0;
margin: 0;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
.box-title>span {
padding: 0 1rem;
background-color: green;
}
<div class="box">
<h2 class="box-title"><span>New Account:</span></h2>
<p>Username:</p>
<p>Password:</p>
</div>
FWIW, I don't typically care for extra markup but if I have to work extra hard to make it work some other way then I find it acceptable. Especially when it's super simple.
body{
background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=750&h=350') center top 0 no-repeat / cover;
}
.wrapper {
max-width: 400px;
margin: 30px auto 0;
border: 2px dotted red;
height: 200px;
border-top: 0;
text-align: center;
}
.heading {
display: table;
width: 100%;
position: relative;
}
.heading:before {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.heading:after {
content: '';
display: table-cell;
border-top: 2px dotted red;
}
.txt-wrapper {
display: table-cell;
width: 1%;
white-space: nowrap;
line-height: 0;
padding: 0 10px;
}
<div class="wrapper">
<div class="heading">
<h2 class="txt-wrapper">
This is heading
</h2>
</div>
<P>
This is paragraph.
</P>
<P>
This is another paragraph.
</P>
</div>
I have the following CSS and HTML:
body { background-color: #c0c0c0; }
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; }
.title-bar {
border-bottom: 1px solid white;
height: 128px;
width: 100%;
}
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; }
.logo{
align-items: center;
background-color: #369;
border-right: 1px solid white;
display: flex;
float: left;
font-size: 2em;
font-kerning: none;
justify-content: center;
}
.user-info {
align-items: center;
border-left: 1px solid white;
display: flex;
float: right;
justify-content: space-between;
flex-flow: column nowrap;
}
.user-info .circle {
border: 2px solid #369;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
height: 32px;
margin: 8px 8px;
overflow: hidden;
transition: border 0.15s ease-out;
width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
border-top: 1px solid white;
display: flex;
justify-content: center;
margin-top: 6px;width: 100%;
}
.hor-nav { background-color: #404040; }
.option { display: inline-block; position: relative; }
.hor-nav .option:hover {background-color: #369; }
.option a {
color: white;
display: inline-block;
font-size: 1em;
padding: 14px;
text-align: center;
transition: background-color 0.15s ease-out;
}
.option .dropdown { display: none; position: absolute; }
.option:hover .dropdown{ display: block; }
.dropdown a {
display: block;
text-align: left;
width: 100%;
}
<div class="title-bar">
<a class="logo" href="#">
</a>
<div class="user-info">
<span>User name</span>
<div class="container">
</div>
</div>
<div class="hor-nav">
<div class="option">
OPTION 1
<div class="dropdown">
ITEM 1
</div>
</div>
</div>
</div>
as you can see, the hor-nav bar's color spills onto the user-info area.
I have researched this and found that if I set overflow-x: hidden; it will not do this (see this article).
I have tried that and it is true - the nav bar does not spill into the user-info but, when you hover over one of the nav bar options, the dropdown does not come down but instead the vert-nav gives you a scroll bar (see this jsfiddle).
Additionally, if you do overflow-y: hidden; there is no scroll bar at all.
I am trying to get it so that the background-color of the hor-nav does not spill into other div's, but also allows the dropdown to be activated and work
thank you.
The easiest way to to this with least code change is to just give the user-info area a background color. Since the hor-nav section is lower on the z-index this will give the visual affect you want although the bar will still be under the user-info section it won't appear to be and the drop down will funtion as it does now.
Per your inquiry, you could do this another way by using percentage based widths for all 3 elements so they don't overlap eachother. Please see this fiddle for code change (note I change the markup order slightly, widths, and added box sizing css property)
The way I see it, you have 3 options
You can try adding margin-left/right to the hor-nav.
.hor-nav {
margin: auto 128px;
}
Another option is to set a certain width to the .hor-nav. Or practically cut the width of it.
.hor-nav {
width: calc(100% - 128px);
}
And third, is to add a background color to the .user-info