I have a div and inside that div, I have the text and one card and I have to make them vertical and horizontally centre similar to the image below. Thanks in advance.
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
I watch all answers and I don't think, those answers are valid. So, I posted an answer.
.root_class {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin: 0 auto;
}
#media (max-width: 576px) {
.root_class {
flex-direction: column;
}
}
.text {
font-size: 2rem;
color: #bbb;
margin: 0;
margin-right: 1rem;
text-align: center;
}
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 1rem;
}
.percentile-card p {
margin: 0;
}
.percentile-card p:first-child {
color: #bbb;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="border root_class">
<p class="text">Where Do i Stand Overall ?</p>
<div class="percentile-card text-center">
<p>You did better Than</p>
<p><b>60%</b></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
In order to centre that in the middle of the page you can remove the float property from percentile-card and replace it with a centred margin.
For vertical alignment you can use view height.
This w3 link might be useful in highlighting margins. Along with these demos.
As for view height, if you do not want it set based on a constraint from the preceding element, you may want to consider positions.
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
margin: 0 auto;
padding:10px;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="percentile-card" style="display: flex;">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
For the border with card inside variant:
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="" style="display: flex; border:1px solid black;margin: 0 auto; padding:10px;width: 800px">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
i fix it....
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.Center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center Center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
👉🏻 Centering Things
Best place to understand and apply the centering css per your use case.
As per your code above, you can add css in your border class to be:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
Below is working snippet:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
Related
I am creating a website for a small project. One of the web pages includes a slideshow that should be manually operated using two buttons. How can i have the buttons placed infront of the slideshow image?
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
}
.slideshow-buttons {
display: flex;
justify-content: space-around;
}
<section class="slideshow-container">
<img id="slideShowImage" src="https://via.placeholder.com/450x150" alt="slideshow">
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
<footer class="footer">
</footer>
I have tried changing the position on the image to absolute and the buttons to relative (& the other way around because i dont know what im doing)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Womxn Skate History</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="..\css\bootstrap.min.css">
</head>
<header>
</header>
<body >
<section class="slideshow-container">
<img id="slideShowImage" src="img1.jpeg" alt="slideshow"/>
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
</div>
</body>
<footer class="footer">
</footer>
<script src="JS/script.js"> </script>
</html>
CSS:
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
position: relative;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
object-fit: cover;
}
.slideshow-button-right {
position: absolute;
left: 15px;
top: 50%;
}
.slideshow-button-left {
position: absolute;
right: 15px;
top: 50%;
}
I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section).
The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background.
I don't know if I'm explain it well but here is my code and the bug that I have:
* {
font-family: 'Fredoka', sans-serif;
margin: 0%;
padding: 0%;
}
body {
background-color: #3a5056;
color: white;
text-align: center;
}
html,
body {
height: 100%;
}
.middle {
background-color: white;
height: 1866px;
padding: 50px;
margin-top: 230px;
}
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
color: #2c3d42;
}
section .intro {
height: 40px;
width: 850px;
padding: 6%;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
min-width: 850px;
}
.intro:nth-child() {
align-self: center;
}
.abt-me {
position: relative;
width: 800px;
height: 250px;
padding: 1%;
color: #2c3d42;
display: block;
content: "";
margin-top: -2550px;
border: 1px hidden;
font-size: 18px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}
.text-box {
padding: 1%;
margin-top: -8px;
font-size: 21px;
width: 750px;
height: 250px;
margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<title></title>
</head>
<body>
<section class="main">
<div id="name">
<h1>Hello, I'm <span id="me">Sapph</span></h1>
</div>
<div id="scroll">
<section id="section02" class="demo">
<span></span>
</section>
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i></li>
<li>Github <i class="fa fa-github"></i></li>
<li>Linkedin <i class="fa fa-linkedin"></i></li>
</ul>
</nav>
</section>
<section class="middle">
<div id="cards">
<div class="cards-list">
<div class="card 1">
<div class="card_image"></div>
<div class="card_title title-white">
<p>Contact</p>
</div>
</div>
<div class="card 3">
<div class="card_image">
</div>
<div class="card_title">
<p>Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro">
<div class="abt-me">
<h2 style="margin-bottom: 12px" ;><b>
About Me</b>
</h2>
<div class="text-box">
<p>
<center>Hello, I'm...</center>
</p>
</div>
</div>
</section>
<footer>© Copyright</footer>
</body>
</html>
This is my problem: https://prnt.sc/w4Zkw0QU7P67
This is what I need: https://prnt.sc/UhNmn4djohPS
I took the photos in the developer tools. Thanks
Try to find the #media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.
#media only screen and (max-width: 890px) {
section{
margin: 0px;
padding: 10px;
}
}
If you want to change the section style for all screen widths just use:
#media only screen and (min-width: 360px) and (max-width: 1360px) {
section{
margin: 0px;
padding: 10px;
}
}
I've simple section using Flex
The same section in IE 11
The problem comes from using display: flex; flex-direction: column; in defaultSection. Once removed it shows up. But I can't remove it. It's nessecary for other, more advanced use cases.
I've tried to workaround this issue by using:
#media all and (-ms-high-contrast:active) {
.defaultSection {
display: flex;
flex-direction: column;
}
}
.defaultSection {
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
And it seems to work. I am just not sure if that's not gonna blow things out in the long run for me. Maybe there is better alternative than this?
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="author">
<meta content="2020-09-12 19:31:36" name="revised">
<title>My title</title><!-- CSS Default fonts START -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Hammersmith+One|Questrial|Oswald" type="text/css" rel="stylesheet" /><!-- CSS Default fonts END -->
<!-- CSS Default fonts icons START -->
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" rel="stylesheet" /><!-- CSS Default fonts icons END -->
<!-- CSS Always Required Default Visual Settings START -->
<style>
.defaultSection {
display: flex;
flex-direction: column;
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
.defaultSectionHead {
display: flex;
justify-content: center;
padding: 5px;
margin: 0px 0px 0px 0px;
font-weight: bold;
background-color: #00bfff;
color: #ffffff;
}
.defaultSectionText {
text-align: center;
}
</style>
<!-- CSS START -->
<style>
.overflowHidden {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.flexParent {
display: flex;
justify-content: space-between;
padding: 2px;
}
.flexParentInvisible {
display: flex;
justify-content: space-between;
}
.flexElement {
flex-basis: 100%;
}
.flexPanel {
flex-basis: 100%;
}
.flex-grid {
display: flex;
}
</style>
</head>
<body>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Default Section Style">Default Section Style </a> <a id="show_anchor-s17ncte" href="javascript:void(0)" onclick="show('anchor-s17ncte'); " style="display:none">(Show)</a><a id="hide_anchor-s17ncte" href="javascript:void(0)" onclick="hide('anchor-s17ncte'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-s17ncte" id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test1</span></div>
</div>
</div>
</div>
</div>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_anchor-1kln6uz" href="javascript:void(0)" onclick="show('anchor-1kln6uz'); " style="display:none">(Show)</a><a id="hide_anchor-1kln6uz" href="javascript:void(0)" onclick="hide('anchor-1kln6uz'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-1kln6uz" id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test2</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to create a business card through HTML and CSS. Following is the design:
Following is my code:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 50px 16px;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info>div:nth-child(2) {
text-align: right;
right: 0;
}
.number>div:nth-child(2) {
text-align: right;
right: 0;
}
<div class="card">
<div class="container">
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="number">
<div>R:5435437435</div>
<div>O:7438573478</div>
</div>
<div class="info">
<div>name#example.com</div>
<div>Address</div>
</div>
</div>
</div>
From the above code, I am not able to position the Phone Numbers, Email Address and Office Address in proper place where I want. No need of help for background images. I need help only for building the CSS part. Could anyone please help. Thanks in advance.
Everything is possible ;)
Give me a plus ;)
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 50px 16px;
position:relative;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info > div {
padding-top:10px;
text-align:center;
}
/*
.number > div {
display: inline-block;
margin-left:70%;
}
*/
.number > .number_container {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<div class="number">
<div class="number_container">
<div>R:5435437435</div>
<div>O:7438573478</div>
<div>name#example.com</div>
</div>
</div>
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="info">
<div>Address</div>
</div>
</div>
</div>
</body>
</html>
I don't know if this would help? I'm not a professional, correct if I'm wrong with this code.
BR
<!DOCTYPE html>
<html>
<head>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 50px 16px;
position:relative;
}
.center {
text-align: center;
display: flex;
flex-direction: column;
}
.info > div {
padding-top:10px;
text-align:center;
}
.number > div {
display: inline-block;
margin-left:70%;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<div class="number">
<div>R:5435437435</div>
<div>O:7438573478</div>
<div>name#example.com</div>
</div>
<div class="center">
<div>Full Name</div>
<div>Designation</div>
</div>
<div class="info">
<div>Address</div>
</div>
</div>
</div>
</body>
</html>
Look at the div#1, why it goes down when I add some text inside div#2>p
I've been trying to figure out, but nothing. I'm new in CSS. I cannot understand how it works this css3, I'm not a designer I'm a programmer, it gives a lot of headaches.
p.n: there's no div#1/2 inside the code, both are from the same class: container, Danke
.img {
width: 170px;
height:150px;
background: orange;
}
.contenedor:not(:first-child) {
margin: 0 50px;
}
.contenedor {
display: inline-block;
box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
transition: .1s;
cursor: pointer;
resize: none;
max-width: 170px;
}
.contenedor:hover {
box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
</style>
<body>
<div class="contenedor">
<div class="img">DIV #1</div>
<div class="leyenda">
<h4><b>John Doe</b></h4>
<p><b>This should be up.</b></p>
</div>
</div>
<div class="contenedor">
<div class="img">DIV #2</div>
<div class="leyenda">
<h4><b>Jane Doe</b></h4>
<p>Post you charge here.Post you
charge here.Post you charge here.</p>
</div>
</div>
</body>
</html>
Add vertical-align: top; to .contenedor (it has display: inline-block;, so it's aligned along the baseline by default):
.img {
width: 170px;
height:150px;
background: orange;
}
.contenedor:not(:first-child) {
margin: 0 50px;
}
.contenedor {
display: inline-block;
box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
transition: .1s;
cursor: pointer;
resize: none;
max-width: 170px;
vertical-align: top;
}
.contenedor:hover {
box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
</style>
<body>
<div class="contenedor">
<div class="img">DIV #1</div>
<div class="leyenda">
<h4><b>John Doe</b></h4>
<p><b>This should be up.</b></p>
</div>
</div>
<div class="contenedor">
<div class="img">DIV #2</div>
<div class="leyenda">
<h4><b>Jane Doe</b></h4>
<p>Post you charge here.Post you
charge here.Post you charge here.</p>
</div>
</div>
</body>
</html>