I have two images placed on top of each other in a div with a caption underneath. I would like all of these elements to scale proportionally and together as the browser window shrinks.
Currently, the position of the two images shifts and does not look the same on mobile.
.highlightimg {
max-width: 700px;
height: auto;
width: 100%;
display: block;
position: relative;
z-index: 1;
padding-top: 10vh;
margin-right: 0;
}
.showcase {
max-width: 750px;
margin:auto;
position: relative;
margin-top: 8vh;
margin-bottom: 8vh;
}
.logo {
left:0;
max-width: 400px;
width: 100%;
height: auto;
position: absolute;
z-index: 3;
left: 0px;
}
.caption {
margin-top: 10px;
margin-bottom: 0;
padding: 0;
text-align: right;
}
<div class="showcase">
<img src="logo.png" class="logo">
<img src="highlight.jpg" class="highlightimg">
<p class="caption">Caption text here.</p>
</div>
The best analogy for the product I'm trying to receive is grouping multiple layers in Photoshop which allows you to scale all the layers together as if it was one single image. I am new to HTML/CSS, so I hope this makes sense and is not asked too often. Thanks for your help.
The position of the logo relative to the image under it will definitely shift. One of the reason for this is that you use vh unit for some properties, including the padding-top of the .highlightimg. 10vh in desktop and in mobile is different (they both have different viewport sizes). If you want both elements to stay the same, anchor both of them to the left and top by setting at least constant padding-top, margin-top, or the top properties (including the left padding and margin).
Maybe adding top: 18vh; to .logo could help. Using top: 10vh; instead of 18vh while also removing margin-top: 8vh from .showcase could also help. This is to ensure the top offset of the .highlightimg provided by its padding-top property scales proportionally with the top offset of the .logo. These solutions assume that there are no other elements in the page that will surely alter the location of these elements especially the ones without absolute position.
position: absolute; anchors your element to the screen. While position: relative; keep the element original rendered position and move the element itself relative to its original rendered position. Both have radically different impacts on where your elements get rendered on the screen. If you want both element to be exactly at the same location, use absolute for both and use same top and left properties.
Point is, don't rely on CSS properties to determine the exact location of your objects. If you want behavior like the one you describe in your Photoshop analogy you could find a way by using canvas.
Related
I am runnning across an issue in which I am not sure how to solve.
I have a grid system doing the following, BUT I will do a standard "div" solution. But here is my dilemna.
I have a "LogoComponent" That displays my companies logo on the left, and a partner's logo on the right.
I have two headers that display in two different conditions.
Centered Display (just the logos)
Left Aligned Display (left aligned logos, with other content on the right)
Caveats: the "partner logo" needs to confine within the div/space as sometimes the svg's are large, so I "can" offer a height, but not a width.
The image shows the two views. The "LogoComponent" I am having an issue as I was using a flexbox, but not sure that is gonna work since why I try to make it "left" as a component, it moves off the container div. Any ideas how to solve this?
I can solve it, but I feel it will be too generalized, as I'm looking to make this "LogoComponent" be wide enough for the logos, and then appropriately resize if the partner logo is there or not.
As said in the comment, you can center LogoComponent using margin: 0 auto; when it's the :only-child.
If it's not the only child, using margin-right: auto; will push all other content to the right as we are in a flex container.
.parent {
display: flex;
}
.LogoComponent {
margin-right: auto;
}
.LogoComponent:only-child {
margin: 0 auto;
}
/* for styling only */
.LogoComponent {
width: 50px;
height: 50px;
background-color: lightblue;
}
/* for styling only */
.OtherContent {
min-width: 200px;
background-color: lightgreen;
}
<div class="parent">
<div class="LogoComponent"></div>
</div>
<hr>
<div class="parent">
<div class="LogoComponent"></div>
<div class="OtherContent"></div>
</div>
I suspect this is a case of not really understanding CSS3 animations, but in general, I've found Angular animation very frustrating to learn.
So to start, I have a plunker for this: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview
As I'm required to show code to get a plunker link going, here's the CSS in the test situation:
#wrapper {
position: relative;
overflow: hidden;
}
#wrapper, form, #wrapper > div {
height: 400px;
width: 400px;
}
#wrapper > * {
transition: 10s linear all;
}
form {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
form.ng-hide-add-active {
top: -100%;
}
#wrapper > div {
position: absolute;
left: 0;
top: 0;
background: #66F;
}
#wrapper.ng-hide.ng-hide-remove-active {
top: 100%;
}
I have a situation where I want to make a form, and if it successfully submits, I want the form to slide up with the success message sliding up under it. The problem is that while I can get the form to slide away, the under div just appears. In fact, it works better on plunker than on my code, where it starts up shown, goes away via animation, then just reappears when the form is submitted. No idea why that's the case, but in general, Angular animations are frustrating me. I tried looking up examples, and many mention using ng-animate="'name'" to create custom classes, but that doesn't seem to work for me. Likewise, the documentation mentions an ng-hide-remove class, but I never see that getting applied.
Is there any advantage to using CSS3 transitions over creating custom animations with the animate module, and just using jQuery to do it? I understand keyframes may be the biggest advantage? This is just making it really hard to do stuff that seems relatively easy in jQuery working...
The examples using ng-animate="'name'" is for versions earlier than Angular 1.2.
For these kind of animations, vision two states for each involved element.
Visible
Hidden
You have a wrapper. Inside the wrapper you have two elements involved in the animation - a form and a div with a message. Now set up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be visible inside the container.
Here is an example based on yours (changed it some for clarity):
#wrapper {
position: absolute;
height: 200px;
width: 200px;
top: 100px;
left: 100px;
border: 1px solid silver;
}
#form {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #DDFEFF;
transition: all 1s ease-in-out;
}
#submitted {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: gold;
transition: all 1s ease-in-out;
}
Both the form and the div are as large as the wrapper and aligned to the wrappers top, which means in this state they will overlap. This is not a problem however, since they shouldn't be visible at the same time.
Now define their hidden states.
For example, the form should when hidden be located above the wrapper:
#form.ng-hide {
top: -100%;
}
And the div should when hidden be located below the wrapper:
#submitted.ng-hide {
top: 100%;
}
That should be enough but minor tweaks might be needed depending on what AngularJS version you are using.
Demo: http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview
I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/
The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.
To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.
This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.
On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.
.box-1 {
width: 25% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
.box-2 {
width: 50% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
Thanks a lot for ANY help!
Arne
So what I found is that you need to force an aspect ratio.
Try modifying the following styles:
.box-1 {
width: 25% !important;
height: 0;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
position: relative;
padding: 13.75% 0 0 0;
}
.box-1 img {
width: 100% !important;
height: auto !important;
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%
Hope this solves your issue.
Reference
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}
I am creating a full width grid of images that use media queries to change how many columns of images there are. You can see a working demo here: http://vitaminjdesign.com/grid/
Using img{max-width: 100%} the images stretch to the width of its container. This works great, and the demo is working. As you can see, there should be a 1px space between each image. I am using the border-box model so the space is created by using padding-right.
BUT, if you resize the window, you will notice that the 1px margin between images sometimes change, and appear to have these inconsistent amounts of white space between/below images.
Upon inspection of each image, the browser is rendering the images at slightly different sizes (1px difference, but no more). This creates these uneven lines. The question is, if every image is EXACTLY the same size, how are they being rendered at slightly different sizes (which is turn causes this layout problem)? If you inspect each image, you will notice that the sizes are sometimes different, and sometimes the same (depending on the screen width).
CSS Below:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#work{width:100%; clear:left;}
#work li{width:20%; height:auto; padding-right: 1px; padding-bottom: 1px; float:left; position: relative; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
#work li a{display: block; position: relative; width: 100%; height: auto;}
#work li img{display: block; max-width: 100%; height: auto; }
I will not list the media queries here, but all they do is change the width of the list items.
Any thoughts as to why this is happening and how I can fix it?
The issue is on your media-queries and nth-child selectors. But I'm not really sure why setting border-right: none; is adding 1px of height for the grid. To solve the problem just delete the border-right: none; inside this selectors:
#work li:nth-child(3n+3) {
border-right: none; //Delete this
}
#work li:nth-child(2n+2) {
border-right: none; //Delete this
}
Removing the margin attribute on the * selector solves the problem for me.
* {
-moz-box-sizing: border-box;
font-weight: normal;
padding: 0;
}
The problem is because each list item has a calculated width. BEcause all of the columns EXCEPT the last column have a padding-right / border-right, they effectively have a different width, thereby making the image a different width/height. By removing the rule for zero padding/border on the last item of the column, all of the images have the exact same width and height.