THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 17, 2014 11:44:30 GMT -8
I really like the style of mini profile where it's nice and neat blocks and everything aligns so neatly and... yeah. But I'm having issues with that! So if someone would be able to help me, that'd be so wonderful! Here's a link to my test site, to a thread with a post in it so you can see the mini profileThe borders are not going to be that dark, but I made them darker so it will be easier to see the alignment issues. Even when the backgrounds were a very light "#eeeeee", I could still tell they were off... The default icon size is 200x300, and I want the mini profile items to align with it. I only plan on having the two, posts and the money... Here's my code too, just in case someone can see what's wrong just by looking at it? What I see is that they are neither aligned, nor the same size. The box on the right is slightly smaller than the one on the left. :( <div class="$[miniprofile_class]"> {if $[user.avatar]} <div class="avatar" style="border: 4px solid #3f4e61; width: 200px; height: 300px;">$[user.avatar]</div> {/if} {if $[user.personal_text.message]} $[user.personal_text] {/if} {if $[user.is_member]} <div class="info"> <table width="200px;"><tr><td width="50%"><div class="mpcat"><span class="money_symbol" style="padding-right:3px;"></span><span class="money_amount"></span></div></td> <td width="50%"><div class="mpcat">$[user.posts] POSTS</div></td></tr></table> {foreach $[user.mini_custom_field]} <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span> {/foreach} </div><br /> {/if} <center><span class="mpname">$[user]</span></center> <span style="font-family: ms mincho; text-transform: uppercase; font-size: 10px; text-align: center;">{if $[user.is_guest]}Guest<br />{/if} <style type="text/css"> /* mini profile */ .mpname { margin-top:-10px;text-align: center; font-family: georgia!important; text-transform: uppercase; } .mpname a { font: 32px 'Allura', cursive;; text-transform: lowercase; } .mpcat { display: block; background-color: #3f4e61; margin: 1px; padding:5px; text-transform: uppercase; color:#494949; } </style>
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 17, 2014 17:30:52 GMT -8
Try getting rid of the table. Instead, use display: inline-block for .mpcat and specify an equal width for them (eg. 100px). If you want to center those blocks, I think you can do it with margin: auto or the center tag.
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 17, 2014 18:48:50 GMT -8
Okay, I did that, but now they are stacked instead of side-by-side.
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 18, 2014 6:57:41 GMT -8
Try decreasing the width to 95px then. If not, try this too:
<div class="info2"> <div class="mpcat"><span class="money_symbol"></span><span class="money_amount"></span></div><div class="mpcat">11 POSTS</div> </div>
change the info class to info2 and create .info2 { display: table; width: 200px; }. then, change .mpcat to { display: table-cell; }.
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 10:02:39 GMT -8
Oohh, that's better! But now they're squished together, and adding margin doesn't help. How can I create a small space between them?
|
|
|
Post by minnie on Mar 18, 2014 10:14:00 GMT -8
lol okay first off, your initial problem was because you have the little jewel image icon, which throws off your padding / dimensions.
second, to fix it so that the boxes are the exact same dimensions are super simple. make it a table, and instead of <div> < / div> tags inside the td, put the style tags INSIDE the actual td.
Like so:
< td style=" styling here " >
yup.
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 10:49:22 GMT -8
Still no space, and I have fiddled with the margin tags... I put them in the td themselves... in the class... Dx
|
|
|
Post by minnie on Mar 18, 2014 11:22:46 GMT -8
you'd have to do <table cellspacing="5px" >. lol that's how you manipulate spacing within a table, remember?
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 11:32:41 GMT -8
For some reason, it's not working. =w= I tried that many times, and I even added it to the current code and nothing.
|
|
|
Post by minnie on Mar 18, 2014 11:35:17 GMT -8
do you want me to try coding it myself?
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 13:47:48 GMT -8
Oh... If you don't mind! That'd be a great help. I'm running out of ideas. XDD
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 18, 2014 14:59:00 GMT -8
Oohh, that's better! But now they're squished together, and adding margin doesn't help. How can I create a small space between them? Add this in .info2: border-collapse:separate;border-spacing:2px; Both Minnie and I are actually just using table just the same, so either works. I usually only use tables for big elements. This is a fiddle on it. Not the exact solution for your problem, but it's an example I found for aligning adjacent elements together. And yeah, for future reference, margin doesn't work when you use display table. I just found it out myself lol.
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 15:15:26 GMT -8
Oh yay~ It looks the way I want. xD Thanks so much for your help, you two. I'll just use it like this~
EDIT the icon is not aligned to the table now x.x;
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 18, 2014 15:34:26 GMT -8
And neither the username lol. You shouldn't use info2 as a table class. For the solution I have, you have to drop all the <table> all together. The entire code should look something like this:
<div style="width: 200px; text-align: center;"> <img src="icon" style="border: something"> <div style="something"> text stuff </div> <div class="info2"> money </div> <div class="info2"> posts </div> <div style="something"> name </div> </div>
|
|
THIS HAND OF MINE IS BURNING RED
|
Post by middy♥ on Mar 18, 2014 21:11:15 GMT -8
Sorry, but I'm just a bit confused... So do I leave the info2 as table-cell and all that? If I'm not using it as a table, why am I giving it table classes...?
|
|