Css and text

HTML & CSS
1

I want the text of a div to be some lines bellow of the first line of the div if the length is little.
How can I set this text to have a distance form the first line of the div?
The check of the length of this text can be done with css and not with javascript?
I want this

<div>{little text is here}




{I want it here}





</div>

Now I use this (with mootools)


m= $('content_text').innerHTML;

 if (m.length<400)
 $('content_text').setStyle("text-align","center");
$('content_text').setStyle("margin-top","10em");
$('content_text').setStyle("margin-bottom","-10em");
2

padding is the one you look for, not margin, and for the bottom use positive values also.

em will not give you flexibility, neither %. Both are variable in calculations, but fixed in the value they take. So CSS has no straight up option, other then making your div display:table-cell; and use vertical alignment to center the content in the div.

Use padding since it’s related to the inside of div, while margin is related to the outside of div. Or a min-height value for the div.

3

Hi,

If you are talking about vertically aligning text to the middle of a fixed height div then you can use the display table properties for IE8+ and other modern browsers.

To cater for IE6 and 7 makes it a little complicated.

Here’s an example of both methods.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {margin:0}
h1, h2 {
    margin:20px 0 10px;
    text-align:center;
}
.test {
    height:200px;
    width:300px;
    padding:0 10px;
    border:5px solid #000;
    overflow:hidden;
    margin :0 auto 20px;
    display:table;
}
.test p,.test div {
    display:table-cell;
    vertical-align:middle
}
/* ie6 and 7 hacks */
* html .test div{position:relative;top:50%;zoom:1.0}
* html .test div p{position:relative;top:-50%;zoom:1.0}
*+html .test div{position:relative;top:50%;zoom:1.0}
*+html .test div p{position:relative;top:-50%;zoom:1.0}

</style>
</head>
<body>
<h1>Vertical align</h1>
<h2>Not IE7 orr IE6</h2>
<div class="test">
    <p>test1</p>
</div>
<div  class="test">
    <p>test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 </p>
</div>
<h2>IE6 and 7 support added</h2>
<div class="test">
    <div>
        <p>test1</p>
    </div>
</div>
<div  class="test">
    <div>
        <p>test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 </p>
    </div>
</div>
</body>
</html>
4

My problem is that bellow this div is another div with a photo.
So I do not want this div to move as it done with positive padding-bottom or with no padding-bottom.I want just to move the text inside this div.
How can I set the other div not to move?

5

You could use relative position for the text.

Something like:


div span.content_text {
position:relative;
top:/*a calculated value would be better*/ 10em;
}
6

Nothing moves in my example except the text.

You’ll have to create a demo exhibiting the problem you are trying to fix if the above was not what you wanted.

e.g. Is the div a fixed height?

Is the text to be centred vertically?

How much text are you expecting?

Why move the text when there is only a small amount?

What are the dynamics?

7

The problem was with my code at javascript and padding-bottom.
Also I use javascript to find the len of text.
Can I ignore the * at your css code and use javascript?
maybe with

if (navigator.appName=="Microsoft Internet Explorer" & if parseInt(navigator.appVersion)<7)
	{
	$('content_text').setStyle("position","relative");
	$('content_text').setStyle("top","50%");
	$('content_text').setStyle("zoom","zoom:1.0");
	
	}

$('content_text').setStyle("position","relative");
8

So I use now this code with javascript.
Is there any way to do this with css?

m= $('content_text').innerHTML;

 if (m.length<300){
 
	$('content_text').setStyle("display","table-cell");
	$('content_text').setStyle("padding","0 15em");
	$('content_text').setStyle("vertical-align","middle");
	

	$('content_text').setStyle("position","relative");
	$('content_text').setStyle("top","35%");
	$('content_text').setStyle("zoom","zoom:1.0");
	$('content_text').setStyle("position","relative");
	$('content_text').setStyle("top","-35%");
	$('content_text').setStyle("zoom","zoom:1.0");
		$('content_text').setStyle("zoom","zoom:1.0");
	$('content_text').setStyle("position","relative");
	$('content_text').setStyle("top","35%");
	$('content_text').setStyle("zoom","zoom:1.0");
	}
9

I’m not sure about all of the above, but all the


$('content_text').setStyle("position","relative");

is not need it.

Just put this in your CSS:


.content_text {
position:relative;
}

it will not move the text untill/unless you put a top, bottom, left, right in there.

Probably there is more that can be simply put in CSS. Only the variable/calculated part should be JSied.

10

Ok, I just take the above css in JS and it seems to work.

11

lol - I’m a little lost now :slight_smile: (which is not unusual these days)

I thought we were looking for a css way to do this but then you went and converted my css to js.

You will need the html structure as in my example for this to work (either with css or js).

12

What I’m trying to say:

  • put in a CSS file those CSS declarations that are not “dynamic”, like “position:relative;”, “zoom:1.0”, “padding:0 15em”.

  • use JS to add a CSS style when needed, like for the necessary top offset, since the power with JS is that: to inspect, calculate and then assign LIVE, which you can’t do in CSS.

  • you don’t need “display:table-cell;” if going for relative positioning.

13

Ok I understand.
I suppose that with css I can not give instruction related with length of the text inside that div,so I have to use javascript