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>
We are trying to create Email application. We are facing issue in message body div which is over lapping with header div (contains To/CC/Subject). On page load everything looks good but when start adding email id's in To field then body section is getting overlapped with header.
.MainDiv{
position: fixed;
width: 65%;
max-width: 890px;
height: 80%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
}
.Header{
clear: both;
margin: 0 5px 25px;
min-height: 100px;
display: block;
position: absolute;
width: 99%;
border: solid 1px green;
padding: 10px 20px 0px;
overflow: initial !important;{
}
.Body{
position: absolute;
border: solid 1px red;
top: 175px;
bottom: 72px;
width: 100%;
overflow-y: auto;
}
ReplyMessage_Screenshot
remove position: absolute; it's causing problem
.MainDiv{
position: relative;
width: 65%;
max-width: 890px;
height: 100%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
border: solid 1px black;
overflow-y : auto;
}
.Header{
clear: both;
min-height: 100px;
display: block;
width: 100%;
border: solid 1px green;
overflow: initial !important;
}
.Body{
border: solid 1px red;
width: 100%;
overflow-y: auto;
}
h2{
background-color:yellow;
}
h3{
background-color:teal;
}
<div class = "MainDiv" >
<div class ="Header" contenteditable="true">
<h2>
Header ygygyggyggygyyygyggygyyg yyfyffyyffyfyfy yfyfyfyfy gygygygygyyg yggygygyyggy gygyygygyyggygygygygy yggyygygyggyy uhuuuguug guuggugu
</h2>
</div>
<div class= "Body" contenteditable="true">
<h3>
Message Body
</h3>
</div>
</div>
You seem to be overdoing it. Here is what you need perhaps.
.MainDiv{
}
.Header{
margin: 0 5px 10px;
min-height: 100px;
display: block;
border: solid 1px green;
padding: 10px 20px 0px;
}
.Body{
border: solid 1px red;
margin: 0 5px 0;
overflow-y: auto;
padding: 10px 20px 0px;
height:300px;
max-height:600px;
}
<div class="MainDiv">
<div class="Header">
</div>
<div class="Body">
</div>
</div>
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>
I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.
My HTML is:
<div class="wrapper">
<div class="inner">
</div>
</div>
And CSS:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner{
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
}
Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.
Set the position of the child to relative and the z-index to -1:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
update the styles of inner class with position absolute and give z-index: -1;;
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
Here is the updated jsFiddle
You can do what you are wanting without the inner container as well.
http://codepen.io/creativenauts/pen/rLWZqp
* {
box-sizing: border-box;
}
.wrapper {
width: 200px;
height: 100px;
border: 20px solid #fff;
background-color: lightblue;
box-shadow: 0px 0px 1px rgba(#000, 0.5);
position: relative;
&:before {
position: absolute;
content: '';
width: 100%;
height: 100px;
top: -20px;
left: -20px;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
}
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;