.home {
height: 100vh;
border: 0px solid rgb(255, 255, 255);
background-image: url(../img/b.jpg);
background-size: cover;
}
.home-content {
height: 80vh;
/* border: 4px solid red; */
}
.heading {
/* border: 2px solid red; */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
<section class="home">
<div class="home-content">
<div class="heading">
<div>Shubham karwal</div>
</div>
</div>
</section>
After removing border from .home the text Shubham karwal which was previously centered shifted towards left a bit.
What to do?
Please do help
You just have to add four lines to your css file:
.heading div {
height: 100%;
text-align: center;
}
Here is the example with the css added:
.home {
height: 100vh;
border: 0px solid rgb(255, 255, 255);
background-image: url(../img/b.jpg);
background-size: cover;
}
.home-content {
height: 80vh;
/* border: 4px solid red; */
}
.heading {
/* border: 2px solid red; */
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size: 100px;
}
.heading div {
height: 100%;
text-align: center;
}
<section class="home">
<div class="home-content">
<div class="heading">
<div>Shubham karwal</div>
</div>
</div>
</section>
It depends on where the border is being added/removed. And also whether any other CSS settings are keeping the standard padding/margins that a browser might add to some elements or not.
The height is set at 100vh. If the box-sizing has not been altered it will default to value content, which means any padding and any borders are not included in the browser's calculation of the size of an element.
In the snippet given in the question neither the default padding/margins nor the default setting of box-zising are altered. Hence the height overall is greater than 100vh (what with the default top padding and the addition of a border) so space for a scroll bar is created on the right hand side and the text (well, the elements it is in) all shift a bit to the left.
Quite often you'll see these settings at the top of a style sheet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
which means all three of those settings are set as given for all relevant elements unless subsequently set.
Try this in your 'real' situation to see if it cures the problem.
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 28 days ago.
I know this question has been asked hundreds of times, but for some reason I cant get it to work.
Both my HTML and CSS is rather simple, but I cant seem to center the div (livechat-wrapper) horizontally.
I just want the div to be as wide as the textarea, and placed just above the textarea, but it is "stuck" to the left side of my view.
Any ideas on how to do this?
<body >
<div class="livechat-wrapper">
</div>
<form>
<textarea maxlength="400" rows="1"id="input_field" class="input_field" type="text" name="q" placeholder="Write a message..."></textarea>
</form>
</body>
* {
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
html, body {
background: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
/*linear-gradient(to bottom right, #FDABDD, #374A5A);*/
width: 800px;
height: 600px
}
form {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10px;
}
.input_field {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
width: 90%;
border: none;
padding: 1.2em;
outline: none;
font-weight: 400;
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
border: none;
resize: none;
outline: none;
}
.livechat-wrapper {
background: rgba(255, 255, 255, 0.4);
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
height: 80%;
width: 90%;
border-radius: 10px;
border: 0.05em solid red;
display: flex;
flex-direction: row;
justify-content: center;
}
I tried using on the div, but with no luck
display: flex;
flex-direction: row;
justify-content: center;
There are several ways to center a div horizontally using CSS. Here are a few examples:
Using margin: auto:
div {
width: 50%; /* or any other width */
margin: 0 auto;
}
This method works by setting the left and right margins to auto, which will push the div to the center of the parent element.
Using Flexbox:
div {
display: flex;
justify-content: center;
}
This method works by using the justify-content property to center the div within the parent element
Using Grid:
div {
display: grid;
place-items: center;
}
This method works by using the place-items property to center the div within the parent element.
Using transform: translate:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
The body has a width of 800px however that doesn't affect the form due to absolute positioning. So you will want to remove the width on the body. Also the div is limited to 90% width. So you can either change that to 100% and add box-sizing: border-box; to correct for margins or add margin: auto; which should center it on the page.
Try adding this to the your CSS
body {
display: flex;
justify-content: center;
width: 800px;
}
.livechat-wrapper {
margin: auto;
width: 90%;
}
I am making a navbar for my website. I have a div in which I want to have the logo and, aligned to the far right, a download button. I am using the CSS property 'justify-content' and 'space-between' to align the button to the right. However, when I add padding to the left side of the div, the button is pushed off the page.
Here is my code:
body, html {
margin: 0;
background-color: #000000;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
height: 30px;
position: fixed;
background-color: rgb(10, 98, 160, .5);
width: 100%;
border-bottom: 1px solid #808080;
display: flex;
justify-content: space-between;
padding-left: 20px;
}
<div id="header">
<img src="titanium_tsp.png" height="100%">
<button>Download</button>
</div>
You said that the header is 100% of the width, but with the default box-sizing of content-box, that means that content of the header is 100% of the width, which disregards the padding. Change the box-sizing to border-box so that padding is taken into consideration as well:
#header {
box-sizing: border-box;
. . .
}
You can add a margin-right to your button to make sure you negate the padding.
body, html {
margin: 0;
background-color: #000000;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
height: 30px;
position: fixed;
background-color: rgb(10, 98, 160, .5);
width: 100%;
border-bottom: 1px solid #808080;
display: flex;
justify-content: space-between;
padding-left: 20px;
}
#header button {
margin-right: 20px;
}
<div id="header">
<img src="titanium_tsp.png" height="100%">
<button>Download</button>
</div>
This is html code snippet:
my_button.onclick = () => {
image_holder_div.classList.remove('display_none_class');
let imgTag = `<img id="nnn" src="${fileURL}" class="mx-auto d-block" alt="..."></img>`;
image_holder_div.innerHTML = imgTag;
}
.container-fluid{
max-width: 650px;
width: 95%;
padding: 30px;
background-color: rgb(250, 252, 253);
border-radius: 4px;
border: 1px solid #dfe1e5;
/* box-shadow: 2px 2px 2px; */
position: relative;
}
.first{
height: 400px;
border: 2px dashed #8b8e96;
background-color: #fffce5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
}
.image_holder_div{
height: 400px;
width: 100%;
border: 2px dashed #8b8e96;
background-color: #b4a429;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
position: absolute;
top: 30px;
}
<div class="container-fluid">
<div class="first">
</div>
<div class="image_holder_div display_none_class">
</div>
</div>
When I click on my_button to display image, the image_holder_div not maintained aspect ratio while displaying image. It's showing like this I upload the image here
image_holder_div
Can anyone please tell me why it's happening and how can I fix this issue...
Explanation of the cause:
It's totally clear from the code, that you have set the width of image_holder-div to 100% of its parent container. Since its parent element is .container-fluid, it would attain its width. It is seen that you have added padding: 30px in .container-fluid, hence, you see a space of 30 pixels between the parent and image holder div.
Solution:
You can add the following styling on the image_holder_div:
width: calc(100% - 60px);
Adding this line would use some CSS calculations and set the height of the div equal to 100% of the parent element minus 60px, i.e. 30px from left and right both. (Don't forget to add space before and after the minus sign)
For more about the calc() function:
https://www.w3schools.com/cssref/func_calc.asp
I have a problem with positioning the vertical line. Here's the project:
https://prnt.sc/wp2vh4
div class="col span-1-of-2"
to separate those two lists BUT - there's a grey vertical line in the 'center' between them. When I make border-right for the first div, it's way too on the right side. How can I make this line more in the center?
two elements are block - should it be something connected to that? but I don't want to 'ruin' the column system.
You could essentially take the two columns and give them a box-shadow of a half pixel each (totaling to 1px side by side). Half pixels don't work with border declarations reason being.
.container {
display: flex;
height: 150px;
}
.col {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
}
.left {
box-shadow: .5px 0 0 #000;
}
.right {
box-shadow: -.5px 0 0 #000;
}
<div class="container">
<div class="col left">Left</div>
<div class="col right">Right</div>
</div>
There are a lot of ways to do this, another solution would be using the old columns css property, like this
.container {
columns: 2;
column-gap: 0;
column-fill: balance;
column-rule: 2px solid #ff44cc;
text-align: center;
padding: 10px;
}
<div class="container">
<div>Block</div>
<div>Block</div>
</div>
Take the solution that mosts suits you.
There are many ways to accomplish a vertical divider between columns.
Option #1
The easiest is to utilize CSS flex-box to create the columns. This will cause both columns to be the same height in the container and you can use a border to create the visual divider.
/* this section illustrates the container sizes */
#container {
border: 1px dashed #dadada;
padding: 2px;
}
.col {
padding: 20px;
font-family: Helvetica, Arial, Sans-serif;
background: tan;
border: 1px dashed #333;
}
/* this shows the solution */
#container {
display:flex;
justify-content: space-between;
}
.col {
flex-basis: 50%;
}
.col:first-child {
border-right: 3px solid aqua;
}
<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>
Option #2
Use a pseudo element on the parent container to create a border.
/* this section illustrates the container sizes */
#container {
border: 1px dashed #dadada;
padding: 2px;
}
.col {
padding: 20px;
font-family: Helvetica, Arial, Sans-serif;
background: tan;
border: 1px dashed #333;
}
/* The solution */
#container {
position: relative;
overflow: auto;
}
#container:before {
content: '';
width: 2px;
background: aqua;
position: absolute;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.col {
float:left;
width: calc(50% - 42px);
/* need to remove the border & padding width from the full width */
}
<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>
Option #3
Really there are lots more options, a CSS gradient background, shadows, CSS Grid, CSS Columns, this list goes on.
I'm new to flexbox and trying to make a menu using it.
I want links to have a nice border on the bottom when user hovers on them. But even if I set box-sizing: border-box; flex keeps recalculating text position and element 'jumps' instead of predicted behaviour.
I have an example with the problem. I don't want content inside my element to jump when I hover.
Is there any simple solution/edition to my code to make it work as expected? I know other ways of achieving what I want: set baseline, use relative/absolute positioning...
.item {
display: flex;
width: 200px;
height: 100px;
background: #123;
color: #fff;
text-align: center;
justify-content: center;
flex-direction: column;
}
.item:hover {
border-bottom: 10px solid lightgreen;
box-sizing: border-box;
}
<div class="item">
Content
</div>
By adding a 10px border on hover, you are changing the size of the box on hover. That will reposition surrounding elements... on hover.
One solution is to reserve the space for the border at all times. In other words, have the 10px border factored into the element in a normal state.
This border gets the element's background color (or transparent) so it is not visible. On hover, you only change the color.
.item {
display: flex;
width: 200px;
height: 100px;
background: #123;
color: #fff;
text-align: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 10px solid #123;
}
.item:hover::after {
border-bottom: 10px solid lightgreen;
}
<div class="item">Content</div>
I would use an inset box-shadow for this feature.
I managed to recreate the effect by changing the :hover css to:
.item:hover {
box-shadow: inset 0 -10px lightgreen;
}
example here
What if you just set a bottom border by default using the same colour which is on its background? Once you hover over your item, you will need just to change the colour.