Displaying a text area on top of an image - html

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

Related

How do I have elements move aside when I resize a textarea box in CSS?

I have a very simple site with a textarea on the left, and some text on the right. However if the user resizes the textarea, it clips over the text. How do I define a minimum distance that the text must stay from the textarea? Currently I simply have:
.text {
position: absolute;
left: 400px;
top: 60px;
margin-right: 50px;
}
Absolute position of your text might be causing the problem. Try removing position attribute. Hope it works fine
Give your text position relative.
.text { position: relative;}
Or remove the users ability to resize the text area.

How to hide this image behind it's container?

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%;

HTML element positioning

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.

Extending a bootstrap container background to the edge of the page

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.
I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO

Confused over DIV Z-index, plus logic of visible/hidden DIVs

I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.