Another question about CSS

[prechrchet]

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

 

[xper]

Put this code where you want to have a scroll (in CSS)

overflow:scroll;

 

[jared_kipe]

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?

 

[rendezvouscp]

I think you could write:

.story {clear: both}

Try that, and see if that's what you want.
-Chasen

 

[jared_kipe]

I think you could write:

.story {clear: both}

Try that, and see if that's what you want.
-Chasen

You mean in the CSS file? What would it mean? the story class but what does the clear part mean?

 

[rendezvouscp]

.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

 

[jared_kipe]

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)

 

[rendezvouscp]

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

 

[jared_kipe]

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

 

[jared_kipe]

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.

 

[rendezvouscp]

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

 

[jared_kipe]

Tried, that, it doesplays different sizes depending on how wide you make the window, or which browser reads it.

 

[jared_kipe]

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.

 

[prechrchet]

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

 

[rendezvouscp]

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.
-Chasen

 

[prechrchet]

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.
-Chasen

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

 

[Coolnat2004]

This will display a scrollbar only if it is not high enough to be fully displayed:

overflow: auto;

This will display the scrollbar no matter what (I believe):

overflow: scroll;

This will clip it:

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.