I'm trying to position the anchor 'Link' in the centre of the red section of the image at all times (all breakpoints). Here I have set the position: absolute; and adjusted it to be perfect.
However if I was add more text to the 'paragraph section' or adjust the current breakpoint, the position of this link would move. I put all my code on CodePen here:
https://codepen.io/anon/pen/PrVQgm?editors=1100
Hard positioning as below;
.hero-hub-image .btn-tertiary {
left: 175px;
top: 120px; }
If you are trying position element on fluid background image you have to use fluid units, so try use calc() function with %units to best fit your elements, e.g.
left: calc(15% + 100px);
Related
I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}
I have currently having issues keeping my div in the same place when the window is resized. In the example, it is .add div. The issue I am having is that it is going above the view region of the page, and I can't scroll to that portion of the page so I can't even see that when I resize.
Here is the code.
http://jsbin.com/kazizeruxi/1/
This is the part that I have tried dealing with
<div class = "add" align = "center">
<!--Everything inbetween -->
</div>
Ideally I am trying to keep the entry (in the farthest up left) to stay in the upper left no matter how it is resized.
I have tried messing around with media queries, but to no avail. It just turned out to be very inefficient with different browser sizes.
Any suggestions?
Just give them a absolute position.
.add {
position: absolute;
}
The proper way to do that is to give your element the position : fixed then it will have a fixed position from the root element or the body not the parent.
let us say you want it to be centered on the screen you can use this
.add{
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0)
}
of if you have a fixed with and height you can use margin instead of transform
.add{
position: fixed;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%
}
if you give it an position: absolute and the parent has a position: relaive then it will move with the parent element on resize
I was trying to recreate a magazine cover using HTML and CSS but I've hit a rock.
Whenever, I try to rotate the textarea and align it leftmost, I get only the top corner getting cut, but I would like to cut it more.
This is the CSS I use for my element :
textarea {
transform: rotate(-10deg);
height: 740px;
width: 520px;
}
Here's a fiddle
And here's the cover
Header positionning
Change the z-index of your element to put it on top of the other elements, e.g.
z-index : 10;
See this fiddle
Textarea positionning
You want to cut more of the textarea. It's really as simple as putting a
margin-left: -100px;
Rotate() rotates its contents, keeping its width and height.
You need to add extra padding or margin to show all the contents.
I have several stacked HTML <section>s with background images. Within each <section>, I have a panel with content inside.
JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/
JSFiddle Full-screen output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/
Ideally, I would like the main title (#proclaim) and the panels (.contentbox) to be a set pixel distance from the bottom of each background image.
However, I can't seem to achieve this.
I did try the position: relative; with an inner position: absolute; trick, combined with a value for bottom and that didn't seem to work at all - it actually sent all the boxes to the top of the page.
Currently, I'm using a mish-mash of positioning to try to get everything to fit.
However, when you change the browser window size or the resolution, the panels and text move everywhere.
Is there a way to affix the main heading, and the panels to a set distance from the bottom of their respective background images?
works just fine
section {
position: relative;
}
.contentbox, #proclaim {
bottom: 10px; // your value
position: absolute;
}
How do I place an object in css to move in relation to the size of the window browser?
I tried the following types of positioning: Fixed, Absolute, and Relative. The problem I have with these are that when ever I change the size of the window browser, it stays in the same exact spot and does not move with the browser size.
Thanks in advance for the help!
You must be defining top, bottom, left, right using px, so you need to use % instead
Demo
<div class="hello">
Whatever
<div>
.hello {
position: absolute;
top: 50%;
left: 50%;
}
Make sure if you are using absolute position, than wrap it inside a relative positioned container, so that it doesn't flow out in the wild
Without any information I'm going to assume your using pixels as your top and left? What you may want to try is:
.my-class {
position: absolute;
top: 20%;
left: 20%;
}
You can also position based on specific sizes using #media queries in css