partial text in a div hidden behind parent div

[dako]

This is kinda hard to explain… what I want is a div with some text in it whose xy position I’m going to manipulate by something like…

This is a long string


.win{

position:relative;

width:700px;

height:100px;

margin-left: auto;

margin-right: auto;

background:#e20;

}

.winText{

position:relative;

padding-top:20px;

margin-left: 40px;  /* left:40px;  works too */

}

Which sorta works, I could JS the text all around xy for a special effect by modding the size, top and lefts.

Problem comes if I try to margin-left: -40px; (or left:-40px;).

The effect I want is to show the later half of the sentence, and cut the front half. Like win being a nice little window where I can move blocks of text around behind. If I moved the text -4 pixels from the top, I want to see the bottom half of the sentence. It’s more than a text scroller.

What I get it the child div escapes the nice boundry, ugly overlaps it, and I still see the whole sentence.

If there is a better way to do this w/o JQuery please let me know, otherwise, is there a way to partially hide the text?

Thanks!

[wolfcry911]

This is a long string


.win{

position:relative;

width:700px;

height:100px;

margin-left: auto;

margin-right: auto;

background:#e20;

overflow: hidden; /* <-- add this */

}

.winText{

position: absolute; /* <-- change this */

top: 20px;  /* <-- and this */

left: -40px;  /* <-- and this too */

}

[dako]

Wow, Great! It works! Thanks tons!

[Author]

Posts