I have been messing around with a few CSS options for my lyrics layout, and decided to tile a soft gray/white image to help read the lyrics. Problem is, I cant get the image to scroll with the scrollbar that contains it. (however, i can get the webpage scrollbar to accomplish this with the background scroll property) Question is, is there a solution to this? I was thinking about expanding the content box to get around this, and stretch the borders when needed, but would also need help with that. Help would be really appreciated. http://audiofiles.org/lyrics/RATM_CLAB.htm
I suppose there are worse ways to make a web page, but slicing and dicing in Photoshop is in the top three, at least, of bad ways to do it. Anywhere I've made {display: none;}, remove that element completely from the page. Notice there is no longer {position: absolute;} on any element. Clean things up as I've suggested, then we'll have a sane starting point. In the meantime, Google up some tutorials on html and css. Work through several, while skipping over sections on table layouts and absolute positioning. Table layouts are obsolete[1], and absolute positioning is advanced stuff. There's no point in cluttering the learning process with stuff you can't or shouldn't use yet. #Table_01 { position:relative; width: 800px; margin: 0 auto; } #audio-lyrics-01 {} #audio-lyrics-02 { display: none; } #audio-lyrics-03 { text-align: center; } #audio-lyrics-04 { display: none; } #audio-lyrics-05 { display: none; } #audio-lyrics-06 { display: none; } #audio-lyrics-07 { width: 600px; margin: 0 auto; border: 3px double black; background: url(http://audiofiles.org/dir/images/bg_tile.gif); background-repeat: repeat; background-attachment: scroll; } #audio-lyrics-08 { display: none; } #audio-lyrics-09 { display: none; } #audio-lyrics-10 { border: 1px solid black; } #audio-lyrics-11 {} Code (markup): cheers, gary [1] Tables aren't, but using them for layout is.
Thanks for the help, I used your changes. It definately stretches now, and it breaks. I have been reading up on some CSS and if you are willing, would love some extra help. We only need to work on stretching the border image, correct?
No. That's the kind of thing that's causing you problems. There are basic things that always come first. You need a proper DTD, so all browsers, especially IE, are on the same page. The markup needs to be semantic. That means that the tags should properly tell us what it is they're delimiting. OK, I've pretty much done that for you. Take that top image, and resize it to 776px wide. 800px is a little too wide, or a whole lot too narrow. Making it smaller is the better fix. Remove the black "margin". Margins are handled by css. We can figure that out when you've got this much understood. Don't neglect those tutorials. I didn't put the bg image on the "lyrics" div. If you want it, that's probably where it goes. For development, I removed all the adsense javascript. It can be restored after the rest is done. From Elements of Typographic Style, I've indented and centered on the longest line. Modern browsers do just fine. IE is stupid. It is indented, but not centered in IE. It can be done, but the hack is not all that intuitive. I don't think it's worth the effort. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> AudioFiles.org - Lyrics </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { padding: 0; margin: 0; } body { font: 100% verdana, helvetica, sans-serif; color: black; background-color: white; } p { font-size: 1em; } h1 { margin: 0; } h2 { font-size: 1em; text-align: center; } blockquote {} blockquote.lyric pre { font-family: verdana, helvetica, sans-serif; display: table; width: auto; margin: 0 auto; } #wrapper { position:relative; width: 760px; margin: 0 auto; } #lyrics { width: 626px; margin: 0 auto; border: 3px double gray; } #footer { text-align: center; } </style> </head> <body> <div id="wrapper"> <h1> <img src="test_files/audio_lyrics_01.gif" alt= "AudioFiles.org-Lyrics" height="55" width="800"> </h1> <div id="lyrics"> <h2> Rage Against The Machine - Calm Like A Bomb </h2> <blockquote class="lyric"> <pre> feel the funk blast, feel the funk blast, FEEL THE FUNK BLAST, a yo-yo-yo-yo-yo-yo-yo, check it out yo-yo-yo I be walkin god like a dog My narrative fearless Word war returns to burn Like Baldwin home from Paris, Uh Like steel from a furnace I was born landless Yes its tha native son Born of Zapatas guns Stroll through the shanties And tha cities remains Same bodies buried hungry But with different last names The vultures robbin everything Leave nothing but chains Pick a point on the globe Yes tha pictures tha same Theres a bank, theres a church, a myth and a hearse A mall and a loan, a child dead at birth Theres a widow pig parrot A rebel to tame A whitehooded judge A syringe and a vein And the riot be the rhyme of the unheard What ya say? What ya say? What ya say? What? (x4) Calm like a bomb This aint subliminal Feel the critical mass approach horizon Tha pulse of the condemned Sound off Americas demise Tha anti-myth rhythm rock shocker Yes I spit fire Hope lies in the smoldering rubble of empires Yes back through tha shanties and tha cities remains Same bodies buried hungry, uh-huh With different last names, uh-huh The vultures robbin everyone Leave nothing but chains Pick a point here at home Yes the pictures tha same Theres a field full of slaves Some corn and some debt Theres a ditch full of bodies Tha check for the rent Theres a tap, tha phone, tha silence of stone The numb black screen That be feelin like home And the riot be the rhyme of the unheard What ya say? What ya say? What ya say? What?(x4) Calm like a bomb There's a mass without roofs There's a prison to fill There's a countrys soul that reads post no bills There's a strike and a line of cops outside of tha mill There's a right to obey And a right to kill There's a mass without roofs There's a prison to fill There's a countrys soul that reads post no bills There's a strike and a line of cops outside of tha mill There's a right to obey And a right to kill </pre> <hr> </blockquote> </div><!-- end lyrics --> <div id="footer"> <img src="test_files/audio_lyrics_11.gif" alt="" height="88" width="632"> </div> </div><!-- end wrapper --> </body> </html> Code (markup): Rage Against the Machines? Couldn't you have picked a better example than that one shtick pony? cheers, gary
I updated it, and followed your instructions. As for the border, do you even think I need it now? It looks fairly prim and neat as it is. It would save bandwith too! But for the sake of learning, if it wouldn't be any trouble, how would I start on making a 3-4 pixel border image stretch with the content box? I have a basic idea but not everything needed to know how to do this. RATM, a one trick pony?! Ha! They are getting back together for a reunion tour. consider me there!
A few changes to simulate a fixed top image and add a border to the outer wrapper. h1 img { margin-left: -20px; } #wrapper { position:relative; width: 750px; margin: 0 auto; overflow: hidden; border: 5px solid black; } Code (markup): They remind me of a college jazz lab band, but not the one o'clock lab band; some talent, training and no focus. Oh, and, pretentious. If their reunion brings them to Reunion Arena (more likely a much smaller venue) in Dallas, I'm somewhere else. cheers, gary