http://ajaxstudios.com/
The floating animated "Game of the Day" link is extended OVER the Quick Ventrilo Connection button and even over the sub header text.
Is there a better way to do what I'm trying to accomplish that isn't so messy? I'm using mainly top: and padding: to position the text right now. I've also tried using a higher z-index on the ventrilo connect buttons to have it layered above the link, but it doesn't seem to be working...
Any help is much appreciated! Thanks for your time.
-Ethan/Otoris
instead of padding on the game of the day link, use right or left, since you're already using absolute positioning.
in correlation, if i understand correctly, to make the buttons layered above the link, you need to apply position:relative or absolute in order to get z-index stacking to work.
Related
Here's the effect I'm trying to achieve.
[image removed - client template]
At the moment, I'm using position:absolute to push the content section up into the slideshow, however, I can't make the wrapper identify the height without setting it manually. The content section needs to be dynamic (client will be updating this). So, ideally, I'm looking for a way to avoid using position:absolute with top: -115px etc. This problem also affects the footer. If I put a footer at the bottom, it also won't recognize the height, so instead of placing it below, it assumes it's spot is right below the slideshow (underneath the content section).
Thanks in advance for any help. Let me know if there's anything else I need to post for clarity.
Bc
How about margin-top: -115px?
I am porting my application from WPF to HTML/Javascript and am having trouble with the layout that I need for my application.
This layout should take up the entire available screen. It will actually be put into a jquery ui tab so with the menu, logo, and tabs it technically it won't be the entire screen. I have gotten parts of this to work but not all together.
The left side is going to have a custom slippy map and I would like it to take up as much space as available both horizontally and vertically.
The right side is going to have some filters at the top and bottom with the middle showing them results from the filters. The results could be pretty long so it needs to scroll vertically if to much content is pulled from the web server.
All I need help with is the basic layout to support this. Any help would be appreciated. You can see my layout drawing below. Thanks in advance!
In that div, add style="max-width: 350px; overflow-y: scroll;"
First, you need something like this (It's called Fluid - Fixed layout), here's an example you can take from Dynamic Drive http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/. With the exception that you need to "invert" the margins and widths (replacing left to right) because of the example is the opposite of your layout.
Secondly, you need to put your 2nd div (350x50) at the bottom of the page. Some thing you can do, is setting that div so it has the following:
#small_box
{
position: absolute;
right: 0;
bottom: 0;
...
}
The link above does work even on IE6+
Hope It helps.
I have just decided to use relative positioning and a little javascript. Spent hours looking for an elegant solution with no results and it only took me a few minutes once I decided to use javascript. Something like this is so easy to do in WPF so it was surprising. I basically just attach to the window.onresize event and manually set the height of the right vertically expanding scrollbar. Thanks for your suggestions anyways.
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
I'm having a problem with this page.
The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.
I'm at a loss, I've tried numerous ideas to get around the problem and at this point I've been staring at it too long to see the problem clearly. Can anyone help me out.
Thanks in advance.
Try using positioning. Add these to get you started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.
The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.
So, as #Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.
In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page