Css Scroll/Design problems!

Discussion in 'CSS' started by zac439, Feb 6, 2007.

  1. #1
    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
     
    zac439, Feb 6, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    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.
     
    kk5st, Feb 6, 2007 IP
  3. zac439

    zac439 Notable Member

    Messages:
    3,074
    Likes Received:
    214
    Best Answers:
    0
    Trophy Points:
    260
    #3
    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?
     
    zac439, Feb 7, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    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
     
    kk5st, Feb 7, 2007 IP
  5. zac439

    zac439 Notable Member

    Messages:
    3,074
    Likes Received:
    214
    Best Answers:
    0
    Trophy Points:
    260
    #5
    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! :)
     
    zac439, Feb 7, 2007 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    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
     
    kk5st, Feb 7, 2007 IP