Grow your CSS skills. Land your dream job.

SOLVED!! Getting my text to be precisly positioned in DIV?

  • # July 18, 2009 at 11:51 am

    Hi,

    UPDATED!

    I am having trouble getting my text to be horizontally centered and padded by 17px from the top of my DIV called .balloon This DIV shows up in the index.php and single.php pages. The picture I have posted in the background looks like a comment balloon. The DIV itself is 48 pixels in height and 100 pixels in width. The comment balloon graphic inside the DIV has a pointer coming from the bottom of the balloon part of it so the direct vertical center of the main balloon is around 17px to 19px from the top. I assume I will need to use padding but how do I use it with out making the div bigger. I just need the padding to affect only the text within the .balloon DIV. How do I do that?

    Here is the site link:

    http://criticall.co.cc/

    Here is the style.css code:

    Code:
    /*
    criticall

    http://criticall.co.cc/

    Highlite Blue: #0066ff
    Black Text: #000000
    Middle Gray: #666666
    */

    /*
    RESET
    */

    * {margin:0; padding:0;}
    html {overflow-y: scroll;}
    html,body {height:100%}
    body {font-size: 12px; font-family:Arial, san-serif; color: #000000; background: url(/images/topbar-background.png) top center repeat-x white;}

    /*
    UTILITY
    */

    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}

    a {color:#0066ff; text-decoration: none; }
    a:hover {color:#0066ff; background: #eeeeee; border-bottom:1px dotted #0066ff;}
    a h1:hover {color:#0066ff;}

    h1 {color:#666666; font-size: 3em; font-weight: normal;}
    h2 {color:#666666; font-size: 2em; font-weight: normal;}
    h3 {color:#666666; font-size: 1.5em; font-weight: normal;}
    h4 {color:#666666; font-size: 12px; font-weight: normal;}

    p {margin: 0px 15px 15px 15px; }

    /*
    POSTS
    */

    .date
    {
    color:#666666;
    font-size:10px;
    float:left;
    text-transform: lowercase;
    padding:0 0 15px 0;
    }

    .metadata
    {
    color:#666666;
    font-size:10px;
    float:right;
    text-transform: lowercase;
    padding:0 0 15px 0;
    }

    .tags
    {
    color:#666666;
    font-size:10px;
    float:left;
    text-transform: lowercase;
    padding:2px 0px;
    background: url(/images/tag.png) no-repeat ;
    height: 30px;
    display:block;
    margin:0 0 0 14px;
    }

    .balloon a
    {
    border: 0px solid;
    outline: none;
    display:block;
    width:100px;
    height:48px;
    outline: none;
    background: url(/images/comment-button.png) 0 0 no-repeat #000000;
    color:#0066ff;
    font-size:10px;
    float:right;
    text-transform: lowercase;
    background-position: 0px -48px;
    font-weight: bold;
    }

    .balloon a:hover
    {
    background-position: 0px 0px;
    color:#ffffff;
    }

    .balloontext
    {

    }

    .commentlist
    {
    padding:40px;
    list-style-type: none;
    }

    #respond
    {
    padding:0 0 0 30px;
    }

    /*
    STRUCTURE
    */

    #pagewrap
    {
    width: 1000px;
    margin: 0px auto -100px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #push
    {
    height: 100px;
    }

    #content
    {
    width: 700px;
    float: left;
    background: #fff;
    }

    #contentpadding
    {
    padding: 20px
    }

    #sidebar
    {
    width: 300px;
    float:right;
    }

    #sidebarpadding
    {
    padding: 20px 20px 20px 65px;
    }

    /*
    FOOTER
    */

    #footer
    {
    height:100px;
    background: #eeeeee;
    }

    #footerguts
    {
    width: 1000px;
    margin: 0 auto;
    }

    /*
    HEADER
    */

    h1#logo a
    {
    outline: none;
    text-indent: -9999px;
    display:block;
    width:256px;
    height:83px;
    background: url(/images/title-button.png) top left no-repeat;
    text-margin:0 10px 8px 0;
    float:left;
    }

    h1#logo a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #header
    {
    height: 89px;
    width: 100%;
    margin:0 auto;
    position:relative;
    }

    #header div
    {
    float:left;
    }

    #header p
    {
    text-indent: -9999px;
    }

    #about a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:106px;
    height:83px;
    background: url(/images/about-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:400px;
    }

    #about a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #contact a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:134px;
    height:83px;
    background: url(/images/contact-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:515px;
    }

    #contact a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #rss a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:50px;
    height:83px;
    background: url(/images/rss-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:658px;
    }

    #rss a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    /*
    SEARCH FORM
    */

    form#searchform
    {
    display:block;
    width:255px;
    height:20px;
    position:absolute;
    top:56px;
    left:753px;
    }

    .searchbutton
    {
    color: #0066ff;
    border: 0px solid;
    display:block;
    width:45px;
    height:20px;
    background: #d2e4ff;
    position:absolute;
    top:0px;
    left:202px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    font-size: 12px;
    }

    .searchbutton:hover
    {
    background-color: #0066ff;
    color: #ffffff;
    font-size: 12px;
    }

    .searchfield
    {
    background:url(/images/search-field-shadow.png) top left repeat-x #666666;
    color: #eeeeee;
    border: 0px solid;
    position: absolute;
    top:0px;
    left:0px;
    display:block;
    width:200px;
    height:20px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    font-size: 12px;
    }

    Here is the single.php code:

    Code:
    < ?php get_header(); ?>

    < ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    id=”post-< ?php the_ID(); ?>“>

    < ?php the_title(); ?>

    < ?php the_time('l, F jS, Y') ?>
    # July 18, 2009 at 12:25 pm

    A live link or the relative html would be a lot more helpful than a bunch of unrelated css.

    So without having a clue how your comments are set up I would guess that you target the contents of div.comments

    Code:
    .comments li p {
    padding: some pixels;
    }

    or whatever.

    # July 18, 2009 at 1:33 pm

    I cant beleive that got past me. I just posted the link. Here it is again:

    http://criticall.co.cc/

    # July 18, 2009 at 2:50 pm

    Ok, now we know what we are dealing with. :D

    It’s Saturday evening and I’m on my way out, so for now I’ll just point you in the direction of this nifty little (css-)trick http://css-tricks.com/vertically-center-multi-lined-text/

    # July 18, 2009 at 5:14 pm

    thanks but I think maybe the first suggestion to add padding was better though you were mistaken on where to apply it (my fault for unclear explanation before). Like I said in my newly edited and UPDATED 1st post, I would need 17px top padding for the text of my .balloon DIV. I am pretty certain that padding will solve my problem but any attempt I have made at adding padding has offset the .balloon DIV along with the text. I need the .balloon DIV to stay put and just have the text get padding.

    so if you could refer to the 1st post I made. IT had a clearer explanation and updated code.

    thanks,
    adam

    # July 18, 2009 at 5:28 pm

    ok problem solved thanks to alchymyth from the word press forums.

    http://wordpress.org/support/topic/291221?replies=5

    he suggested padding-top. it worked. :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".