The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

A little centering.

View previous topic View next topic Go down

Solved A little centering.

Post by ℋunni on October 23rd 2011, 9:08 am

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<


ℋunni
Forumember

Female Posts : 150
Reputation : 4
Language : English

Back to top Go down

Solved Re: A little centering.

Post by Base on October 23rd 2011, 11:07 am

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;
}

Smile

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: A little centering.

Post by ℋunni on October 23rd 2011, 10:29 pm

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.

ℋunni
Forumember

Female Posts : 150
Reputation : 4
Language : English

Back to top Go down

Solved Re: A little centering.

Post by Base on October 23rd 2011, 10:30 pm

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 { Smile

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: A little centering.

Post by LGforum on October 23rd 2011, 10:33 pm

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
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: A little centering.

Post by Base on October 23rd 2011, 10:35 pm

@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. Razz

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: A little centering.

Post by ℋunni on October 23rd 2011, 10:38 pm

Really? I always thought they clashed as well Very Happy. 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.

ℋunni
Forumember

Female Posts : 150
Reputation : 4
Language : English

Back to top Go down

Solved Re: A little centering.

Post by Base on October 23rd 2011, 10:41 pm

You could try adding this to your rule:

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

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: A little centering.

Post by LGforum on October 23rd 2011, 10:42 pm

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. Wink 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?

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: A little centering.

Post by ℋunni on October 23rd 2011, 10:55 pm

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

ℋunni
Forumember

Female Posts : 150
Reputation : 4
Language : English

Back to top Go down

Solved Re: A little centering.

Post by Base on October 23rd 2011, 10:56 pm

Yay! I knew it would work. Very Happy

Glad we could both help you!

Problem Solved:Glad your problem is solved; topic marked as solved and archived. Smile

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum