I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.
Related
I want grid container to maintain square shape. So when screen is resized, it will get bigger or smaller, but it's height will be always same as it's width. I want to place 3 images inside, with top one taking up two columns, and bottom ones are square taking one column each.
HTML:
<div class='container'>
<div class='grid'>
<img></img>
<img></img>
<img></img>
</div>
</div>
SASS:
.container: {
background: #fff;
max-width: 600px;
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
& > img:first-child {
grid-column: 1 / span 2;
grid-row: 1;
}
img {
width: 100%;
background-color: #000;
object-fit: cover;
}
}
I tried adding pseudo element to grid to maintain square ratio, only to find out that it won't work for grid. I tried giving img height: 100% but it made the too long.
I found some questions about how to keep images inside square, but non of them was about how to keep grid container square and prevent from being stretched out by children.
I'd do the following:
Make the grid width and height responsively sized - for this use this method (.container and &::after pseudo element)
Make the grid itself follow the square width and height of the container (.grid-wrapper)
Use a container for the images, so that the containers resize inside the grid (1st row = 2 col wide, 2nd row = 2x1 col) (.grid-box)
Use absolute positioned images in the divs, so they actually cover the divs
HTML code:
<div class='container'>
<div class='grid-wrapper'>
<div class='grid'>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
<div class="grid-box">
<img src="https://picsum.photos/200/300"></img>
</div>
</div>
</div>
</div>
SASS code:
$-gutter: 10px;
$-max-width: 600px;
* {
box-sizing: border-box;
}
.container {
position: relative;
max-width: $-max-width;
width: 100%;
background: #ffff00;
&::after {
content: "";
display: block;
padding-bottom: 100%;
}
}
.grid-wrapper {
position: absolute;
width: 100%;
height: 100%;
padding: $-gutter;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: $-gutter;
width: 100%;
height: 100%;
&-box {
position: relative;
width: 100%;
height: 100%;
&:first-child {
grid-column: 1 / span 2;
}
}
img {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
object-fit: cover;
}
}
Here is a Fiddle demo: https://jsfiddle.net/robertp/uLfj1swm/
And a screenshot of how this solution renders:
I'd like to know how can I code the 3 blocks fader from the Spring.io website. Image here:
It has a dividing line that changes the image gradually as you move it.
This can be done with simple HTML and javascript code. Here's the complete jsfiddle https://jsfiddle.net/zn3b1hov/34/
Basic Idea is very simple.
First, You need 2 SVG images one is colored and another is grayscale. I am using this 2
grayscale-image
colored-image
Now Create 2 absolute div one on top of another and use these images as background.
Then create a slider as wide as the images. I am using HTML range type input
Finally change the top div's width according to sliders value.
Complete HTML, CSS and JS
<style>
#fader-diagram-your-app {
position: relative;
height: 286px;
}
#fader-diagram-modern-java-gray {
position: absolute;
height: 238px;
width: 800px;
margin: 31px auto;
background: url('https://spring.io/img/homepage/diagram-modern-java-gray-9a417697a51646e42df7e9d7f024709d.svg') no-repeat;
background-size: 100%;
}
#fader-diagram-modern-java-color {
position: absolute;
height: 238px;
max-width: 800px;
margin: 31px auto;
overflow: hidden;
width: 200px;
}
#fader-diagram-modern-java-color div {
position: absolute;
height: 238px;
background: url('https://spring.io/img/homepage/diagram-modern-java-color-e10b7eec68b1fe60eefeab0cf20a20da.svg') no-repeat;
background-size: 100%;
width: 800px;
}
#fader {
background-color: #34302d;
width: 6px;
height: 275px;
border-radius: 4px;
position: absolute;
left: 0;
}
#myRange {
width: 800px;
position: absolute;
top: 50%;
}
</style>
<div id="fader-diagram-your-app">
<div class="sidebyside" id="fader-diagram">
<div id="fader-diagram-modern-java-gray"></div>
<div id="fader-diagram-modern-java-color" style="width: 39.6875px;">
<div></div>
</div>
<div id="fader">
</div>
<input type="range" min="0" max="800" value="0" class="slider" id="myRange">
</div>
</div>
<script>
var slider = document.getElementById("myRange");
var coloredImage = document.getElementById("fader-diagram-modern-java-color");
var fader = document.getElementById("fader");
slider.oninput = function() {
coloredImage.style.width = this.value + "px";
fader.style.left = this.value + "px";
}
</script>
I have a layout I am trying to make it responsive.
There is a 10px gap between the images the problem I am having is making the layout responsive. It does not keep the bottom edges aligned at certain sizes because the browser trying to retain the proportion on the horizontal images.
The big vertical image is 750px by 1200px. The small ones I have made 750px by 595px which is half the height minus half the height of the gap.
Any possible solution or ideas are welcome.
Try this (working codepen)
<div class="group">
<div class="sm"></div>
<div class="sm"></div>
</div>
<div class="lg"></div>
CSS
html {
overflow-y: scroll;
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
div {
width: calc(50% - 5px);
float: left;
}
.group {
margin-right: 10px;
}
.sm {
height: 200px;
margin-bottom: 10px;
width: 100%;
background: green;
border: 1px solid red;
}
.lg {
height: calc(400px + 10px);
background: green;
border: 1px solid red;
}
#media screen and (max-width: 700px) {
div {
width: 100%;
}
}
I have a section on a site that I have multiple image blocks. I have two columns with multiple rows. For some reason the margin and width are not being applied to these images. I have the following code in my media query for a viewport of 640px or less. Whenever you drag the corner of the page, the images do not scale in size at all. Also the left images stay in place instead of moving with the margin.
It is under the part called Site Sponsors in a viewport of 640px or less.
What is causing the images to not scale in height and width as well as the margin?
As you can see I have the images width defined in a percentage basis:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
As well as the margin defined:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
Does anyone see what I am doing wrong?
<div id="sponsor-left">
<div class="b_250">
<img src="images/Contractor Images/PMC spray foam equipment for sale.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Green Insulation Technology 300x200.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Spray foam rigs for sale a series.jpg">
</div>
</div>
<div id="sponsor-right">
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
</div>
.container {
width: 100%;
}
.content {
float: none;
text-align: center;
width: 100%;
}
/*----Second to Last Homepage Article---*/
#latestnews {
width: 100%;
text-align: center;
}
#latestnews .latestnews h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
}
#latestnews ul, #latestnews li{
text-align: center;
}
#latestnews li{
margin: 0 auto;
}
.latestnews img{
margin: 0 auto;
text-align: center;
}
#latestnews div.latestnews{
float:none;
width: 100%;
}
#latestnews p {
padding: 20px 10px;
clear: both;
}
#latestnews p.readmore{margin-top:10px; text-align:center;}
.column .sponsors {
width: 100%;
}
.column {
clear: both;
width: 100%;
margin: 0 auto;
}
.column .sponsors .b_250{
border: none;
}
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
.sponsors {
width: 100%;
margin: 0 2.5%;
}
.sponsors h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
text-align: center;
}
#sponsor-left {
float: left;
width: 45%;
}
#sponsor-right {
float: right;
width: 45%;
}
}
To center the ads, add this(although I prefer to avoid using ID's in selectors):
#sponsor-left a > img { margin: 0 auto; }
At which point you can then increase the width of the images to 100% to fill the width you declared for the left and right columns.
Also as I noted in the comments remove the float: right; and change to display: inline-block;
try display:block max-width:100%; height:auto;
for image to be center
You must use display:block or display:inline-block by default image is display:inline
How to center?
if your image is display:block use margin-left:auto; and margin-right:auto;
and for display:inline-block give text-align:center to image parent element
Note
Be care full your image css does not have float:left or float:right
i'm creating this base structure :
<ul>
<li>
<a>
blabla
</a>
</li>
</ul>
with css :
ul{
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
ul li{
height: 25%;
text-align: right;
width: 100%;
}
a{
display: block;
float: right;
height: 75%;
padding-right: 2%;
position: relative;
width: 98%;
padding-top:25%;
}
i can't manage to simply put the a at the bottom...
i thought giving the A a height of 25% and a padding of 75% would work but it takes 75% of the UL and not 75% of the LI.
anyone has an idea how come?
thanks a lot
What exactly are you trying to achieve?
If I am assuming correctly you want an <li> that is 25% the height of its container and the <a> to sit at the bottom-right of the <li>
If that is the case you could use this css
updated RE comment In this case we could use a <span> inside the <a> to position the text and set the <a> to fill the <li>
ul {
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
background-color: red;
}
li {
height: 25%;
text-align: right;
width: 100%;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: blue;
}
span {
display: block;
position: absolute;
bottom: 0;
padding: 2%;
width: 96%;
background-color: green;
}
and the html
<ul>
<li><span>blabla</span></li>
</ul>
Fiddle here
Please note that for this to work you need to set html, body { height:100%; } or have a container with an explicit height set. i.e. ul { height: 200px; } or div.container { height: 200px; }
I would also recommend applying the styles via classes.