I'm trying to adapt the images from the buttons (#but2, #but1) to their full height possible (in the div) and their corresponding width according to their height (width: auto).
I've tried with this code for the images from the buttons:
#but1 img, #but2 img{
height: 100%;
width: auto;
}
But I can't get the output I want. I share an image showing what's the output of that code and what's the output I want.
Thanks a lot for your help!
#but1 {
margin-left: auto;
margin-right: 5px;
background-color: transparent;
border: 0;
}
#but2 {
margin-left: 5px;
margin-right: auto;
background-color: transparent;
border: 0;
}
#but1 img,
#but2 img {
width: 100%;
height: auto;
}
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#but-cont-2 {
margin-top: 25px;
background-color: #79b2f7;
position: relative;
}
#textarea {
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
float: left;
}
.text {
width: 100%;
background-color: transparent;
float: right;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container" id="but-cont-1">
<textarea id="textarea" name="prod"></textarea>
<button onclick="sub()" id="but1">
<img id="but1" src="https://cdn-icons-png.flaticon.com/512/861/861180.png" alt="">
</button>
</div>
<div class="button-container" id="but-cont-2">
<label id="cont" class="text"></label>
<button id="but2">
<img id="but2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="">
</button>
</div>
</div>
Try using display: flex; for the button and try to resize the images with pixels like width: 20px; and height: auto; or verse versa, it should fix it.
Here is my idea of doing that: https://jsfiddle.net/L1ma5qrc/86/
*{
margin: 0;
padding: 0;
}
body{
padding: 20px
}
#but1 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but1:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center right;
height: 50px;
width: 50px;
margin-right: 16px;
margin-left: auto;
}
#but2 {
/* margin-right: 5px; */
/* background-color: transparent; */
border: 0;
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
border: 1px solid lightgray;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#but2:before {
content: "";
display: block;
background: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png") no-repeat;
background-size: 50%;
background-position: center left;
height: 50px;
width: 50px;
margin-right: auto;
margin-left: 16px;
}
<div>
<div class="button-container" id="but-cont-1">
<button id="but1">
</button>
</div>
<div class="button-container" id="but-cont-2">
<button id="but2">
</button>
</div>
</div>
I think I'd look at applying the images as backgrounds. It cleans up the markup quite a bit and makes positioning easier.
Other tips:
Don't use floats for alignment. They're an outdated layout technique and have very few appropriate uses anymore.
Avoid absolute positioning when possible. It can also be troublesome.
Floats don't work with absolute positioning. Use one or the other if you must.
Rely less on IDs in your CSS. Ideally everything is class-based so it's reusable.
Consider not removing outlines. They're important for accessibility.
Avoid using label elements other than with form inputs. That would be nonstandard and also a possible accessibility issue.
.button-container {
background-color: #fff;
width: 50%;
height: 50px;
border-radius: 125px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.button-container.alt {
margin-top: 25px;
background-color: #79b2f7;
}
.button-container button {
width: 100%;
height: 100%;
background-size: auto 60%;
background-position: 93% 50%;
background-repeat: no-repeat;
border: 0;
}
.button-container button.icon-recycle {
background-image: url("https://cdn-icons-png.flaticon.com/512/861/861180.png");
}
.button-container button.icon-trash {
background-image: url("https://cdn-icons-png.flaticon.com/128/1078/1078599.png");
background-position: 7% 50%;
}
#textarea {
position: absolute;
width: 85%;
background-color: transparent;
border: 0;
height: 100%;
outline: none;
resize: none;
}
.text {
width: 100%;
background-color: transparent;
border: 0;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: right;
right: 21px;
}
<div>
<div class="button-container">
<textarea id="textarea" name="prod"></textarea>
<button class="icon-recycle" onclick="sub()"></button>
</div>
<div class="button-container alt">
<span class="text"></span>
<button class="icon-trash"></button>
</div>
</div>
I child div is not being able to fill the corner of a parent div with a border-radius.
See the top right corner of this picture
.outer {
border-radius: 20px;
background: red;
height: 400px;
overflow: hidden;
position: relative;
width: 600px;
z-index: 10;
border: solid 1px white;
}
.corner {
border-radius: 0 0 0 20px;
background: white;
padding: 14px 20px;
position: absolute;
right: -4px;
top: -4px;
}
<div class="outer">
<div class="corner">Corner Element
</div>
</div>
Any ideas or workarounds?
You can add a small padding and make the background to cover only the content.
.outer {
border-radius: 20px;
background: red content-box;
padding:1px;
height: 400px;
overflow: hidden;
position: relative;
width: 600px;
z-index: 10;
border: solid 1px white;
}
.corner {
border-radius: 0 0 0 20px;
background: white;
padding: 14px 20px;
position: absolute;
right: -4px;
top: -4px;
}
<div class="outer">
<div class="corner">Corner Element
</div>
</div>
Or disable the coloration in that corner with a gradient:
.outer {
border-radius: 20px;
background: linear-gradient(-135deg,transparent 20px,red 0);
height: 400px;
overflow: hidden;
position: relative;
width: 600px;
z-index: 10;
border: solid 1px white;
}
.corner {
border-radius: 0 0 0 20px;
background: white;
padding: 14px 20px;
position: absolute;
right: -4px;
top: -4px;
}
<div class="outer">
<div class="corner">Corner Element
</div>
</div>
I have created a div container and within the container, there is a div box. Inside the box, I have a button that is supposed to be centered at the bottom of the box.
I have searched around and before anyone does the "duplicate post" I have tried everything that they've said. Such as, adding a "display: block;" into my code etc and still it's not centering the button into the middle. I have been messing around with whatever I can think of to try and centering the button but nothing is working.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
These three values set properly on your mainButton CSS should solve your issue:
width: 40%;
left:50%;
margin-left:-20%;
Its key to note what the calculation is here. The left property is centering the item at 50% of the page, and the negative margin-left is offsetting the items position in accordance with its width. Since its width is 40% the negative margin has to be half of this, ie 20%. With this in mind you can adjust the width and the offset if your design changes, better yet using css variables and calc() mean that you could set the width only and the margin would calculate itself.
As an example:
left:50%;
--buttonWidth: 40%;
width: var(--buttonWidth);
margin-left:calc( var(--buttonWidth) / -2);
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1{
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton{
position: absolute;
bottom: 0;
padding: 7px 5px;
width: 40%;
left:50%;
margin-left:-20%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
}
.box-1:hover #mainButton{
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<a href="http://www.google.co.uk">
<button type="button" id="mainButton"> Go To Website</button>
</a>
</div>
</div>
Try with this code, i think this will help u in fixing the issue.
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
padding: 5px;
width: 60%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
Just add "left: 0; right: 0;" in #mainButton
.container {
max-width: 80%;
margin: auto;
overflow: hidden;
background-color: #fff000;
}
.box-1 {
background-image: url();
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: solid #000 1px;
margin: 10px;
padding: 10px;
width: 30%;
height: 260px;
transition: transform .5s;
overflow: hidden;
position: relative;
}
#mainButton {
position: absolute;
bottom: 0;
padding: 7px 5px;
margin: 0 auto;
width: 40%;
margin-bottom: 15px !important;
display: block;
overflow: hidden;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
opacity: 0;
transition: .5s;
left:0px;
right:0px;
}
.box-1:hover #mainButton {
opacity: 1;
color: #fff;
background-color: #000;
border: 2px solid #fff;
font-family: inherit;
cursor: pointer;
}
<div class="container">
<div class="box-1">
<button type="button" id="mainButton"> Go To Website </button>
</div>
</div>
It's because your button's parent is a link tag. Your button is not a direct child of the flexbox
I've looked at some other threads, but nothing seems to work. I'm trying to center a lightbox of an unknown width in the center of the page (horizontally). Any help would be appreciated. The code is as follows.
HTML
<div class="backdrop"></div>
<div class="box">
<div class="close">x</div>
<img src="../pics/placeholder.png">
</div>
CSS
.backdrop {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter:alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
width: auto;
height: auto;
background: #ffffff;
z-index: 51;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;
}
.close {
position: absolute;
padding-left: 5px;
padding-top: 5px;
margin-left: 98%
margin-top: 4px;
cursor: pointer;
font-family: sans-serif;
}
• To center an element horizontally with position: relative use:
.element {
position: relative;
display: inline-block;
margin: 0 auto; /* We don't care about 0, but we do care about auto. */
}
• To center an element horizontally with position: absolute or position: fixed use:
.element {
position: fixed; /* Lightboxes usually use position: fixed. */
left: 50%;
transform: translateX(-50%);
}
I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>