• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Solved How do i move this Image to the right?

Tyson12302

New Member
Joined
Aug 6, 2014
Messages
264
Reaction score
4
I want the Featured Article to look like on the real Tibia.com. But the image is under my writing. I want to be on the right side. How can i do that?
4BcwBCP.png


PHP:
//featured article
$news_content .= '
    <div id="news" class="Box">
    <div class="Corner-tl" style="background-image:url('.$layout_name.'/images/content/corner-tl.gif);"></div>
    <div class="Corner-tr" style="background-image:url('.$layout_name.'/images/content/corner-tr.gif);"></div>
    <div class="Border_1" style="background-image:url('.$layout_name.'/images/content/border-1.gif);"></div>
    <div class="BorderTitleText" style="background-image:url('.$layout_name.'/images/content/title-background-green.gif);"></div>
    <img class="Title" src="'.$layout_name.'/images/header/headline-featuredarticle.gif" alt="Contentbox headline" />

    <div class="Border_2">
        <div class="Border_3">
            <div class="BoxContent" style="background-image:url('.$layout_name.'/images/content/scroll.gif);">
                <div id=\'TeaserText\'>
                    <div style="position: relative; top: -2px; margin-bottom: px;" >
                        <b>Offline Training</b>
                    </div>
Offline Feature is coming to Neuofia with a new 8.6 feel to it! You will be able to get your skills up when your Offline! For VIP Players. Offline Training is only available in VIP City. This gives VIP Players an opportunity to advance the skills of their characters while being offline. You are able to choose one of the following skill combinations for your training: Magic level + Shielding, Distance Fighting + Shielding, Sword Fighting + Shielding, Axe Fighting + Shielding, or Club Fighting + Shielding.<br/>
                <div id=\'TeaserThumbnail\'><img src="'.$layout_name.'/images/header/features.jpg" width=150 height=100 border=0 alt="" /></div> 
                </div>
            </div>
        </div>
    </div>
    <div class="Border_1" style="background-image: url('.$layout_name.'/images/content/border-1.gif);"></div>
    <div class="CornerWrapper-b"><div class="Corner-bl" style="background-image: url('.$layout_name.'/images/content/corner-bl.gif);"></div></div>
    <div class="CornerWrapper-b"><div class="Corner-br" style="background-image: url('.$layout_name.'/images/content/corner-br.gif);"></div></div>
    </div>
';
 
In your CSS file change the float to right:
Code:
.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 150px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}
 
Its already on the right
Code:
/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position:relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 100px;
  height: 150px;
  width: 1px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

Don't i have to add anything in the php file on latest news?
 
Its already on the right
Code:
/* Featured Article */

.Content #FeaturedArticle .BoxContent {
  position:relative;
  height: 100px;
  padding: 5px;
  padding-left: 10px;
  min-height: 100px;
  height: auto !important;
  height: 110px;
  line-height: 10.5pt;
}

.Content #FeaturedArticle #TeaserThumbnail {
  position: relative;
  top: 0px;
  right: 100px;
  height: 150px;
  width: 1px;
  margin-left: 10px;
  background-color: black;
  z-index: 90;
  float: right;
}

Don't i have to add anything in the php file on latest news?

Hmm, not sure that did the trick for me. Initially I tried with HTML tags but with no success. Maybe it will work with you:

I've added align="right" in the tag below:
Code:
<img src="'.$layout_name.'/images/header/features.jpg" width=150 height=100 border=0 alt="" align="right"/>

Also you can double check in your layout.php to make sure we're looking in the right CSS files:
For example mine load these files:
Code:
<!--CSS'S-->
<link href="<?PHP echo $layout_name; ?>/css/basic_d.css" rel="stylesheet" type="text/css">
<link href="<?PHP echo $layout_name; ?>/css/news.css" rel="stylesheet" type="text/css">
 
Back
Top