I am using codeigniter on a project. I have an over lap in DIVs.
(source: childrensdaycaresoftware.com)
In the image you can see that the overlap blocks the button. The CSS that controls this is
.fam {
position: relative;
left: 20px;
width: 400px;
}
If I make it fixed or absolute, it throws off all the work that I have done. I would have to redo the whole page.
Is there a way to send the Family Info block behind the menu button?
The css for these two DIVs are not in the same css file.
You should be able to make the z-index for the button, or its container, a higher number to elevate it above the other div.
.button{
z-index:5;
}
for example.
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.
im trying to build a web layout that has a fixed width container. the design calls for background images to go outside of the container though, meanwhile still keeping the text of the divs within the container. below is an image to show what i mean:
The black is the container, the red is the sidebar. the content on the sidebar should stay within the container, but different sections of the sidebar have different background colors.
any suggestions?
You can manage this with pseudo-elements
Extract of relevant code from demo.
aside .block:before {
position: absolute;
content: '';
left: 0;
top:0;
height: 100%;
width: 100vw;
background: rgba(0,255,0,0.5);
z-index:-1;
}
Codepen Demo
Note: The layout method here I've used it not specifically relevant. I just use flexbox for fun but this works with other, older layout methods just as well.
So I'm working on my first website, I'm trying to make an image gallery that shows thumbnails of images and enlarges them when you hover over them, I made the sizes of the images 100px*100px through the html itself then I used this css code:
img:hover {
width: 100%;
height: 100%;
}
obviously I'm missing something because when the images are enlarged they move the other images inline away which causes glitches because then you're no longer hovering over it. I tried fiddling about with the z-index but it didn't work, I tried putting them in spans with hidden overflow but I faced the same problem, what should I do?
You can take the hovered images out of the flow of the document with absolute positioning.
img:hover{
width:100%;
height:100%;
position: absolute;
top:0;
right:0;
}
Be sure to set the position of the container to relative.
fiddle here
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;
}
First question on this page - yay!
I am currently building a website for a client and it is causing me some troubles.
I have a zoom-tool which allows the user to zoom an image, when the cursor is passing the picture.
This creates a "secret" div right on top of my text-div. The text-div contains a select-option dropdown. The "secret" div is blocking for any activity with in the text-div - I cannot highlight any text or select a option in the dropdown. This I am able to do, when I move the text-div away from the "secret" div.
See this page: http://shakermedia.dk/2up/2012/10/seville-modulsofa-sort/
What can I do? Here is the css code for the two divs:
div.zoom-box {
width:450px;
line-height: 0;
height:100%;
float:right;
position:relative;
z-index: 2;
}
div.text-alignment {
width:450px;
float:right;
margin-top:-419px;
height:100%;
position: relative;
}
How can I make the text-div accessible, but keeping the "zoom-box" the same place (overlapping text when zooming)?
Your help is very much appriciated!
you need to try giving the element that is behind a lower value of z-index and the element that is above - a higher z-index value