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.
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%;
}
To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;
I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}
I've seen questions for putting an image in a text area, but I have a slightly different problem: I'd like to layer a textarea on top of an image. I've tried using the z-index style property but the image - which I fadeIn with jquery - always sits on top of the text area.
Here is another way of doing it which may be more versatile.
Create a block level container with two child elements, one for the image and one for the text area:
<div class="textpanel">
<img src="http://placekitten.com/300/300">
<textarea>some text area text...</textarea>
</div>
Apply the following CSS:
.textpanel {
position: relative;
}
.textpanel img {
display: block;
}
.textpanel textarea {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
background-color: rgba(255,255,255,0.5);
}
Set position: relative on the parent container and then use position: absolute to place the the textarea over the image.
You can use rgba to control the opacity of textarea or you can fade the image using your method of choice.
You can also try styling the border to the textarea as needed.
Demo fiddle: http://jsfiddle.net/audetwebdesign/ygMZ6/
How This Works
Setting position: relative on .textpanel simply sets a reference for any absolutely positioned child elements.
Setting position: absolute on textarea allows for vertical and horizontal positioning.
A new stacking order is created which is why the textarea appears overlying the image, which
is still in the root level stacking order.
In this case, no need to use z-index to alter the stacking order of any elements.
You could always use CSS:
textarea{
background:url('image.png');
}
or
textarea{
background-image:url('image.png');
}
I dont know why you would want to do that but here is my thought on this..
Set the background image of the text area then use simple javascript or jquery to implement background fading..
Here are some examples on background images for text areas..
http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html
Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative