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>
Related
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.
I am trying to center a button in a fluid container with 100% vertical height and give it an offset from the bottom of the screen. I am pretty much there, however, the button is offset from the left and not correctly centered. See the example in my code snippet.
I am not sure what I am missing here... how can I correctly center the button to the center of the screen?
In my site code I have an image as my background in the main fluid container, hence why I have background size: cover; etc in my css.
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
add
left: 50%;
transform: translateX(-50%);
to .centered-button element for center that.
this link is complete answer for centering with position
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
position: absolute;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
left: 50%;
transform: translateX(-50%);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
and you can use flex to do that simply .
.main-div {
background-color: pink;
min-height: 100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
You should implement bootstrap alignment instead of using regular css, Try Flex containers. See my example below:
<button type="button" class="d-flex justify-content-center btn btn-primary">Primary</div>
Adding d-flex justify-content-center will horizontally align your element. To align the element vertically have a look at Vertical alignment
.main-div {
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
.centered-button {
vertical-align: middle;
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
/*You need to use display:flex; property of css on parent div of button to align it centerly regardless of any device you view it on
along with display: flex; you need these two property also
- align-items:center; ( this aligns button in center vertically )
- justify-content:center; ( this aligns button in center horizontally )
using positon absolute will not center the button on every device. as well as using left 50% will also not work for every device */
.main-div {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background-color: pink;
min-height: 100vh;
line-height:100vh;
min-width: auto;
position: relative;
}
.centered-button {
bottom: 3rem;
width: 15rem;
border-radius: 3rem;
border-top-width: 4px;
border-bottom-width: 4px;
border-right-width: 4px;
border-left-width: 4px;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
transition: all 0.3s ease 0s;
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="fluid-container main-div">
<button type="button" class="btn btn-primary centered-button">Primary</button>
</div>
</body>
</html>
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>
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>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 0px;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 0px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>
I am wanting to matching the height of the borders to the amount of padding I have set for my i element. Here is a jsfiddle visualizing how it looks.
What I have done so far is set the height to 100%, given the container div and i element a box-sizing: border-box property, but they have not worked. How can I proceed?
To be specific to your answer,
Remove padding from container
Assign padding to i
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
/*REMOVED FROM HERE*/
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p,
i {
margin-right: 50px;
}
/*ADDED HERE*/
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
</body>
</html>
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
.container {
display: flex;
background: royalblue;
width: 300px;
align-items: center;
justify-content: center;
margin: auto;
}
.box {
display: flex;
padding: 10px;
flex: 1;
justify-content: center;
}
.playButton {
border-left: 2px solid white;
border-right: 2px solid white;
}
.playButton:hover {
background-color: rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div class="container">
<div class="box">
<p>Blank</p>
</div>
<div class="playButton box">
<i id="playButton" class="fas fa-play fa-2x"></i>
</div>
<div class="box">
<p>Reset</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
You have to remove the padding from the #container div and place the 10px top and bottom padding to your i element otherwise your left and right border height will always be less than the #container div.
:root {
--gray: #CBC4C4;
--blue: #029DF1;
--white: #FFF;
--black: #000;
--secondBlue: #0089D3;
}
* {
padding: 0;
margin: 0;
font-family: Roboto, sans-serif;
color: var(--white);
}
#container {
margin: 100px auto;
background-color: var(--blue);
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p, i {
margin-right: 50px;
}
i {
border-left: 1px solid var(--gray);
border-right: 1px solid var(--gray);
padding: 10px 20px;
height: inherit;
color: var(--black);
}
i:hover {
background-color: var(--secondBlue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/1f5460a8a6.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div id="container">
<p id="timeArea">Blank</p>
<!-- <i id="pauseButton" class="fas fa-pause fa-2x"></i> -->
<i id="playButton" class="fas fa-play fa-2x"></i>
<p id="reset">Reset</p>
</div>
<script src="script.js"></script>
</body>
</html>