SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: css and text

  1. #1
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css and text

    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
    Code:
    <div>{little text is here}
    
    
    
    
    {I want it here}
    
    
    
    
    
    </div>
    Now I use this (with mootools)
    Code:
    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. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code:
    <!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. #4
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use relative position for the text.

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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by dimis283 View Post
    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?
    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. #7
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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?
    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
    Code:
    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");
    	
    	}
    Code:
    $('content_text').setStyle("position","relative");

  8. #8
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I use now this code with javascript.
    Is there any way to do this with css?
    Code:
    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. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure about all of the above, but all the
    Code:
    $('content_text').setStyle("position","relative");
    is not need it.

    Just put this in your CSS:
    Code:
    .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. #10
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    I'm not sure about all of the above, but all the
    Code:
    $('content_text').setStyle("position","relative");
    is not need it.

    Just put this in your CSS:
    Code:
    .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.
    Ok, I just take the above css in JS and it seems to work.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    lol - I'm a little lost now (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. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •