I have a background <div> that is positioned in the middle of the page.
Above this I have a <div> with a text inside.
If the page is viewed in fullscreen, everything seems fine.
But if the page is viewed in a small window, the text disappears.
How can I make the text always staying in the front?
Code:
http://jsfiddle.net/w2T79/
Images:
"normal view:" http://www.suckmypic.net/26632/83735f21.png
"small view:" http://www.suckmypic.net/26633/7be8fc00.png
Give the parent-div an id ('container' for example), then add the code below to your CSS:
#container {
position: relative;
}
.txt {
position: relative;
z-index: 99999;
}
Maybe you can provide us a link to the page you are working on, because in jsFiddle only 'text' is visible, and no image.
That's because you have a margin-top of 70 px and the upper div disappears under the backgroud.
Do a position: relative and an high z-index and you get what you want
This you can achieve by giving position:relative;z-index:1000; to <p> tag.
Check here:
http://jsfiddle.net/w2T79/4/
Hope you want in this way.
Related
I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
Ok, I don't really know how to explain what I'm looking for exactly, but I know what I want(I just can't get there). I have an image link with text on top of it in a kind of paragraph box.
My concern is that I want the box to adjust in size to the quantity of text that I put in.
Here is a demo of what I have so far.
.imagetext {
left:auto;
right:auto;
}
Is something else I have tried, but doesn't do what I want.
What I want is that the black box is sized to 'fit' the text. Is this possible?
Or do I have to manually size it?
P.S. The img links go to a website that is currently not in service. All the code for what I need is right in demo.
EDIT: I guess what I want is the black box to wrap the text instead of the image. Is this possible?
You can try something like this:
Fiddle
I Deleted the absolute positioning and added:
.imagetext {
display: table;
margin: auto;
margin-top: -30px;
}
Because of the absolute positioning and left: 5px; right: 5px; the text was given a width until 5 pixels from the edge of the image. The margin-top is to get the text inside the image on the desired height.
Hope it helps!
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;
}
I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}