|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#1
October 28th, 2009, 06:52 PM
|
|||
|
|||
|
Displaying nested div outside of main div
Hey guys
I have a main page div, which is 1000px across. This is the main div which basically everything else is nested within. It needs to be 1000px width so there is no scroll bar for the 1024 users. This time, in my design I have some background-images which need to be outside of my 1000px div. There should be no scroll bar still for the 1024 users as its just some extra visuals for those who uses higher resolution than 1024. I can't do this as a background image because there is a left and right side to this which should not move. I have attached a JPG to this post. That is the top of the page. The left and right edges should tile until the end of the screen. You can see this picture is 1200px across so an extra 100px on each side. So that extra 100px on each side should not cause a scrollbar for those with 1024px resolutions... But as the screen expands it is there. Been trying alot of things but most of the time it isn't cross-browser compatible. Cheers guys, Richie
__________________
- Richie
|
|
#2
October 28th, 2009, 06:53 PM
|
|||
|
|||
|
additional info:
I forgot to mention I have something that displays it correctly but the scroll bar appears to go right... surprisingly it won't scroll left though when I close the screen to 1000px (which is good but it does go right alot). Within my main page div of 1000px, I have 2 more divs, and this is their CSS: #testa { background: url(background_images/banner_left.jpg) no-repeat left; position: relative; display: block; z-index: 1; top: 50px; left: -100px; width: 274px; height: 200px; margin-bottom: -200px; } #testb {background: url(background_images/banner_right.gif) no-repeat right; position: relative; display: block; z-index: 1; top: 50px; left: 1000px; width: 100px; height: 200px; margin-bottom: -200px; } Surprisingly and a good laugh - This works in IE5 with no horizontal scrollbar unless its smaller than 1000px wide! Wow haha... Once again - any and all help will be so great.
|
|
#4
October 28th, 2009, 10:27 PM
|
|||
|
|||
|
Hey mate
Yeh I originally did that... Works for all the modern browsers... but then the issue is that when they make the browser smaller than the parent div (1000px) it doesn't have a scrollbar
|
|
#5
October 29th, 2009, 12:40 AM
|
|||
|
|||
|
okay I dont know why I didn't do this originally but I have a ... messy fix...
For those that are interested (I will change this as soon as someone has a better method). <body><div id="page_overflow"> </div></body> So I know this isn't the best way for more than 1 reason but it does at least get it to work on a few browsers. #page_overflow { display: block; min-width: 1000px; overflow-x: hidden; }
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > Displaying nested div outside of main div |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
