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

[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:

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:

id=”post-“>

Posted in

Read the rest of this entry »

‘); ?>

‘); ?>

post comment

‘

Pages: ‘, ‘after’ => ‘

‘, ‘next_or_number’ => ‘number’)); ?>

comment_status) && (‘open’ == $post->ping_status)) {
// Both Comments and Pings are open ?>” rel=”trackback”>trackback

comment_status) && (‘open’ == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can ” rel=”trackback”>trackback from your own site.

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.

comment_status) && !(‘open’ == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.

Sorry, no posts matched your criteria.

Here is the index.php code:

Code:

id=”post-“>

” rel=”bookmark” title=”Permanent Link to “>

Posted in

‘); ?>

Not Found

Sorry, but you are looking for something that isn’t here.

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

[iasiis]

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

http://criticall.co.cc/

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

[Author]

Posts