I need to style inner span element which is inside of contenteditable block by focus on that inner span, it has to be highlighted when is focused. Is that even possible somehow?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
</style>
</body>
</html>
In order to highlight just the span element when you focus it try this in your stylesheet :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere
atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum,
at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
[contenteditable="true"] span:active {
background-color: red;
}
</style>
</body>
</html>
I added a simple script so the element keeps being red when the mouse leaves. Have a look :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
<span>maxime</span> laudantium corrupti esse ab nostrum, at quis <span>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
</style>
<script>
let selectedElement = null;
const setFocus = e => {
if (selectedElement)
selectedElement.style.backgroundColor = 'antiquewhite';
selectedElement = window.getSelection().focusNode && window.getSelection().focusNode.parentNode;
if (selectedElement && selectedElement.tagName == 'SPAN')
selectedElement.style.backgroundColor = 'red';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;
</script>
</body>
</html>
Ok, as you requested no JavaScript and I already invested a lot of time in this question, this is my last answer. I know it is not entirely correct but it is not entirely wrong either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="block" data-id="123">
<p contenteditable="true">
Lorem ipsum dolor sit amet </p><span contenteditable="true">consectetur</span>
<p contenteditable="true"> adipisicing elit. Non facere atque aspernatur, pariatur architecto inventore explicabo eligendi
</p><span contenteditable="true">maxime</span>
<p contenteditable="true"> laudantium corrupti esse ab nostrum, at quis </p><span contenteditable="true">quas</span>
<p contenteditable="true"> temporibus eum? Asperiores, iste.
</p>
</div>
<style>
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus {
background-color: red;
}
p,
span {
display: inline;
}
</style>
</body>
</html>
Similar case here:
CSS: :focus of elements within contenteditable
You can use tabindex in span tags. that will solve your problem.
you can read more about tabindex here enter link description here
and focus will work when you use your keyboard. in this case, use your tab to get focus in span tags.
body {
font-size: 1.2rem;
line-height: 2rem;
}
.block {
outline: none;
}
.block span {
background-color: antiquewhite;
}
.block span:focus,.block span:hover {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="block" contenteditable="true" data-id="123">
<p>
Lorem ipsum dolor sit amet <span tabindex=0>consectetur</span> adipisicing elit.
Non facere atque aspernatur, pariatur architecto inventore explicabo
eligendi <span tabindex=0>maxime</span> laudantium corrupti esse ab nostrum, at
quis <span tabindex=0>quas</span> temporibus eum? Asperiores, iste.
</p>
</div>
</body>
</html>
Related
I have a text and an image overlapping it. What code can I write that makes the image go below the text when A media query is fired. I tried making that text a block element so that the image goes below but nothing happened.
I also tried making the container's flex-direction column but that didn't made any change too
Here's the code
<!DOCTYPE html>
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shivansh</title>
<style>
* {
margin: 0px;
}
html {
scroll-behavior: smooth;
}
/* width */
.homeimgandtextcont {
display: flex;
flex-wrap: wrap;
}
.homeimg {
width: 799.557px;
height: 640px;
position: relative;
left: 50%;
}
.homeheading {
width: 100px;
height: 67px;
position: relative;
top: 16rem;
color: black;
font-family: 'serif';
font-size: 52px;
margin-left: 19px;
}
.hometext {
position: relative;
top: -320px;
color: black;
font-family: 'serif';
margin-left: 24px;
}
</style>
</head>
<body>
<section class="sectionhome" id="sectionhome">
<div class="homecont">
<div class="homeimgandtextcont">
<h1 class="homeheading">
Sample
</h1>
<img class="homeimg" src="https://expo8.netlify.app/logoo.png" alt="Image">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
</div>
</div>
</section>
</body>
</html>
Your CSS is a a bit confusing. Stuff like top: -320px; should not exist in a ' good written ' css. If you need to do stuff like that you might need to rethink the HTML structure.
Anyway. The easiest way to change the positions of elements is with flexbox.
You can wrap your text and img in a div and for desktop use display:flex; flex-direction:row and in your media query you can use flex-direction:column . So the image will be after( below ) the text.
Check sample below or jsfiddle and adjust it to your specific needs
div {
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
img, p {
flex: 0 0 50%;
}
#media only screen and (max-width:320px) {
div {
flex-direction: column;
}
img,p {
flex: 0 0 100%
}
}
<div class="homeimgandtextcont">
<p class="hometext">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
</p>
<img class="homeimg" src="https://via.placeholder.com/150" alt="Image" />
</div>
Here I wanted to make a website template through BOOTSTRAP and CSS.But in my code some bootstrap class is not working like lead,font-weight,color,bg-color etc.If I use some bootstrap text-color in a section than when I use some other color in css in the same section ,I doesn't work. I want to use same font-family over every text.But if I use font family,than lead class doesn't work.In the same way,bootstrap font-weight-bold/bolder is working but light/lighter is not working not even in CSS,What can I do in this situation?
Here is my code:
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--ALL LINK-->
<link rel="stylesheet" href="./bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="shortcut icon" href="./img/ia_100000000.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<title>AppAmp Health Tracker Demo</title>
</head>
<body>
<div class="section bg-light py-5">
<div class="container">
<div class="row">
<div class="col h1">
Our Team and History
</div>
</div>
<div class="row py-5">
<div class="col-xl-6 lead section1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
<div class="col-xl-6 lead font-weight-lighter">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis perspiciatis vero accusantium excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas voluptatum!</div>
</div>
</div>
</div>
</body>
</html>
CSS
p,span,h1,h2,h3,h4,h5,a,blockquote,i,button,li,div{
font-family: 'Work Sans', sans-serif;
}
.section1{
font-weight:400;
}
If your font family does not support light or lighter font weights, it will not render light text. It is about font family. You should add supported font weights to link
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
On the other hand, i tried the following text classes from bootstrap and it is working.
<div class="col-xl-6 lead section1 text-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Debitis perspiciatis vero <span class="text-warning">accusantium</span>
excepturi aperiam eius sit quis nobis cupiditate voluptatem tempora a
odio, ad, officiis ex harum saepe fuga at modi quibusdam voluptas
voluptatum!
</div>
And it is a working pen: https://codepen.io/umutcakirbm/pen/KKaqwVp
EDIT:
Lead class has this properties
.lead {
font-size: 1.25rem;
font-weight: 300; // it will not work
}
If you give extra font-weight-lighter/bolder/light etc. , it will override it because it has !important attribute.
And also text-* classes has !important attribute so you should add !important at your own css to override text class. Like this;
<span class="text-warning" style="color: #000 !important;">accusantium</span>
I was working today to use custom CSS with Bootstrap and some of the CSS properties do work but some of them were not working correctly or Not Working. After juggling some time, I use !important at the end of the property in CSS, It Worked for me.
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
Wants to know more about !important? Click Here to See on W3School.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Best Regards, Ahmed Iqbal B.
I have written style for my div element and div element at body section. When the code runs I see two div element at screen. Even when the body section is empty, the div seems at screen. I write on Visual Code. Please help me..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
text-align: center;
}
p {
letter-spacing: 1px;
}
span {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>article 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sit, omnis voluptatibus quasi exercitationem cupiditate reprehenderit quidem distinctio. Omnis <span>temporibus</span> necessitatibus illo deleniti quia reprehenderit aspernatur molestias
rerum veniam quam!
</p>
</div>
</body>
</html>
It might be a cache related issue. Press "ctrl + shift + i", right click on the reload icon at the top left corner and select "Empty cache and hard reload". This MIGHT solve the issue.
Hello so I have two columns spanning across the page. I would like to add some padding so my text fits nicely in the middle of each column top,bottom,left,right . I tried to use wrappers and adjust the div width that the text is in but I must be doing something wrong. This is my first time experimenting with VH and VW. Earlier I got it to do kind of what I wanted but after refreshing a few time the right div column would drop down and times or stay in its place. Any help would be much appreciated.
body{
background-color: rgb(0, 0, 0);
overflow-x: hidden;
}
*, html {
margin: 0 !important;
}
.left{
background-color: rgb(88, 12, 12);
height:100vh;
width:45vw;
font-size: 1em;
color: rgb(160, 160, 160);
float:right;
}
.leftw{
background-color: rgb(88, 12, 12);
height:100vh;
width:50vw;
font-size: 1em;
color: rgb(160, 160, 160);
float: left;
}
.right{
background-color: rgb(54, 0, 0);
height:100vh;
width:45vw;
float: left;
color: rgb(160, 160, 160);
}
.rightw{
background-color: rgb(54, 0, 0);
height:100vh;
width:50vw;
z-index:2;
float: right;
color: rgb(160, 160, 160);
}
#media only screen and (max-width: 700px) {
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="stickynav.js"></script>
<div class="leftw">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quia sunt soluta eaque ex nam iste aperiam. Omnis nesciunt eos magnam dolorem rem saepe dignissimos, distinctio autem maxime, earum aut?
</div></div>
<div class="rightw">
<div class="right">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus quibusdam ratione quisquam molestiae necessitatibus, magnam laboriosam consequuntur ipsam minima alias aliquid eaque animi asperiores libero minus consectetur, temporibus quia hic?
</div></div>
</body>
</html>
Try adding
display: flex;
align-items: center;
on your .left and .right classes.
You can then still use top and bottom padding to prevent the text from sticking to the top of the element on smaller screens.
I'd also use min-height: 100vh instead of height: 100vh so that everything still performs well on smaller (less high) screens.
The green line should be drawn threw until the bottom as a timeline. The length is calculated by each sections of unique cssgrid height in JavaScript.
All entries look absolutely the same by codebase, but for any reason only the topmost is displayed.
I've tried to play around with position: absolute and position: relative for both the content and the green line, but it didn't work.
Is there something hidden or above the other?
#cssgrid {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 60px 40xp auto;
grid-template-areas: "b h" "b t" "b d";
}
<div>
<div id="line" style="position: absolute;"></div>
<div id="cssgrid">
<div id="grid-bulletpoint">
<div class="bulletpoint"></div>
</div>
<div id="grid-headline">
<h2>...</h2>
</div>
<div id="grid-time">
<p>...</p>
</div>
<div id="grid-description">
<p>...</p>
</div>
</div>
</div>
You can use the pseudo class :before to add the dot by making it position:absolute.
#cssgrid {
margin-left: 100px;
}
.boxContainer {
border-left: 5px solid green;
padding-left: 37px;
margin-bottom: -20px;
padding-top: 20px;
}
.grid-headline {
position: relative;
}
.grid-headline:before {
content: ' ';
width: 20px;
height: 20px;
background: orange;
position: absolute;
left: -50px;
top: 0;
border-radius: 50%;
}
#grid-description p {
margin-bottom: 0;
}
<div id="cssgrid">
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
<div class="boxContainer">
<div class="grid-headline">
<h2>Entry</h2>
</div>
<div id="grid-time">
<p>1989</p>
</div>
<div id="grid-description">
<p>Lorem ipsum text...</p>
</div>
</div>
</div>
You may organize differently your grid. See the Timeline Grid here This is the beauty of CSS Grid in my opinion.
Check this code:
(At the end I added the code for the svg if you want to use it too)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid CSS Timelin</title>
<style>
#thetime {
display: grid;
grid-template-columns: 50px 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#timeline {
background-color: rgba(193, 240, 104, 0.36);
border: 1px solid #0031ff;
justify-self: center;
}
.timebar {
width: 10px;
height: 100%;
color: transparent;
background-color: #00ff1d;
}
ul {
list-style: none;
justify-self: start;
margin-left: 0;
padding: 0;
}
li {
background-color: rgba(141, 240, 240, 0.36);
border: 1px solid #ff00ff;
margin: 1.5 rem 0;
position: relative;
}
li:before {
content: " ";
background-size: cover;
background-image: url("/circle2.svg");
width: 1.5rem;
height: 1.5rem;
position: absolute;
left: -2.3rem;
margin-top: 1.25rem;
}
h2 {
}
time {
font-family: monospace;
}
p {
}
</style>
</head>
<body>
<section id="thetime">
<div id="timeline">
<div class="timebar">X</div>
</div>
<ul>
<li>
<h2>
Entry #1
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #2
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #3
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
<li>
<h2>
Entry #4
</h2>
<time>
01.01.1900 - 31.12.1900
</time>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
</p>
</li>
</ul>
</section>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFF00;}
</style>
<circle class="st0" cx="10" cy="10" r="10"/>
</svg>