一个在另一个下的文本[关闭]

Question

So i've made a simple system, but the problem is displaying the text. I dont know how to make it to be like one under another and not like this:

http://i.imgur.com/FgKK1AR.jpg

if i use on the end of line it would move image with it:

like before:

http://i.imgur.com/RB90XfI.jpg

after:

http://i.imgur.com/04S8Vz2.jpg

code:

 .usercover {
   background: url(../images/profili/cover.png) no-repeat;
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#99000000', GradientType=0);
   width: 101%;
   height: 250px;
   overflow: hidden;
 }
 .usercover img {
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 250px;
   user-drag: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .covernebitno {
   border: 1px solid #DBDBDB;
   height: 250px;
   overflow: hidden;
   position: relative;
 }
 .avatar-profil img {
   min-height: 100px;
   min-width: 100px;
   max-height: 100px;
   max-width: 100px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 135px;
   margin-left: 13px;
 }
 .informacije p {
   font-size: 15px;
   margin-top: 145px;
   margin-left: 135px;
   color: white;
   position: absolute;
 }
 .bojeipticice {
   color: #696096;
 }
 .korisnikstatus {
   color: #000;
 }

<div class="covernebitno">
  <div class="avatar-profil">
    <a href="/index.php?action=profile">', $context['member']['avatar']['image'], '</a>
    </center>
  </div>
  <div class="usercover">
    <div class="informacije">

      <p>', $context['member']['name'], ' <span class="bojeipticice"></br>', (!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group'])  . $context['member']['online']['text'] . '</p>
    <p>Posalji Poruku</p></div></span>
        <img src="http://i.imgur.com/U0TijfL.jpg" />

        <div class="covernebitno">

        </div>
    </div>
  </div>

</div>

Answer 1

html is really messed up check where you open tags and where you close them !

selectors choosen in css are the wrong ones, select the parent not the childs. every p are piled on same coordonates

html cleaned up a bit and css selectors updated

.usercover {
   background: url(../images/profili/cover.png) no-repeat;
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#99000000', GradientType=0);
   width: 101%;
   height: 250px;
   overflow: hidden;
 }
 .usercover img {
   top: 0px;
   left: 0px;
   min-width: 100%;
   min-height: 250px;
   user-drag: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 .covernebitno {
   border: 1px solid #DBDBDB;
   height: 250px;
   overflow: hidden;
   position: relative;
 }
 .avatar-profil a {
   min-height: 100px;
   min-width: 100px;
   max-height: 100px;
   max-width: 100px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 135px;
   margin-left: 13px;
 }
 .informacije  {
   font-size: 15px;
   margin-top: 145px;
   margin-left: 135px;
   color: white;
   position: absolute;
 }
 .bojeipticice {
   color: #696096;
 }
 .korisnikstatus {
   color: #000;
 }

<div class="covernebitno">
  <div class="avatar-profil">
    <a href="/index.php?action=profile">image</a>
  </div>
  <div class="usercover">
    <div class="informacije">

      <p>name
        <span class="bojeipticice">group text</span>
        </p>
    <p>Posalji Poruku</p>
    </div>
        <img src="http://i.imgur.com/U0TijfL.jpg" />

        <div class="covernebitno">

        </div>
    </div>
  </div>

</div>