A little centering.

Site: http://paperthin-hymn.nstars.org/
Running: Invision.

Question!
Seeing as how I'm customizing the appearance of how the user profile looks on posts, I have the width set to a percentage, and although it works, it nulls aligning the entire "frame" to center; it makes it shift more to the left. Help > 3<

Hi!

So you're wanting the frame to be centred within that darker-greyish area? If so, please add this to your CSS code:

Code:

.postprofile-details {
    margin: 1em 1em 1em 2.4em;
}

Yes, that's exactly it (: Now, I did that code, though it still seems to not be centering it left-and-right. This is the coding I have so far:

Code:

.postprofile-details {
    margin: 1em 1em 1em 2.4em;
}

.postprofile-details {
    text-align: center;
    width: 75%;
    padding: 13px 0 5px 0!important;
    background: #dedede;
    padding: 1px 2px 1px 2px;
    border: 1px solid #fafafa;
    border-radius: 40px 40px 40px 40px;
    -moz-border-radius: 40px 40px 40px 40px;
    -webkit-border-radius: 40px 40px 40px 40px;
}

I did add the margin: 1em 1em 1em 2.4em; inside the main .postprofile-details { and it still didn't read it. I'm not sure if it's being canceled out by another or what. I did take off the percentage width and added a px width, and that made no difference, either.

That's because there are two of:

Code:

.postprofile-details {

So, please remove the code I gave you before and add this:

Code:

margin: 1em 1em 1em 2.4em;

...in with the original .postprofile-details {

Having two sets of rules for the same class doesn't matter, as long as nothing clashes.

To centre a div within another div, you need to specify a width and then automatically distribute the left and right margins.
So i see you have set the width a 75%, so make sure this is within your .postprofile-details rules:
width: 75%;
margin-left: auto;
margin-right: auto;

Therefore automatically distributing the spare margin to both sides, centering it.

LGforum wrote:Having two sets of rules for the same class doesn't matter, as long as nothing clashes.

To centre a div within another div, you need to specify a width and then automatically distribute the left and right margins.
So i see you have set the width a 75%, so make sure this is within your .postprofile-details rules:
width: 75%;
margin-left: auto;
margin-right: auto;

Therefore automatically distributing the spare margin to both sides, centering it.

Really? I always thought that having two clashed with each other.

Hey, you learn something new every day. Thanks for letting me know! I hope this answers your question.

Really? I always thought they clashed as well . I completely understand how the latter would work, but I think then that there's something wrong with my CSS because it still refuses to center it. This same problem happened when centering the rank button. I had to place <center></center> inside the rank to center it, regardless of what the rules in the CSS said.

You could try adding this to your rule:

Code:

width: 75%;
margin-left: auto !important;
margin-right: auto !important;

Yeah, they simply update each other.

The way the forumotion system actually works is, the whole .postprofile-details will be laid out in a stylesheet already which is laoded into our forums.

When we edit our CSS, it simply gets added on to the bottom of this stylesheet. (or a completely different one, not quite sure), but either way, when the page loads, it reads through the rules, and ifit comes across the same selector, it ust simply updates it.

For exmaple,
.class {width: 50px}
.class { width: 100px;}

The '.class' would come out as 100px. Just to help clarify what i mean.

(of course this is a daft example, because if you have access to change the first instant of a selector in the CSS then you would, but of course we can't directly edit our forums stylesheet, only add to it.)


EDIT: really still not working? Can you post the overall CSS you have for the .postprofile-details selector?

This is the entire code.

Code:

.postprofile-details {
    text-align: center;
    width: 75%;
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 13px 0 5px 0!important;
    background: #dedede;
    padding: 1px 2px 1px 2px;
    border: 1px solid #fafafa;
    border-radius: 40px 40px 40px 40px;
    -moz-border-radius: 40px 40px 40px 40px;
    -webkit-border-radius: 40px 40px 40px 40px;
}

Edit: Oh ho, I added the !important to them and it's centered now XD
Edit 2: The collapsible chatbox has gone missing now...e_e

Yay! I knew it would work.

Glad we could both help you!

Problem Solved:

Glad your problem is solved; topic marked as solved and archived.