Another question about CSS

Discussion in 'Web Design and Development' started by prechrchet, Jan 22, 2006.

  1. macrumors regular

    Joined:
    Mar 5, 2002
    #1
    I asked earlier a question concerning CSS, so I hope I am not being a bore, but I have one final question before diving into CSS.

    The site that I am working on, http://www.adoptionvoyages.com provides travel journals for families completing international adoptions. The individual journals have a small frame on the left with the dates in question, while the mainframe on the right has the entry for that day.

    My question is this: If I use CSS, am I going to be able to still scroll BOTH frames independently of each other? I have seen several sites where the left "frame" stays stationary, while the main one moves, but I have not seen one where the both can scroll like they do in frames.

    Thanks,

    prechrchet
     
  2. macrumors 6502

    xper

    Joined:
    Dec 15, 2005
    Location:
    Sweden - Halmstad
    #2
    Put this code where you want to have a scroll (in CSS)

    overflow:scroll;
     
  3. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #3
    Since this question has been solved I'll ask one too.

    Say I have two classes, one calls called feature, and one called story.

    Feature has floating images, and story doesn't.
    Here is the problem, when I have an image in feature and text to the side of it. I want the next division of story to NOT float beside the image in feature class. How can I force the <div class="story">blah</div> to be under the image and NOT float beside it no matter the size of the window?
     
  4. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #4
    I think you could write:

    Code:
    .story {clear: both}
    Try that, and see if that's what you want.
    -Chasen
     
  5. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #5
    You mean in the CSS file? What would it mean? the story class but what does the clear part mean?
     
  6. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #6
    .story {clear: both}

    The .story selects any class with the name of "story" (just what you said). The "clear: both" part clears both sides of the element so that nothing is floating to the right or to the left. You can also write "clear: right" to prevent other elements from floating to the right of the element; replace it with left and it'll clear the left side. You could write this into your CSS file and see what it does (I'm not completely sure that's what you're looking for).
    -Chasen
     
  7. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #7
    Worked, BUT...
    Introduced a huge break between the feature and story div.

    see here http://kaylie.sailbyair.com/cooking/vegetables/scallopedpotatoes.html

    But thanks for your interest.

    EDIT: I think I know why, dreamweaver says clear command will render the block on the next avaliable line that doesn't have a float. I think it renders it down there because of my navigation column on the left. (by the way not my site)
     
  8. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #8
    Well, that's what it was supposed to do (it just cleared past those other divs in the sidebar too). I'm unsure how to do what you want with just CSS. :( Hopefully someone else can help.
    -Chasen

    Edit: bingo!
    -Chasen
     
  9. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #9
    Is there a way to achieve this in HTML then, since that would be just as good. Maybe an html Clear command or something... But thank you for your help. It was very interesting
     
  10. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #10
    I guess a rather simple but not that great of an option would be to put the image on the right, and then clear right.... But I don't like the aesthetics of doing so.
     
  11. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #11
    Yeah, I thought about that too, but then I saw the image that it would be under in the top right hand corner and knew you wouldn't like it. You could just write <br /> tags until the text is underneath the image.
    -Chasen
     
  12. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #12
    Tried, that, it doesplays different sizes depending on how wide you make the window, or which browser reads it.
     
  13. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #13
    I found a fix!

    Since that website usually has some horizontally oriented pictures, and some vertically. I created a new CSS class featuretall which has a minimum height of 350 pixels to account for the vertical pictures. This way any time you're going to use a vertical picture just chance the feature to feature tall, and everything is saved. Yippee.
     
  14. thread starter macrumors regular

    Joined:
    Mar 5, 2002
    #14
    overflow

    After doing some digging since I started this thread, I think I understand what I was being told about using overflow:scroll.

    Now I have another question:

    If I use the scroll overflow, will it necessarily mean that I will still have that scroll bar running down the middle of my page?

    For anyone not familiar with what I am doing, I have a site that uses frames. Here is a pretty good example of what I am doing:

    http://www.adoptionvoyages.com/Sheameilin.html

    If I redo these pages with CSS, is it going to look any or function any different from the way it does now?

    Thanks,

    prechrchet
     
  15. macrumors 68000

    Joined:
    Aug 20, 2003
    Location:
    Long Beach, California
    #15
    I haven't played with the overflow properties a lot, but the page will function in the same way as it does now if you use CSS. You'll have scroll bars if there isn't enough height for the whole thing to display, just like now.

    Sorry we hijacked your thread. :eek:
    -Chasen
     
  16. thread starter macrumors regular

    Joined:
    Mar 5, 2002
    #16
    Lol, That's ok, it took me a while to get to the next step. :)

    If the look and the function are going to be the same, is there any advantage to redoing my site? (Most of the criticisms of fames don't apply to my site: I am not worried about search engines or people trying to print.)

    Thanks,

    prechrchet
     
  17. macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #17
    This will display a scrollbar only if it is not high enough to be fully displayed:
    Code:
    overflow: auto;
    This will display the scrollbar no matter what (I believe):
    Code:
    overflow: scroll;
    This will clip it:
    Code:
    overflow: hidden;
    More info here: http://www.w3schools.com/css/pr_pos_overflow.asp

    By the way, you might want to consider using javascript instead of java for that countdown -- only because java seems a bit clunky for such a task.. and I've made a javascript one. :p
     

Share This Page