I'm having an issue here with a textbox that is located on a top navigation bar for a site I'm building.
Below will help to paint a little picture of what it looks like:
http://i34.tinypic.com/24w4uja.png
I also have a image file which is sitting about half way between both of these navigation heigh wise.
To the right I have a textbox which is somewhat aligned with the image file that is shown to the left. The issue that I'm having is that the textbox field is not able to be clicked in at or above where the red line starts in my picture.
I've tried setting a z-index on the textbox to get it to sit on top of everything, but I've had no luck at all yet trying to figure this issue out.
I want to have the image stay where it's at, but I simply want to be able to click anywhere in the textbox to be able to enter text.
I'm obviously not an expert at HTML/CSS - but I would greatly appreciate help on fixing this issue.
Best regards and thanks in advance for your time!
Your elements are likely in different stacking contexts. If one has a position or opacity property and the other does not, the z-indices will be out of context and will not respond to their relative values.
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
My Problem
I am trying to add 3 big buttons ( Summary, Builder, History ) in the middle of my nav bar. Below is pictured my ideal results. I would like an active one to have no bottom border.
I have tried everything I can think of to get this to work. When I add a button in the spot you would think it should go, here is what I get:
Notice the yellow oval, that is where my button is ending up!! I can't figure out what I am doing wrong.
Here is a link to the page, as to post the code here would be too long:
http://johntesting.azurewebsites.net/workflow-blue/blank-backup.html
Can anyone help me out with these buttons? I have been going crazy trying to figure this out.
Thanks for looking.
John
Set display:flex; on your '.page_title' div to immediately see the button much closer to where you expect it. The first child element of that div is an h3 which is a block element that fills the entire div, leaving no room for your buttons, resulting in them being pushed to the next line.
Another approach is to set the display property of that h3 to inline-block.
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
http://jsfiddle.net/danilopena/fVh23/5/
That is a link to the HTML/CSS I have been working on. For some reason, when I try to position the text of the image, the text disappears? Is it going behind the image or something? Thanks for your help and time.
If for some reason you have to keep the image in the foreground you might use z-index:-1; to push something to the back. Higher values will bring it to the front; default is 1.
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...