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%;
}
}
Related
In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/
<div class="box">
<div class="pic">
<img src="/images/img.png" class="img_pic" />
</div>
</div>
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
}
.img_pic {
display: block;
margin-left: auto;
margin-right: auto;
}
I want the image ("img_pic") to be centered vertically as well. With what I have I can do it horizontally but not vertically. I tried vertical-align: middle; but that didn't work and I tried line-height: 73px since the height of the box is 73px. I can't seem to figure a way out of this.
How can I center the image vertically while still retaining the horizontal centering?
Don't make the image a block element. As an inline element you can center it as text. Then set the line height to the same as the box, and set vertical alignment on the image to middle to put it in the middle of the text line:
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
text-align: center;
line-height: 73px;
}
.img_pic {
vertical-align: middle;
}
Demo: http://jsfiddle.net/AwgNy/
You cannot vertical-align block elements.
If you know the height of the image you could put an equal top and bottom margin on .img_plc or an equal top and bottom padding on `.box.'
As you've said it's variable height, then you can use display: table-cell for .box with vertical-align: middle;
If you know the dimensions of the image you can do it in the css and either use margin to push it down:
margin-top:/*(box height / 2) - (image height / 2)*/;
or use relative and absolute positioning:
.box
{
position:relative;
/*other code*/
}
.image_pic
{
position:absolute;
top:/*(box height / 2) - (image height / 2)*/;
}
If you cannot guarantee the dimensions of the image then you should use javascript/jQuery to get the image height and use the same formula as above for working out the offset. Then still using javascript/jQuery, edit the css for the image to set the offset for margin-top or top.
Just Use This CSS DEMO HERE
.box {
border: 1px solid #333;
cursor: pointer;
height: 73px;
margin: 40px 42px 0 0;
width: 269px;
position:relative
}
.img_pic {
display: block;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:auto
}
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :
How would you do it? Is it possible?
If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:
#pic1, #pic2 {
float: left;
position: relative;
}
#pic1 {
z-index: 2;
}
#pic2 {
right: 30px; /* Or whatever the difference in image sizes is */
}
You can use the CSS triangle trick with the transparent borders
html
<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>
css
.pic{
width:100px;
height:100px;
float:left;
text-align:center;
line-height:100px;
color:white;
position:relative;
}
.pic-1{
background:orange;
}
.pic-2{
background:limegreen;
}
.pic:after{
content:'';
display:block;
position:absolute;
height:0;
width:0;
z-index:10;
}
.pic-1:after{
top:0;
right:-10px; /* must match the border left */
border-left: 10px solid orange; /*play with width to change angle*/
border-bottom:50px solid transparent;
}
.pic-2:after{
bottom:0;
left:-10px; /* must match the border right*/
border-right: 10px solid limegreen;/*play with width to change angle*/
border-top:50px solid transparent;
}
Demo at http://jsfiddle.net/gaby/eh2f3/
First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:
.demo1 {
overflow-y: hidden;
}
Inside, there will be the base elements, that are floated left,
.base {
width: 100px;
height: 100px;
float: left;
}
Inside, a clipping element rotated:
.demo1 .clip {-webkit-transform: rotate(15deg);}
.clip {
height: 177%;
width: 125%;
margin-top: -40%;
-webkit-transform-origin: 0% 50%;
overflow: hidden
}
and inside, the image, counter-rotated
.demo1 .inner {
-webkit-transform: rotate(-15deg);
}
.inner {
-webkit-transform-origin: 0% 50%;
margin-left: -151%;
margin-top: 19%;
}
The html is :
WEBKITTED DEMO
webkitted means that only webkit prefixes are used :-)
Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.
Full CSS :
.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}
.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}
.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}
Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.
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.