Space between profile and post

I've searched and found a few codes for this same problem but nothing seems to work. I'm running phpbb3 and here is a link to my site: http://thedivine.motionsforum.com/

So yeah, I just want to reduce the space between the profile area where the avatar and rank are displayed and where your post actually shows up. If anyone can help me with that, that would be wonderful.

Also 2 other slight issues, I used Javascript to move usernames above the avatar, but it didn't bring the user rank with it, and one code that I tried moved both the rank and username but it wasn't aligned with the avatar, the avatar was more to the left than the username and information. I can make a separate topic if needed but it's only a slight problem.

And the last thing, I asked users of the forum if it's happening for them but they say no, the forum seems to run a tad bit slow for me and I think it has to do with the large background image. To those that view it if it runs slow for you that'd be nice if you could let me know and if anyone knows why to let me know.

Oh and another thing that just came to mind, it relates to the space between profile and post, like on these forums there's a small dividing white line that doesn't go the entire length and if anyone knows the code to add that to my forums also that'd be sweet, but if not it's fine. I have decent experience with coding as I modified most of the site in the first place, so I can understand a bit.

Thanks!

Hi,

1. Reduce, what exactly the width or height of it?
2. Can post both of the codes you've used. I'm more interested to see the second one, i might be able to fix the aligned.
3. That can be a reason, Internet slow, or pretty old PC. Since the image is a bit slow. Do you have a lot of JS? Maybe clearing your browsers' cache might help.

The width of the space really, so the distance between the profile area and the post.

Here is the javascript code for the username above the avatar that I'm using currently

Code:

$(function(){
    $('.postprofile dl').each(function(){
    var theBox = $(this).children('dt:first');
    var uNameX = theBox.children('strong').html()+'<br>';
    theBox.children('a').before(uNameX);
    theBox.children('strong').hide();
    });
    });

I'll have to look around and find the previous code I used that moved the rank above as well but that one is what I'm currently using. And I think it's just my internet connection really because that's the one and only javascript code I have running, but thanks man.

Try this codes for the width: ACP >> Display >> Colors >> CSS

Code:

.postprofile {
margin-left: -12em;
}

.post-container {
margin-left: 12em;
}

Sorry, didn't work

Can you post your CSS here. Or if you want you can PM it to me. I want to see what you have before changing anything.

Here is my CSS

Code:

body {
   font-family: Verdana,Arial,Helvetica,sans-serif;
   color: #ffffff;
   background-color: #0c0c0c;
   background-image: url('http://i76.servimg.com/u/f76/17/77/98/67/test210.jpg');
   background-attachment: fixed;
        background-position: center;
   
   }
#wrap {

   background-color: rgba(25,25,25,0.8);background-repeat: repeat-x;
-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

   
-moz-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

-webkit-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px  #000000 ;

   }
a { text-decoration: none; }
blockquote {
   border: 1px solid #000000;
-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 10px;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;

   }
a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/gradie20.png");
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;
font-family: arial;
color: #000000;}

#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/gradie20.png");
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 3px;}
#search{
display:none;
}


.inputbox {
   background-color: rgba(0,0,50,0);

    border: 1px solid #BCBCBC;
   color: #ffffff;
   padding: 2px;
   cursor: text;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-radius: 5px;

   }

.inputbox:hover {

background-color: rgba(0,0,50,0);
    border: 1px solid #BCBCBC;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-radius: 5px;
border-color: #111010;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
box-shadow: 0 0 9px  #000000;
    }

fieldset dl {
   padding: 4px 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-radius: 5px;
   }
fieldset.fields1 dt {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-radius: 5px;
   }
fieldset.submit-buttons {
   
   margin: 5px 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }

.navbar {
      background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/test2722.png"), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
background-position: center top;
background-repeat: repeat-x, repeat-y;
-moz-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

-webkit-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px  #000000 ;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
   }
dl.codebox {
   
   background-color: #000000;
   border: 1px solid #C9D2D8;
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border: 1px solid #101010;
   }
.forabg {
   
   background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/test2722.png"), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
background-position: center top;
background-repeat:repeat-x, repeat-y;
-moz-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

-webkit-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px  #000000 ;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

   }
.forumbg {
      background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/test2722.png"), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
background-position: center top;
background-repeat: repeat-x, repeat-y;
-moz-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

-webkit-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px  #000000 ;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

   }
.panel {
      
      background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/test2722.png"), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
background-position: center top;
background-repeat: repeat-x;
-moz-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

-webkit-box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px #000000;

box-shadow: 0 0 9px  #000000,inset 0px 0px 9px 0px  #000000 ;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
.post {
      background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
   background-repeat: repeat-y;
   background-position: 100% 0;
-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 10px;
 

-moz-box-shadow :inset 0 0 9px #000000;
-webkit-box-shadow :inset 0 0 9px #000000;
box-shadow:inset 0 0 9px  #000000;
   }
.postprofile {
   color: #ffffff;
     
-moz-border-radius: 20px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#cp-main {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#cp-main .panel {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#cp-main table.table1 {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#ucp-main table.table1 {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#tabs {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   
/*min-width: 570px;
   */
}
#smiley-box {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }

ul.profile-icons {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
#message-box textarea {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   }
.module {
   clear: both;
   background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
   background-repeat: repeat-y;

background-repeat: repeat-x;
-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

    -o-transition: background-color 0.2s linear; 
-moz-box-shadow :inset 0 0 9px #000000;
-webkit-box-shadow :inset 0 0 9px #000000;
box-shadow:inset 0 0 9px  #000000;
   }

.signature {
   
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-color: #111010;

   }
body.chatbox {

 
background-image: url('http://i60.servimg.com/u/f60/14/70/09/25/body-r10.png');

   }
.postprofile dl dt img {
    max-height: 200px !important;
    max-width: 200px !important;
}
/* Login Popup---------------------------------------------------*/
#login_popup {
background-color: #262627;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
background-image: url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   
   background-repeat: repeat-y;
border: 1px solid #101010;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;   
background-repeat: repeat-x;
}
.online {
   background-image: url(""), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png");
   background-position: right 0, center;
   background-repeat: no-repeat,repeat-y;
   }

/*.online2 {
   position: absolute;
   top: -10px;
   right: 0;
   background-image: url(""), url("http://i20.servimg.com/u/f20/14/70/09/25/bg_212.png") ;
   background-repeat: no-repeat, repeat-y;
   background-position: right 0, center;
   width: 100px;
   height: 100px;
   }
.name a {
    font-size:  25px;
}


Any help with this? I can't seem to get anything to work

Try adding this,

Code:

dt {
display: block;
}

My apologies Sanket. And nope, still didn't do anything

Try this,

Code:


.postprofile {
    margin: 2px 0 10px 0;
    min-height: 80px;
    color: #888;
    border-left: 1px solid #333;
    width: 150px;
    float: right;
    word-wrap: break-word;
}

Okay so I'm going to keep that code in there now so you can look, it moved the profile area to the right but left a huge space on the left side now

Change the float part to center; might work

Hmm now it's back to the same really

Change it back to right and reduce the width.

I've been messing with it even changing the position to left and right and messing with the width, but nothing seems to look right. No matter what there is always a bigger gap than I'd like, and when there isn't and it's positioned how I want it there's just a huge space to the left of the avatar. I think I'm going to have to change the theme entirely sadly, thanks for all your help man.