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