Forums

iasiis

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:


/*
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:

<?php get_header(); ?>

<div id=\"content\">

     <div id=\"contentpadding\">

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

               <div class=\"navigation\">
                    <div><?php previous_post_link('previous %link') ?></div>
                    <div><?php next_post_link('next %link') ?></div>
               </div>

               <div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">
               <h2><?php the_title(); ?></h2>

               <div class=\"date\">
                    <?php the_time('l, F jS, Y') ?> <!-- by <?php the_author() ?> -->
               </div>

               <div class=\"metadata\">
                    Posted in <?php the_category(' / ') ?> 
               </div>

               <div class=\"clear\"></div>

               <div class=\"entry\">
                    <?php the_content('<p class=\"serif\">Read the rest of this entry &raquo;</p>'); ?>

                    <div class=\"tags\">
                         <p class=\"postmetadata\"><?php the_tags('Tags:&nbsp; ', ' / ', '<br />'); ?></p>
                    </div>

                    <div class=\"balloon\">

                         <p class=\"balloontext\">

                              <a href=\"#respond\">post comment</a>

                         </p>

                    </div>


                    <div class=\"clear\"></div>

                    <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

                    <p class=\"postmetadata alt\">

                         <?php post_comments_feed_link('comments RSS'); ?>
     
                         <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
     // Both Comments and Pings are open ?><a href=\"<?php trackback_url(); ?>\" rel=\"trackback\">trackback</a>
     
                         <?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
     // Only Pings are Open ?>
     Responses are currently closed, but you can <a href=\"<?php trackback_url(); ?> \" rel=\"trackback\">trackback</a> from your own site.
     
                         <?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
     // Comments are open, Pings are not ?>
     You can skip to the end and leave a response. Pinging is currently not allowed.
     
                         <?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
     // Neither Comments, nor Pings are open ?>
     Both comments and pings are currently closed.
     
                         <?php } edit_post_link('Edit this entry','','.'); ?>

                    </p>

                    <?php comments_template(); ?>

               </div>

          </div>

     </div>

<?php endwhile; else: ?>

<p>Sorry, no posts matched your criteria.</p>

<?php endif; ?>

</div>

<?php get_footer(); ?>

Here is the index.php code:

<?php get_header(); ?>

<div id=\"content\">

     <div id=\"contentpadding\">

          <?php if (have_posts()) : ?>

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

               <div <?php post_class() ?> id=\"post-<?php the_ID(); ?>\">

                    <h2><a href=\"<?php the_permalink() ?>\" rel=\"bookmark\" title=\"Permanent Link to <?php the_title_attribute(); ?>\"><?php the_title(); ?></a></h2>

                    <div class=\"date\">

                         <?php the_time('l, F jS, Y') ?> <!-- by <?php the_author() ?> -->

                    </div>

                    <div class=\"metadata\">

                         Posted in <?php the_category(' / ') ?> 

                    </div>

                    <div class=\"clear\"></div>

                    <?php the_content('read more... &raquo;'); ?>

                    <div class=\"tags\">

                         <p class=\"postmetadata\"><?php the_tags('tags:&nbsp; ',' , ','<br />'); ?></p>

                    </div>

                    <div class=\"balloon\">

                         <p class=\"balloontext\">

                              <?php comments_popup_link('post a comment', '1 comment', '% comments'); ?>

                         </p> 

                    </div>

               <div class=\"clear\"></div>

               <?php endwhile; ?>

               <div class=\"navigation\">

                    <div><?php next_posts_link('&laquo; Older Entries') ?></div>

                    <div><?php previous_posts_link('Newer Entries &raquo;') ?></div>

               </div>

          <?php else : ?>

          <h2 class=\"center\">Not Found</h2>

          <p class=\"center\">Sorry, but you are looking for something that isn't here.</p>

          <?php get_search_form(); ?>

          <?php endif; ?>

     </div>

</div>	

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Thank you for your help and time.

PS: I added black background to the .ballon div so you can see that it is in the right position. When I add padding to the .balloontext div, the whole balloon div shifts position. confusing.

Adam

apostrophe

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

.comments li p {
 padding: some pixels;
}

or whatever.

iasiis

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

http://criticall.co.cc/

apostrophe

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/

iasiis

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

iasiis

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. :)

treehouse : what would you like to learn today?

Forums

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