I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I've searched a lot but apparently it doesn't work. Just as fact, I am new and I don't want to be in tutorial hell, so I made a practice to write what I've learned, but I'm stuck with this:
HTML:
<!DOCTYPE html>
<html lang="es">
<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>Título del sitio web</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
Inicio
App
Sobre nosotros
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.links{
text-align: right;
padding-right: 20px;
color: black;
text-decoration: none;
display:inline-block;
}
.foot{
position: absolute;
bottom:0%;
width: 100%;
background: #404040;
color: white;
}
You can just move the links to a new div and style the div to align to right. And for the rest of the link decoration, you can add them in a separate class under their <a> tags.
* {
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.linksDiv {
text-align: right;
}
.links {
padding-right: 20px;
color: black;
text-decoration: none;
display: inline-block;
}
.foot {
position: absolute;
bottom: 0%;
width: 100%;
background: #404040;
color: white;
}
<!DOCTYPE html>
<html lang="es">
<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>Título del sitio web</title>
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
</div>
<div class="linksDiv">
<a class="links" href="index.html">Inicio</a>
<a class="links" href="https://c.tenor.com/_4YgA77ExHEAAAAd/rick-roll.gif">App</a>
<a class="links" href="#">Sobre nosotros</a>
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
Hope this helps.
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
background-color: red;
font-size: 20px;
color: white;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1>Hello World!</h1>
</div>
</body>
</html>
What are some ways that I can modify this sample of code so that the red background only covers the "Hello World!" text only by a few spaces on either side of the text?
You can do it like so:
body {
background-color: darkslateblue;
}
.wrapper{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.colorbackground {
flex-grow: 0;
text-align: center;
font-size: 20px;
background-color: red;
color: white;
padding: 0 20px;
}
<body>
<div class="wrapper">
<div class="colorbackground">
<h1>Hello World!</h1>
</div>
</div>
</body>
Learn more about flexbox
You can make the h1 inline-block, set the background colour to the h1 instead of the div and add padding to the h1
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
font-size: 20px;
color: white;
}
.colorbackground h1{
background-color: red;
display: inline-block;
padding: 0 1em 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1>Hello World!</h1>
</div>
</body>
</html>
You can add span to wrap your text
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
font-size: 20px;
color: white;
}
h1 span {
background-color: red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1><span>Hello World!<span></h1>
</div>
</body>
</html>
In the given code background-clip: padding-box; is working but the background-clip: content-box; isn't working. Please tell me what is wrong here. I found that padding must be there for the background-clip property to work and I have added the padding as well.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
.temp {
width: 400px;
height: 300px;
background-color: rgb(255, 153, 141);
background-clip: content-box;
border: 9px dotted blue;
margin: 20px;
float: left;
text-align: center;
/* background-clip: padding-box; */
}
.temp h3 {
padding-top: 90px;
}
</style>
<body>
<div class="temp">
<h3>Hasnain</h3>
</div>
<div class="temp">
<h3>Zain</h3>
</div>
<div class="temp">
<h3>brothers</h3>
</div>
</body>
</html>
Your code is working, you just added the padding to the wrong element ".temp h3" instead of ".temp"
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
.temp {
width: 400px;
height: 300px;
background-color: rgb(255, 153, 141);
background-clip: content-box;
border: 9px dotted blue;
margin: 20px;
float: left;
text-align: center;
/* background-clip: padding-box; */
}
.temp {
padding-top: 90px;
}
</style>
<body>
<div class="temp">
<h3>Hasnain</h3>
</div>
<div class="temp">
<h3>Zain</h3>
</div>
<div class="temp">
<h3>brothers</h3>
</div>
</body>
</html>
I have an issue with CSS display:none for mobile queries as exemplified in code below. When screen width is reduced to 600px the #media query rules remove a div that should be displayed.
div .mobile-content is being removed together with div .desktop-content under #media rules. The mobile screen becomes blank as both divs are removed instead of .desktop-content
I suspect its a simple issue...how do I fix this?
Here is the code...
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
.mobile-content {
display: none;
}
#media(max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>
You can use an extra media query if it is okay for you or just add display:block; to your .mobile-content{} inside #media (max-width:600px){} as suggested by the other answers.
It will solve the problem. The code will be:
#media all and (min-width:600px){
.mobile-content{
display:none;
}
}
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
#media all and (max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>
Add display: block; under the font-size: 28px; like this
#media(max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
display: block;
}
.desktop-content {
display: none;
}
}
Well the issue isnt that both are being removed. It's that the mobile isnt being displayed in the first place. Your code should look something like this:
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
.mobile-content {
display: none;
}
#media(max-width:600px) {
.mobile-content {
display: block;
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>