annarti
-
Posts
4 -
Joined
-
Last visited
annarti's Achievements
Newbie (1/7)
0
Reputation
-
@dsonesuk Finally got around to it--thank you SO MUCH for your help! I've got it all working perfectly now (bloogum.net if you're curious). That's the last time I'll be trying that in a hurry. Thanks again, you've been a lifesaver!
-
dsonesuk: Eee yes I think that last one's got it! I knew it'd end up being a javascript solution. I was really hoping with the advent of CSS3 that this (along with centring divs, all that stuff that SHOULD be easy but isn't) would have been fixed. Alas and alack. The second example you gave ALMOST had it--the brown dropped to the bottom, but because all the content divs were floated left, they dropped a line as soon as they got to the right edge of the browser. I'll poke with that now and see if it does what I'm hoping it will! As I say, brand spanking new to JavaScript, so it'll take me a minute to decode it all, but I'll get there. Thank you so much for all your help so far. I feel I owe you something shiny! (also, I'm a she, but never mind X3)
-
Not quite what I'm after, no, maybe I'm not explaining myself clearly. Here have a visual aid! So it's the brown div on the left that's giving issues. It's completely empty, purely decorative, with nothing in it but the background. The pink ones are fine, they do exactly what I tell them. The brown one will only extend beyond the edge of the browser window if I specify exact pixel height, but because the pink divs are flexible in height (some pages of the website extend 200px beyond the window edge, some extend by 2000+) I don't want to specify that the brown div be x-thousand pixels high because that's just untidy, lazy coding. The patterns on both the main background and the brown div mean that making a faux column with the brown as part of the background wouldn't work, either, because that background image would need to be at least 10,000px wide to cover the full width of the page, which would cause serious issues with load time. Can this even be done?
-
Hi all! I'm not entirely certain I've got this post in the right forum, since I suspect the solution will be javascript rather than css, but the problem is with the css so I figured I'd start here. I've done extensive Googling for this problem and still come up blank, so any help anyone can give would be much appreciated! I have a div empty of everything except a repeated background image that I would like stretching from almost the top of the page (90px down) right to the very bottom. Obviously, making the height:100%; only stretches to the bottom of the browser window. If the content makes the page scroll, the div doesn't go any further down. I'm hoping for a css solution to this, but after searching and finding that's probably not possible, I'm willing to go with a javascript or jQuery solution, or php if that would help? I'm brand new to these languages so please be gentle! The html: <!DOCTYPE html><html><head> <link href="main.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><body><header id="top-trim"></header><header id="main-header"></header></body></html> The css (that matters): body{ font-family: conquerorsans, Tahoma, verdana, sans-serif; font-size: 18pt; color: #9e8166; letter-spacing:2px; background-color: #e6e0d5; background-image:url(images/layout/whitepaper.jpg); background-position:0px 0px; background-repeat:repeat;}#top-trim{ position:absolute; left:90px; top:0px; height:20px; width:550px; background-image:url(images/layout/brownpaper.jpg);}#main-header{ position:absolute; left:90px; top:90px; bottom:0px; margin-bottom:0px; width:550px; min-height:100%; display:table-cell; background-image:url(images/layout/brownpaper.jpg);} And the full page is here. The cheating column idea (using a background image with the column in it) won't work for this unfortunately, since the page is planned to be side-scrolling and would therefore require a background image several thousand pixels long to stop the column from repeating and that would be hellishly load-time-heavy. I'd also prefer not to just specify that the div be 10000px high and scroll the thing on forever, because that's just untidy and lazy.
