CSS trouble with post titles

ID:182636
 
Mar 25 2008, 7:04 pm
I'm trying to setup my member's site so that the boxes in the center area have titles with background images that are centered (horizontally and vertically). That being the case, the text in the title also needs to be centered vertically, otherwise it looks funny. Now, I can tell the title to display: table-cell, and set vertical-align: middle and everything displays fine:



.center .title {        
    display: table-cell;
    vertical-align: middle;
    height: 30px;
    width: 520px;

    text-align: justify;
    font: 120% georgia, arial;
    font-style: italic;
    font-weight: bold;

    padding-left: 40px;
    padding-right: 40px;
    margin: 0px;
    border: none;
    background: #000000 url("header_background.png") center center no-repeat;
    }


THE TROUBLE is when the little buttons start appearing next to the title. The edit post, edit comment, reply, delete buttons. When those are displayed, it ends up looking like this:



Now, I can remove the display: table-cell property, which will make the vertical-align stop working, but the entire background image displays and the buttons appear on top of it:



Can anyone offer a solution to this problem, such as a way to either align the buttons with the title text inside the background image, or move them out of the way somewhere where they're not interfering with the title image?

And for completeness' sake, here's my input CSS:
.center input {
    float: none;
    color: #FFFFFF; 
    background: transparent;
    border: none;   
    padding-right: 25px;
    padding-left: 25px;
    }
Mar 25 2008, 8:06 pm
Why are you usuing display: table-cell? Try block, or inline-block?
Mar 25 2008, 8:22 pm
In response to Xooxer
Xooxer wrote:
Why are you usuing display: table-cell? Try block, or inline-block?

I'm using table-cell because its the only way to center text vertically in CSS like this. And both block and inline-block settings result in:


Mar 25 2008, 8:56 pm
In response to Foomer
I'm using table-cell because its the only way to center text vertically in CSS like this.

Wrong.

vertical-align: middle

Is a vertical alignment that centers something inside a parent object.

You could also use: margin-top: __px

Or even: padding-top: __px
Mar 26 2008, 12:23 pm
In response to SeijiTataki
SeijiTataki wrote:
I'm using table-cell because its the only way to center text vertically in CSS like this.

Wrong.

vertical-align: middle

Is a vertical alignment that centers something inside a parent object.

... Which only works in a table-cell.



You could also use: margin-top: __px

Or even: padding-top: __px

That won't help me center anything if the size of the object adjusts because the user changes font sizes.

Either way, its not helping my situation with the input buttons.
Mar 26 2008, 1:14 pm
In response to Foomer
If your only problem is the inputs messing up your css, you could try and float:right each button and give them some margins to space them back into position. I think I had to do that for my blog's CSS as well, now that I think about it.
Mar 26 2008, 2:04 pm
In response to Xooxer
Xooxer wrote:
If your only problem is the inputs messing up your css, you could try and float:right each button and give them some margins to space them back into position. I think I had to do that for my blog's CSS as well, now that I think about it.

I think they are float:right by default. The trouble is, I can't figure out any way to get them to move out of the title div's way. I don't even understand why its causing such a hassle, since the blog post is arranged like this:

<post>
<edit_post>
</edit_post>
<title>
</title>
<text>
</text>
</post>

Shouldn't it be possible to display the edit button on one line, then the title div on the next, then the text after that? The title and text stay out of each other's way, why won't the edit button move?
Mar 26 2008, 2:25 pm
In response to Foomer
Yeah, if you add margin-top: -20px; (or so), to the edit_post CSS, it should move it up. Though, it might break something else. You can set it to float: none; as well, but it will be above the title on the left, then.
Mar 26 2008, 2:35 pm
In response to Xooxer
Xooxer wrote:
Yeah, if you add margin-top: -20px; (or so), to the edit_post CSS, it should move it up. Though, it might break something else. You can set it to float: none; as well, but it will be above the title on the left, then.

Either way, I can't get it to prevent my table-cell title from being squashed:



Even if the inputs are bumped down, unlike in the picture.
Mar 26 2008, 2:38 pm
In response to Foomer
If you would permit me temporary access, I can try and fix it for you.
Mar 26 2008, 2:41 pm
In response to Xooxer
Xooxer wrote:
If you would permit me temporary access, I can try and fix it for you.

Don't need temporary access, since I don't have it hosted anywhere. Its just a CSS file and some graphics applied to a saved version of a BYOND Casual blog post.

So just visit a post with some comments, save it somewhere, and replace the CSS with:

<link rel=stylesheet href=stylesheet.css type=text/css>

Then save the following files in the same directory:

http://www.byond.com/members/Foomer/files/css/stylesheet.css
http://www.byond.com/members/Foomer/files/css/background.png
http://www.byond.com/members/Foomer/files/css/ header_background.png
Mar 26 2008, 3:03 pm
In response to Foomer
Hrm, i see what you mean now. This is a bit hacky, but is this what you are going for?

<code> /****************************************** --- BUTTONS --- ******************************************/ .reply_to_comment, .delete_comment, .edit_comment { float: right; width: 0px; } .reply_to_comment input, .delete_comment input, .edit_comment input { background: blue; border: none; } .reply_to_comment { position: relative; top: 5px; right: 32px; } .delete_comment { position: relative; top: 5px; right: 89px; } .edit_comment { position: relative; top: 5px; right: 150px; } </code>

I removed the .center input {} and used more direct references to the inputs instead.

[edit] Gah, had display: inline-block; You don't need that, a relic form other testing I did.
Mar 26 2008, 3:21 pm
In response to Xooxer
Well that certainly works better, thanks.

Now I just need to figure out why the blog post and comment titles aren't aligning in the middle like all of the other titles.