PDA

View Full Version : How to position text



magik
10-24-2007, 08:26 AM
Script: Pausing up-down Scroller
http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

This may seem like a very simple question, but I'm not sure if the code at which positions the text is in the script.

The text is always at the top of the scroller. I know you can center text with <div align="center"> but I cannot get it vertically centered.

Any help would be highly appreciated.

magik
10-24-2007, 09:46 PM
I'm guessing that there is something in that script telling the scroller to stop at that point. No replies yet so maybe it's pretty difficult and can't be done. Anyone?

ReMaX
10-24-2007, 10:15 PM
If you want to know how to center a text vertically I know only one way - but I know there are others - for which you need to know the height of the object you want to center:


<div style="position:absolute;">
<div style="position:absolute;left:50%;margin:0 0 0 -{HalfOfObjectSize};">
{ content }
</div>
</div>

...and... if you want to center an object don't use "align". It is not valid anymore! Make a container object (e.g. div) and give him the style attribute text-align:center. The content will be centered horizontally.
->
<div style="text-align:center;width:100%;">content</div>
There's also an attribute called "vertical-align:middle/top/bottom" but it doesn't work properly and it depends on the content staying next to it. :(

greetings
Max

magik
10-25-2007, 05:17 AM
Still having problems. Is this the right code? I've got the how I want it now but it's just moved the scroller down about 50px, the text disappears half way into my scroller.



<div style="position:absolute;">
<div style="position:absolute;left:50%;margin:0 0 0 -{100};">
<div style="text-align:center;width:100%;">

<script type="text/javascript">

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)

</script>

</div></div></div>

The problem now is that my scroller is vertically centered but also centered the place in where the text appears/disappears lower. Makes it look wrong.

ReMaX
10-25-2007, 07:54 PM
Dear Magik.
Try learning a bit of css firstly.
Here's the right code:


<div style="position:absolute;top:50%;left:50%;margin:-50px 0 0 -100px;">
<script type="text/javascript">
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
</script>
</div>


But be careful! The parent element also has to be positioned absolute. If it is not positioned absolutely put an absolute positioned div around that all like this:


<div style="position:absolute;width:500;height:400;">
{ code like before ^ }
</div>

"Width" and "Height" of course can be changed like you want to. "Position:absolute" has to stay like it is without any "top" or "left" attributes because if you do not put them it stays in the normal text float.

good luck!
Max

magik
10-26-2007, 05:15 AM
Try learning a bit of css firstly.


Only know the basics :D

Thanks for the help so far, I might be getting frustrating.

I'm really new to coding and I only really know the text/body parts of css but I'm learning.

I'm guessing that I've done something wrong with the positioning of the parent elements which I'm guessing are my larger tables which have this scroller in the content over everything. My new problem is that the text is ignoring the fact that it's meant to be settled in a table/element and is positioning itself right in the center of the page. :(

magik
10-26-2007, 05:32 AM
What you have shown me is also only positioning the scroller. My aim to to be able to position that text inside the scroller.

ReMaX
10-26-2007, 01:29 PM
There, the borders of my method are reached! With what I have shown you you can only position elements with a defined height or width. Your pausecontent-array-strings can be as long as they want! But I know there is also another method for what you want to have but I do not know where:(

Another solution would also be using tables ("<td valign="middle">") but that looks very ugly and is not valid html.

...why do you want to position text which is already scrolling vertically?

I checked google and found this: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

perhaps it helps you...