css responsive square with overflow - html

i have a responsive square with text inside. i want the square to keep his proportions on all sizes, unless the text inside is overflow, than i want the square to be taller.
now, the text is just hidden.
http://jsfiddle.net/38Tnx/2253/
<div class='square-box'>
<div class='square-content'>
<div>
<span>text</span>
</div>
</div>
</div>
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}

Replace your .square-box css with the following code
.square-box{
position: relative;
width: 50vw;
height: 50vw;
overflow: hidden;
background: #4679BD;
}
JSFIDDLE DEMO

Try this. Hope it helps.
.square-box{
position: relative;
width: 50%;
/*overflow: hidden;*/
/*background: #4679BD;*/
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
background:#4679BD; /* moved */
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}

Related

align text in between two div with postioning

I am trying to create a progression section, where i have a text, image and progression.
I am able to achieve this but the problem here is that i want the image section and text should be vertical middle align to the parent div.
Is there a way i can use flex instead of relative and absolute.
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
You mean something like that? Add some flex properties to your .progress-info-wrapper class.
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
img {
width: 20px;
height: 20px;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
To vertically align your image and text, you should use flexbox in progress-info-wrapper
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
display: flex;
align-items: center;
height: 100%;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
Flex would help you with layout deciding how the items will need to be positioned next to each other but not over each other.
In that case position:absolute still fits better. To center the element you need the magic of margin: auto but you should give your element an height using fit-content.
Here's your demo with the .progress-info-wrapper css rules changed as:
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img
src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img">
<span class="text-wrapper">Add more items to get offer</span>
</div>
<div class="progress"></div>
</div>

Responsive div to stay in nested div doesnt work

The button will not stay with the image when I adjust the size of the browser. I tried the position:absolutein the img div and the responsive didn't work well with the position property. Obviously the float:left doesn't work either as written in CSS.
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}
<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>
See on JSFIDDLE of what I did.
You're using fixed sizing units and this is not how you make responsive pages.
If you want the button to stay in the middle, you have to position it absolutely inside the relative div.
Something like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
#keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}
<div class="relative">
<button class="centered">I'm in the middle</button>
</div>
You are better off changing the image to be a background image on that div and moving the button to be inside of it.
HTML:
<section class="section6">
<div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
z-index: 2;
text-align: right;
margin: 0 auto;
border: 1px solid red;
position: relative;
background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
background-size: cover;
width: 400px;
height: 370px;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
position: relative;
z-index: 5;
top: 100px;
margin-right: 20px;
}
Try this:
HTML:
<section class="section6">
<div class="img-group">
<img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters">
<button>REQUEST AN INTERPRETER</button>
</div>
<div class="bg-bar"></div>
</section>
CSS:
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group {
position: relative;
}
.img-group img {
text-align: center;
max-width: 100%;
margin: 0 auto;
border: 1px solid red;
}
.img-group button {
display: block;
position: absolute;
z-index: 10;
margin-left: -75px;
top: 50%;
left: 50%;
max-width: 100%;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
}

Why i can not set image style height 100% for height as same as div container?

Why i can not set image style height 100% for height as same as div container ?
When i tried to test code it's will be show like this.
https://i.imgur.com/Q1MGP0Z.png
I want to show image like this.
https://i.imgur.com/GeLUUCo.png
with class name img_look style height: 100%; How can i do ?
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
The problem lies with the parent container of the img tag. Since, there is no height defined for it, you cannot use 100% in relation to the parent container. Define a height as shown below in my code for .div_2. And it will work fine.
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width:100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
height:100%;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
Your image IS the same size as your div, but your div ISN'T the same size as the a tag that hold it. since your a has overflow:hidden; you can't see that your div is actually bigger.
you cant just add height:100%; or width:100%; to your div, but keep your image dimensions the same.
Also : that feels really wrong don't you think ?
height: 197.207px;
I think You Need This https://jsfiddle.net/wqhch5et/ view full screen mode.
You need to change position: absolute; to position: fixed; in div_2
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: fixed;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>

Position pseudo element behind parent

I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
z-index: 53;
top: 2%;
z-index: 2;
}
.box:after {
content: '';
//position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -3;
}
<div class="box-wrapper">
<div class="box"></div>
</div>
Remove the z-index of the box and add position:absolute for box:after
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
}
.box:before {
content: '';
position: absolute;
background-color: blue;
height: 50px;
width: 70px;
z-index:-2;
}
jsfiddle
The blue box is supposed to be behind the green box
Just remove all the irrelvant z-index values, then it works perfectly.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
color:white;
}
.box:after {
content: '';
position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -1;
}
<div class="box-wrapper">
<div class="box">I'm on top</div>
</div>

How to add a half circle at the bottom middle of my header?

Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/