I'm designing a blog post preview tile for my personal website. Whatever I try to do, there is always a gap between the image and its own bottom border, or a gap between the image and the border of the container. It appears on mobile, when zooming, and when scaling. It's a really simple design and I'm going crazy and can't figure out how to get it to work. I know it's related to sub pixel rendering issues. Please help me! I would either like the gap gone or to render as the same color as the border so it doesn't look jank.
body {
background: rgba(255, 225, 172, 1);
display: grid;
grid-template-rows: [row-start] 1fr [row-end row2-start] 6fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: [col-start] 1fr [col-end];
row-gap: 60px;
padding-left: 120px;
padding-right: 120px;
}
.blog_preview_container {
grid-row: 2;
grid-column: 1;
height: 354px !important;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.blog_preview_titlecard {
height: 352px;
width: 272px;
}
.blog_tile {
height: 340px !important;
width: 240px !important;
margin: 1px;
background-color: white;
border: 6px solid black;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
color: white;
display: inline;
overflow: hidden;
cursor: pointer;
transform: scale(1);
}
.blog_tile:hover {
transform: scale(1.05);
}
.blog_tile_image {
display: block;
border-bottom: 6px solid black;
}
.blog_tile_text {
height: 138px;
font-family: 'nunito', sans-serif;
font-size: 1rem;
font-weight: 900;
margin: 0;
padding: 16px;
}
<body>
<div class="blog_preview_container">
<img class="blog_preview_titlecard" src="https://example.com/titlecard_location">
<div class="blog_tile">
<img class="blog_tile_image" src="https://example.com/img_location">
<p class="blog_tile_text">Text Goes Here</p>
</div>
</div>
</body>
I play with this image and it seems like you can just change the background-color of your blog_tile as black will remedy it.
body {
background: rgba(255, 225, 172, 1);
display: grid;
grid-template-rows: [row-start] 1fr [row-end row2-start] 6fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: [col-start] 1fr [col-end];
row-gap: 60px;
padding-left: 120px;
padding-right: 120px;
}
.blog_preview_container {
grid-row: 2;
grid-column: 1;
height: 354px !important;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.blog_preview_titlecard {
height: 352px;
width: 272px;
}
.blog_tile {
height: 340px !important;
width: 240px !important;
margin: 0px;
border: 6px solid black;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
color: white;
background-color: white;
}
.blog_tile:hover {
transform: scale(1.05);
margin-top: 0px;
background-color: black;
}
.blog_tile img {
height: 340px;
width: 242px;
object-fit: cover;
margin: -1px 0px 0px -1px;
}
.blog_tile_image {
display: block;
border-bottom: 6px solid black;
}
.blog_tile_text {
height: 138px;
font-family: 'nunito', sans-serif;
font-size: 1rem;
font-weight: 900;
margin: 0;
padding: 16px;
color: white;
}
<body>
<div class="blog_preview_container">
<img class="blog_preview_titlecard" src="https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=">
<div class="blog_tile">
<img class="blog_tile_image" src="https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=">
<p class="blog_tile_text">Text Goes Here</p>
</div>
</div>
</body>
Here's a stripped down example that doesn't involve hard-coding any colors. It uses an absolutely positioned psuedo-element with a border that is overlaid above the image. The container is given a padding amount that is 1px smaller than the border width so it is rendered underneath it. The bottom border of the <img> is then relocated to the top of the <p> below it and the image is given a bottom margin of -1px.
*, *::after, *::before { box-sizing: border-box; }
body {
background: rgba(255, 225, 172, 1);
display: grid;
align-items: center;
justify-content: center;
}
.blog_tile {
position: relative;
display: grid;
grid-template-rows: max-content 1fr;
height: 340px;
width: 240px;
padding: 5px;
background-color: white;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
color: white;
cursor: pointer;
overflow: hidden;
}
.blog_tile::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 6px solid black;
}
.blog_tile:hover {
transform: scale(1.05);
}
.blog_tile img {
display: block;
margin-bottom: -1px;
object-fit: cover;
line-height: 0;
white-space: collapse;
}
.blog_tile p {
margin: 0; padding: 3px;
border-top: 6px solid black;
color: black;
}
<div class="blog_tile">
<img src="https://picsum.photos/300">
<p> TESTING </p>
</div>
Try this may be it will help.
img {
object-fit: contain;
}
I fixed this by having the tile background color match the border color, and then setting the background of the text with my script instead of background color of the tile. That way when gaps are created it matches the border color and doesn't look weird. Now it looks correct at all scales. it doesn't handle non-cropped images but all the images pulled are autocropped to the correct size in my PHP.
window.onload = () => {
var colors = ['#ffffff', '#ffbd4b', '#ff634b', '#4b9fff'];
var nowhitecolors = ['#ffbd4b', '#ff634b', '#4b9fff'];
document.querySelectorAll('.blog_tile').forEach(
el => {
var randcolor = colors[Math.floor(Math.random() * colors.length)];
el.style.backgroundColor = '#ffffff';
el.children[1].style.backgroundColor = randcolor;
if (randcolor ==='#ffffff') {
var randnowhitecolors = nowhitecolors[Math.floor(Math.random() * nowhitecolors.length)];
el.style.borderColor = randnowhitecolors;
el.children[0].style.borderColor = randnowhitecolors;
el.style.backgroundColor =randnowhitecolors;
el.style.color = randnowhitecolors;
};
}
);
};
.blog_preview_container {
grid-row: 2;
grid-column: 1;
height: 354px;
display: flex;
flex-flow: row wrap;
justify-content: center;
column-gap: 40px;
row-gap: 40px;
}
.blog_tile {
height: 340px;
width: 240px;
margin-top: 0px;
border-width: 6px;
border-style: solid;
border-radius: 6px;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.65);
color: white;
display: inline;
cursor: pointer;
transform: scale(1);
}
.blog_tile:hover {
transform: scale(1.04);
}
.blog_tile img {
height: 164px;
width: 240px;
padding: 0px;
margin: 0px;
object-fit: cover;
border-bottom-width: 6px;
border-bottom-style: solid;
}
.blog_tile p {
height: 138px;
font-family: 'nunito', sans-serif;
font-size: 1rem;
font-weight: 900;
line-height: 22px;
margin: 0;
padding: 16px;
}
<body>
<div class="blog_preview_container">
<div class="blog_tile">
<img class="blog_tile_image" src="https://example.com/img_location">
<p class="blog_tile_text">Text Goes Here</p>
</div>
</div>
</body>
Looks great at all screen sizes, no more gaps!
Related
I have an input element which has a padding of 1em on both the left and the right side. But I have applied "box-sizing: border-box" to it. However, It's width is still more than the other elements. I think it might be because I need to remove some piece of code but I'm not sure. The input element is definitely the one issue as the other element is properly center aligned.
Below is the code:
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa
}
body {
font-family: Montserrat, sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em
}
.my-contacts-div {
align-items: center
}
.contacts-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.contact-card {
width: 288px;
margin: .5em;
border-radius: .5em;
box-shadow: var(--secondary-color) 1px 1px 10px;
padding: 0 .75em;
word-wrap: break-word
}
.contact-form {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
align-self: center;
width: 350px;
z-index: 1;
background-color: var(--secondary-color);
border-radius: 1em;
padding: 1em;
box-shadow: 1px 1px 1.5em var(--main-color);
visibility: hidden
}
.contact-form:target {
visibility: visible
}
.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 40px;
box-sizing: border-box
}
.searchbar {
margin: .5em;
width: 100%
}
#media screen and (max-width:687px) {
.my-contacts-div {
padding: 0
}
.contact-card {
width: 100%
}
}
#media screen and (max-width:614px) {
body {
margin-top: 130px
}
}
<div class="my-contacts-div">
<h2>Heading</h2>
<form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
<div class="contacts-list">
<div class="contact-card">
<h3>Other component</h3>
</div>
</div>
</div>
What is wrong with it?
The issue was most likely that when you were using '.input-field' in the CSS, it was maybe not correctly using it so I just put 'form input.input-field' and also added some CSS to the form element. Now it is looking completely aligned.
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa
}
body {
font-family: Montserrat, sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin-top: 70px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1em
}
.my-contacts-div {
align-items: center
}
.contacts-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.contact-card {
width: 288px;
margin: .5em;
border-radius: .5em;
box-shadow: var(--secondary-color) 1px 1px 10px;
padding: 0 .75em;
word-wrap: break-word
}
.contact-form {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: grid;
align-self: center;
width: 350px;
z-index: 1;
background-color: var(--secondary-color);
border-radius: 1em;
padding: 1em;
box-shadow: 1px 1px 1.5em var(--main-color);
visibility: hidden
}
.contact-form:target {
visibility: visible
}
form input.input-field {
margin: .5em 0;
border: solid 1px var(--secondary-color);
border-radius: .5em;
padding: 0 1em;
height: 40px;
box-sizing: border-box;
}
form {
box-sizing: border-box;
padding: 0 0.5em;
}
.searchbar {
margin: .5em;
width: 100%
}
#media screen and (max-width:687px) {
.my-contacts-div {
padding: 0
}
.contact-card {
width: 100%
}
}
#media screen and (max-width:614px) {
body {
margin-top: 130px
}
}
<div class="my-contacts-div">
<h2>Heading</h2>
<form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
<div class="contacts-list">
<div class="contact-card">
<h3>Other component</h3>
</div>
</div>
</div>
Add display: flex in the tag. It will solve the overflowing issue.
display: flex fills the entire container taking margin and padding into consideration. That's why it didn't overflow.
display: block is at 100% width by default and then adds margin and padding after causing the overflow.
I'm struggling with a CSS placement problem.
For a project I use clipboard.js to copy the content of a p tag.
In a div, I have my text on the left and a button on the right with an icon to copy the text. The size of the text is dynamic and I cut the text if it exceeds the length of the div.
I'm looking for a :
1 - Align the text vertically (on several lines if the text is too long)
2 - Put the button on the right with a margin on the left.
3 - center the button vertically
I managed to put the text and the button on one line with the display: inline-block property but both the button and the text are not vertically centered.
Here is my code: https://jsfiddle.net/n70jrymp/
See if this is what you looking for, i changed the display: inline-block for flex and centered the content.
#container {
width: 80% !important;
margin-left: 10%;
}
#result{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.resultItem {
display: flex;
border: 1px solid black;
background: white;
max-width: 100%;
width: 100%;
color: black;
line-height: 100%;
align-items: center;
justify-content: center;
}
.resultItem>p {
display: inline-block;
width: calc(100% - 60px);
overflow-wrap: anywhere;
margin: 0;
}
.resultItem>.clippy {
display: inline-block;
margin-bottom: 0;
width: 40px;
height: 40px;
cursor: pointer;
background-color: #fff;
background-image: url("https://abs.twimg.com/emoji/v1/72x72/1f4cb.png");
/* Twitter clipboard emoji */
background-size: 60% auto;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid rgba(0, 0, 0, 0.29);
border-bottom-color: rgba(0, 0, 0, 0.36);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.clippy:before {
content: '';
display: none;
position: absolute;
z-index: 9998;
top: 35px;
left: 15px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(0, 0, 0, 0.72);
}
.clippy:after {
content: 'Copy to Clipboard';
display: none;
position: absolute;
z-index: 9999;
top: 40px;
left: -37px;
width: 124px;
height: 36px;
color: #fff;
font-size: 10px;
line-height: 36px;
text-align: center;
background: rgba(0, 0, 0, 0.72);
border-radius: 3px;
}
.clippy:hover {
background-color: #eee;
}
.clippy:hover:before,
.clippy:hover:after {
display: block;
}
.clippy:active,
.clippy:focus {
outline: none;
}
.clippy:active:after,
.clippy:focus:after {
content: 'Copied!';
}
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://unpkg.com/mustard-ui#latest/dist/css/mustard-ui.min.css">
<div id="container">
<div id="result">
<div class="resultItem" id="test">
<p>My wonderful strzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddstrzfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
<button class="clippy" data-clipboard-target="#test"></button>
</div>
</div>
</div>
I have the following div box:
<div class="requests-container">
<div class="request-box">
<div class="request-details">
<h1>Table 6, 1:00PM</h1>
<h2>
Request made 10 min ago.
</h2>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
</div>
.status-button {
padding-bottom: 25px;
}
.requests-container {
display: grid;
justify-items: center;
align-items: center;
grid-row-gap: 30px;
}
.request-box {
border: 1px solid #999;
height: 200px;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
}
.request-details {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 40px;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
When the screen width is at least 1000px, I want the position of the button in the div to be like the following:
With the button centred vertically in the div and positioned to the right of the box.
I have tried to achieve this through the following CSS:
#media (min-width: 1000px) {
.status-button {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-left: 700px;
}
}
The above code gives me the following:
When I use padding-left to position the button to the right, the size of the button gets compressed. Not only that, when I make the screen size smaller, the button escapes the div box:
What is the best way to position my button to the right such that the size of the button does not shrink and the button remains contained in the div box?
Instead of position: absolute, padding and transform. You can use a flex layout to solve it.
Use displat: flex, flex-wrap: wrap, align-items: center and justify-content: space-between in the button element.
So, for status-button element, you use width: 100% and in media query, you set width: auto.
.status-button {
padding-bottom: 25px;
width: 100%;
}
.requests-container {
display: grid;
justify-items: center;
align-items: center;
grid-row-gap: 30px;
}
.request-box {
border: 1px solid #999;
height: 200px;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
}
.request-details {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 30px;
height: 100%;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
#media (min-width: 1000px) {
.status-button {
width: auto;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Requests Page</title>
<link rel="stylesheet" type="text/css" href="requests.css">
</head>
<body>
<div class="requests-container">
<div class="request-box">
<div class="request-details">
<div>
<h1>Table 6, 1:00PM</h1>
<h2>Request made 10 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is a simple example at codepen
https://codepen.io/themustafaomar/pen/poJOLqE?editors=1100
.requests-container {
border: 1px solid #999;
width: 66%;
border-radius: 5px;
border-color: #a2e8dc;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
-webkit-box-shadow: 0 10px 6px -6px #ededed;
-moz-box-shadow: 0 10px 6px -6px #ededed;
padding: 30px;
margin: auto;
}
.request-button {
height: 50px;
font-size: 20px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(
to right,
rgba(141, 227, 227, 1) 0%,
rgba(114, 240, 218, 1) 100%
);
cursor: pointer;
}
.request-details h1 {
font-size: 30px;
color: #28bfa6;
}
.request-details h2 {
font-size: 22px;
}
#media (min-width: 1000px) {
.requests-container {
display: flex;
justify-content: space-between;
align-items: center;
}
}
HTML
<div class="requests-container">
<div class="request-details">
<h1>Table 6, 1:00PM</h1>
<h2>Request made 10 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
Just replace in your css file the following to achive your goal:
.status-button {
margin-left: 25rem;
margin-top: -5rem;
}
and
.request-button {
height:0;
}
Having trouble centering text vertically in a fieldset. This particularly when a sibling is hidden.
This is what the code should looks like when the sibling is showing:
#title {
margin: 20px;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
hr {
color: white;
background-color: white;
width: 80%;
height: 1px;
}
#formulaLine {
color: white;
background-color: white;
height: 1px;
}
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
}
.center {
text-align: center;
}
p .center {
margin-top: 5%;
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
.legend {
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
float: left;
margin-top: -20px;
margin-left: 20px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
}
<div>
<fieldset class="tBox">
<legend class="legend">Definition</legend>
<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
<div>
<hr>
<section id="formula">
<div class="row">
<p class="column center" style="margin-top: 5%; margin-left: 3%;">Formula:</p>
<div class="column center">
<p>∑ # completed tasks in month 'A' (from month 'B' schedule)</p>
<hr id="formulaLine">
<p>∑ # tasks forecased to finish in month 'A'</p>
</div>
</div>
</section>
</div>
</fieldset>
</div>
Problem is that when hiding the formula sibling (I am using React), the definition doesn't center. It looks like this:
#title {
margin: 20px;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
hr {
color: white;
background-color: white;
width: 80%;
height: 1px;
}
#formulaLine {
color: white;
background-color: white;
height: 1px;
}
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
}
.center {
text-align: center;
}
p .center {
margin-top: 5%;
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
.legend {
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
float: left;
margin-top: -20px;
margin-left: 20px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
}
<div>
<fieldset class="tBox">
<legend class="legend">Definition</legend>
<div id="definition">MY TEXT HERE. IT CAN GET LONG. MULTI-LINE. HERE'S MORE TO FILL THIS OUT. LONG LONG LONG.</div>
</fieldset>
</div>
Note that the CSS for this second example is the same as above. What am I doing wrong? I've tried Top, Float, and a variety of other options. None seem to work.
I would recommend adjusting your markup to support using :only-child in CSS. This is a pseudo-class that represents an element without any siblings. Definitely give the documentation a review for some other examples.
/* Selects each <p>, but only if it is the only child of its parent. */
p:only-child {
background-color: lime;
}
It's pretty useful for situations just like this and the implementation wouldn't take very many changes.
var formula = document.createElement("P");
formula.innerText = "This element represents your formula being added to the container which removes the styles applied with :only-child.";
var active = false;
function toggleFormula() {
active = !active;
document.getElementById("legend").innerText = active ? "Click here to hide formula." :
"Click here to show formula.";
let tbox = document.getElementById("t-box");
if (active)
tbox.appendChild(formula);
else
tbox.removeChild(formula);
}
.container { position: relative; }
.legend {
position: absolute;
top: -10px;
left: 20px;
z-index: 1;
padding: 0.2em 0.8em;
background: #d65a31;
border-radius: 25px;
width: auto;
min-width: 200px;
font-size: 3vmax 2vmin;
font-family: 'Lato', sans-serif;
cursor: pointer;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
#definition:only-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tBox {
position: relative;
width: auto;
max-width: 100%;
min-height: 400px;
max-height: 500px;
background-color: #222831;
border-radius: 5px;
margin: 40px auto;
align-content: center;
color: #eeeeee;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
font-family: 'Lato', sans-serif;
}
#definition {
margin: 0 auto;
margin-top: 5%;
text-align: center;
max-width: 60%;
font-size: 1.5vmax;
}
#definition:only-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<legend id="legend" class="legend" onclick="toggleFormula();">Click here to show formula.</legend>
<fieldset id="t-box" class="tBox">
<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
</fieldset>
</div>
Alternative options are using position: absolute or display: flex:
/* Absolute Version */
#definition.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Flex Version */
.tBox {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
With your exiting code, just adding few properties to your css will be an easy fix. Flex properties are really helpful in these scenarios, align-items: center will align all elements inside the div to align vertically and justify-content: center will align items horizontally.
section#formula {
width: auto;
max-width: 70%;
background: #393e46;
box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
border-radius: 5px;
margin: 5% auto;
padding: 10px;
font-size: 2vmax 1vmin;
display: flex;
justify-content: center;
align-items: center;
}
.center {
justify-content: center;
display: flex;
width: 100%;
flex-flow: row wrap;
}
You can see it here.
I am having trouble vertically aligning the 's text inside a div.
This is what I have. I need to center "Next" inside the blue box:
#import url(http://fonts.googleapis.com/css?family=Muli);
/*Makes the little side arrow*/
.open {
position: fixed;
width: 100px;
height: 40px;
left: 50%;
top: -1000px;
margin-left: -80px;
margin-top: -30px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6px;
padding: 10px 30px;
color: #444;
transition: all ease-out 0.6s;
}
.open:hover {
border: 1px solid #aaa;
box-shadow: 0 0 8px #ccc inset;
transition: all ease-out 0.6s;
}
.tutorial-box {
position: fixed;
width: 400px;
height: 238px;
top: 75px;
background-color: #F3F3F3;
border-radius: 6px;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
}
.slider-turn p, .tutorial-box h1{
margin-left: 10px;
}
.tutorial-box:before {
content: '';
position: absolute;
left: -14px;
top: 28px;
border-style: solid;
border-width: 10px 14px 10px 0;
border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.tutorial-box p {
width: 350px;
font-size: 16px;
color: #a8aab2;
font-weight: 400;
line-height: 28px;
float: left;
margin: 0;
}
.tutorial-box .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
bottom: 0;
position: absolute;
}
.tutorial-box .bottom .btn-2 {
flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
width: 100%;
height: 54px;
background-color: #373942;
border-bottom-left-radius: 6px;
display: flex;
}
.tutorial-box .bottom span {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
line-height: 54px;
color: #fff;
margin-left: 25px;
font-size: 18px;
}
.next {
text-decoration: none;
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
background-color: #6cb5f3;
border: 0;
margin: 0;
padding: 0;
text-transform: uppercase;
color: #fff;
font-weight: bold;
border-bottom-right-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.next:hover {
text-decoration: none;
background-color: #6BA5D6;
transition: all .3s;
}
.next:active {
text-decoration: none;
background-color: #5F8AAF;
}
.slider-tutorial-box {
width: 350px;
margin: 0 25px;
overflow: hidden;
}
.slider-turn {
width: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TUTORIAL -->
<div class="tutorial-box">
<h1>Welcome</h1>
<span class="close"></span>
<div class="slider-container">
<div class="slider-turn">
<p>
Here, under the Company tab, is where you will do most of the company managment.<br>
</p>
</div>
</div>
<div class="bottom">
<div class="btn-2">
<span>Step 2/?</span>
</div>
Next
</div>
</div>
Please let me know how I can center the text vertically to the center of the div.
Thank you very much. Let me know if I wasn't clear enough.
Seems like you already did that for .tutorial-box .bottom span so, do the same thing for .next
.next{
line-height: 54px;
}
the simplest and possibly most easy way would be to add the 'center' and '/center' tag before and after the text you want, and after each letter use '/br' to move to the next line. this will add some bulk, but would be considerably easier than other methods.
<center>
'letter'</br>'next letter'</br>'next letter'</br>
</center>
repeating the letter and break for all letters
alternatively, you could also add "div" tags around the "a" tag. you would have to modify the 'height' and 'width' to make it vertical for you. I would use px for this and not '%' or 'em'. add this to them:
<div style="height: /* modify this */100px; width: /* and this*/20px;">
Next
</div>
this may not be AS compatible cross platform though.
Like this:
.next {
position: relative;
top: 50%;
transform: translateY(-50%);
}
A nice trick that works both vertically and horizontally.