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)
Related
I finished putting all my content onto my html. After that I went to create the background, I want a space type of background so I googled what to do. I used code I found to create a background. My page went from having content on it to having no content but showing the animated space background only, with a blank footer. Anyway around this to where I can have my animation and my content on the page.
Its not really clear what you have done, can you put the code here? one quick way I think is to just make your background div absolute and give it z-index:-1 left:0 top:0
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
Rather than putting exact code down, i wish to ask a conceptual html/css/js question.
Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.
I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.
I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?
Thank You.
z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.
You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:
$(".thumb").click(function(){
$(".modal").slideToggle()
})
Here's a simple demonstration:
fiddle
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/