I want to have a column with 4 divs with a background-image and fit the 100% of the parent width and give the same to the height to make a square. This is what i have without %:
My HTML:
<div class="col-sm-3 slots" style="background-color: red;">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
And my CSS with width and height in pixels.
.slot {
background-image: url("img/Inventory_slot_background.png");
background-repeat: no-repeat;
width: 68px;
height: 68px;
}
.slots {
padding: 0;
}
I want to give width: 100%; and then something like height: width;
Edit: The problem is that if i use the padding-bottom: 100%; if i want to put text or images, the backgrund expands and look like this:
You may use a pseudo element:
.slot {
box-shadow:inset 0 0 5px #C9A170;
background:#EBE6C9;
border:solid #78624A;
overflow:hidden;
padding:5px;
margin:1em;
}
.slot:before {
content:'';
float:left;
padding:50% 0;
}
body {
margin:0;
}
<div class="col-sm-3 slots" style="background-color: red;">
<div class="slot"> anything here</div>
<div class="slot"> can grow taller than the initial square shape</div>
<div class="slot"></div>
<div class="slot"></div>
</div>
I don't understand what you're trying to accomplish... if you want those boxes to dynamically change size according to their parent div you need javascript for that, can't do with CSS.
You can use a vertical padding with a percentage for this:
.slots {
width: 150px;
}
.slot {
width: 100%;
padding-bottom: 100%;
}
http://jsfiddle.net/26dhhune/
Related
I have the following requirements:
I need a div with an image + text inside.
The div should keep its aspect ratio and all images inside of the divs should have the same height (to do this, I use: Maintain the aspect ratio of a div with CSS).
The image inside of the div should be stretched in order to completely fill the parent div.
I prepared a jsfiddle
I have two main issues:
As you can see, the left div is higher, because it has text inside. This collides with the padding-bottom: 150%-approach which is used to preserve the aspect ratio of the divs when their size is changed. The goal, however, is that all divs have the same size no matter if/how much text they have inside.
Moreover, I would like to change the opacity of the background image when I hover the div. However, the text-opacity should not change. I think this can only be achieved via JS. How?
Add text as position:absolute
.inner-text{
position:absolute;
width:100%;
height:100%;
text-align:center;
z-index:1;
}
.event:hover .inner-text{
background:rgba(255,255,255,0.5)
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
Update fiddle code: https://jsfiddle.net/f5uxz4mx/8/
.bit-3 {
width: 33.33333%;
float: left;
margin-left: 20px;
}
.event {
margin: 0 auto;
position: relative;
border: 2px solid #000000;
padding-bottom: 150%;
background-size: cover;
}
.inner-text{
position:absolute;
width:100%;
height:100%;
text-align:center;
z-index:1;
}
.event:hover .inner-text{
background:rgba(255,255,255,0.5)
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
<div class="inner-text">
Text inner
</div>
</div>
</div>
try adding background-size: contain;height: 0;
.bit-3 {
width: 33.33333%;
float: left;
max-resolution: res;-left: 20px;
}
.event {
margin: 0 auto;
position: relative;
border: 2px solid #000000;
padding-bottom: 150%;
background-size: cover;
}
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg);background-size: contain;height: 0;">asdf text
</div>
</div>
<div class="bit-3">
<div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
</div>
</div>
I am attempting to create what I thought would be a simple layout of divs, however the css is proving to be a little more complicated than I initially thought. Each of the DIVs need to stand alone (so I cannot use a div to contain the SQUARES and ROW, and another div to hold the COLUMN) for ease of responsiveness.
I am trying to achieve this...
With a narrow responsive version like this...
But I can't seem to get the ROW container to sit below the SQUARE containers. This is the code I have so far and a fiddle.
HTML
<div id="wrapper">
<div id="content">
<div id="item" class="square">
text
</div>
</div>
<div id="content">
<div id="item" class="square">
text
</div>
</div>
<div id="content">
<div id="item" class="horiz">
text
</div>
</div>
<div id="content">
<div id="item" class="vert">
text
</div>
</div>
<div id="content">
<div id="item" class="vert">
text
</div>
</div>
CSS
#wrapper{
max-width: 95%;
height: auto;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
background: #00F;
}
#content{
margin-top: 25px;
background: #F00;
display: inline;
}
#item{
background: #F0F;
text-align: center;
}
.square {
width:100px;
height:100px;
margin:1%;
float:left;
}
.horiz {
width:200px;
height:100px;
margin:1%;
float:left;
display: block;
}
.vert {
width:100px;
height:200px;
margin:1%;
float:left;
}
Here is one way of creating a responsive grid similar to what you need.
I would start with the following HTML:
<div id="wrapper">
<div class="item square s1">text square 1</div>
<div class="item square s2">text square 2</div>
<div class="item horiz">text horiz</div>
<div class="item vert v1">text vert v1</div>
<div class="item vert v2">text vert v2</div>
</div>
and look at the following CSS:
#wrapper {
width: 90vw;
height: 45vw;
margin: 0 auto;
background: #00F;
position: relative;
}
.item {
text-align: center;
background-color: pink;
}
.square {
width: 23.75%;
height: 47.5%;
position: absolute;
top: 2%;
}
.s1 {
left: 1%;
}
.s2 {
left: 25.75%;
}
.horiz {
width: 48.5%;
height: 46.5%;
position: absolute;
top: 51.5%;
left: 1%;
}
.vert {
width: 23.75%;
height: 96.0%;
position: absolute;
top: 2%;
}
.v1 {
left: 50.5%;
}
.v2 {
left: 75.25%;
background-color: yellow;
}
The trick is to set the units for the containing block using viewport-percentage lengths
(vw units, http://www.w3.org/TR/css3-values/#viewport-relative-lengths).
I set the width to be 90% of the viewport width and the height to be half of that
value so you get a block that is 2:1 in aspect ratio.
You can then use absolute positioning to place the various elements within the grid
using percentage values for the width, height and margins.
The result is responsive, but the content can overflow since all the child blocks have
fixed dimensions (that may be okay in your mobile application).
You can use a similar approach for the narrow-screen layout, using a 1:2 width:height
ratio instead of 2:1.
See demo at: http://jsfiddle.net/audetwebdesign/nwgcLcc0/
Note: It would have been a lot easier to add a wrapper around the two-squares+horizontal set of elements and then a second wrapper around the two vertical elements.
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
I want to place divs next to each other. I dont't know number of divs, since this is dynamically created and changed. I would like to have one parent div which will have scrollbar in case there are many child divs (and their width is greater than parent).
Here's the jsFiddle example. So, basically I would like to have all this three columns, next to each other and with scrollbar on the bottom of parent div.
HTML:
<div class="content">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
CSS:
content {
width: 100px;
background- color: #355E95;
overflow: visible;
}
.column {
width: 50px;
display: inline-block;
}
Add white-space:nowrap to your parent div.
FIDDLE
You would need to use a content div for the scroll and then a wrapper for the columns, adjusting the width of the wrapper to fit all 3 of your columns (150px in your example).
The column structure is made by floating div's left, but it will float to the width of your parent container, in this case your parent container is only 100px so we need to add a wrapper for them to fit inside.
If you also want a vertical scroll you will need to set a height to your container.
Jsfiddle: http://jsfiddle.net/tYnH3/
css:
.content {
width: 100px;
background-color: #355E95;
overflow: auto;
}
.content-wrapper {
width: 150px;
}
.column {
width: 50px;
float: left;
}
html:
<div class="content">
<div class="content-wrapper">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/bdssw/
use float:left;
.column {
width: 50px;
display: inline-block;
float:left;
}
Try the following JS fiddle
http://jsfiddle.net/jT6SW/1/
#wrapper
{
float: left;
height: 150px;
width: 250px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll;
}
use width:auto;
.content {
width: auto;
background-color: #355E95;
overflow:scrolling;
position:fixed;
}
.column {
width: 50px;
float:left;
}
http://jsfiddle.net/XqSJG/6/
I want to have three columns, a 1000px middle column that is centered to the page and then a column on the left and right that takes up the remaining width.
I basically want something that looks like this:
Where the wrapper is 1000px and the two side spaces are half of the remaining total space.
You can easily centre an element with margin: 0px auto. This will leave a space on the left and right of the element. If the element is inside another which takes up the entire width, then a background can be placed and centred inside it.
An example might be:
<div id="container">
<div id="content"></div>
</div>
Then the CSS would look like:
#container {
width: 100%;
/* Background properties go here. */
}
#content {
margin: 0px auto;
width: 1000px;
}
It wouldn't be possible to put content either side of the #content div.
For a pure CSS approach, try something like http://jsfiddle.net/hKB9T/2/ (make sure to widen your browser window so that the "results" box is ~1200px wide or so)
it isn't complete (depending on your requirements, you may need to fiddle with the position of the .center element) but it should put you on the right track.
<div id="page">
<div class="center">center column</div>
<div class="leftcol">
<div class="inner">left column</div>
</div>
<div class="rightcol">
<div class="inner">right column</div>
</div>
</div>
and
.leftcol, .rightcol {
width: 50%;
float: left;
}
.leftcol .inner {
margin-right: 500px;
height: 200px;
}
.rightcol .inner {
margin-left: 500px;
height: 200px;
}
.center {
width: 1000px;
margin: 0 auto -200px auto;
background-color: #eee; /* just for illustration */
}
so lets say your "page width" is 1024px in width. I would do something like this --
html:
<div id="page_content">
<div id="element_left">
</div>
<div id="centered_element">
</div>
<div id="element_right">
</div>
</div>
css:
#page_content { width:1024px; margin:0px auto 0px auto;}
#element_left { width:12px; float:left;}
#element_right { width:12px; float:left;}
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;}