Dinocanid
04-02-2017, 03:39 PM
I have a background system on my site that semi-works right now, which still needs lots of tweaking, but I have a problem with the background going over the tables or the adopt hovering outside of the background:
http://www.clipular.com/c/4835705659588608.png?k=iYY-4wklmttbenOuGUT3127jfKo
http://www.clipular.com/c/5961605566431232.png?k=S_CD7Q-mHs0AP3LEh7EgqgFURms
I currently have my css like this:
.decor {
position: absolute;
top: 26%;
left: 49%;
z-index: 1;
}
.adopt {
position: relative;
z-index: 2;
and my code like this:
$background = $adopt->getAdoptBackground();
$image = $adopt->getImage("gui");
$document->add(new Comment("<div class = 'adopt'>"));
$document->add($image);
$document->add(new Comment("<center>"));
if ($background == ""){
$document->add($image);
}
else{
$document->add(new Comment("<div class = 'adopt'>"));
$document->add($image);
$document->add(new Comment("</div>"));
//$document->add(new Comment("<br></br>"));
$document->add(new Comment ("<div class='decor'><img src='{$mysidia->path->getAbsolute()}picuploads/backgrounds/{$background}.png'</div>"));
}
$document->add(new Comment("</center>"));
(Not the exact/full myadopts.php code, but the snippets I'm referring to)
I've done a lot of adjusting to the css, but all of my pet images are different sizes, so I can't get every one to fit correctly; unless I had separate sections in the css code for every adoptable with background issues, but I can see that getting tedious as more and more species are added. I tried not using positioning and only adjusting the z-index, but that causes the pet to appear either above, below, or beside the background, and not in it.
http://www.clipular.com/c/4835705659588608.png?k=iYY-4wklmttbenOuGUT3127jfKo
http://www.clipular.com/c/5961605566431232.png?k=S_CD7Q-mHs0AP3LEh7EgqgFURms
I currently have my css like this:
.decor {
position: absolute;
top: 26%;
left: 49%;
z-index: 1;
}
.adopt {
position: relative;
z-index: 2;
and my code like this:
$background = $adopt->getAdoptBackground();
$image = $adopt->getImage("gui");
$document->add(new Comment("<div class = 'adopt'>"));
$document->add($image);
$document->add(new Comment("<center>"));
if ($background == ""){
$document->add($image);
}
else{
$document->add(new Comment("<div class = 'adopt'>"));
$document->add($image);
$document->add(new Comment("</div>"));
//$document->add(new Comment("<br></br>"));
$document->add(new Comment ("<div class='decor'><img src='{$mysidia->path->getAbsolute()}picuploads/backgrounds/{$background}.png'</div>"));
}
$document->add(new Comment("</center>"));
(Not the exact/full myadopts.php code, but the snippets I'm referring to)
I've done a lot of adjusting to the css, but all of my pet images are different sizes, so I can't get every one to fit correctly; unless I had separate sections in the css code for every adoptable with background issues, but I can see that getting tedious as more and more species are added. I tried not using positioning and only adjusting the z-index, but that causes the pet to appear either above, below, or beside the background, and not in it.