[RESOLVED] CSS inside of PHP

Dawg

It's been while since I have asked anything and I know this is the place for help. You guys and girls have never failed.

I put together a Joomla site (using the JA Purity template) for the North American Blokart Association (NABSA).

You can see in the header the Logo on the left and an image rotation (on refresh or new page view) on the right.

I have been trying to move the image rotation so it is more centered between the Logo and the Search function. but no matter what I do it does not do what I want.

Here is the code for the header. The code in question is at the top in the ja-header div. (I thinnk)

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
   [B]<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top  <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

   <div class="ja-headermask">&nbsp;</div>

   <?php
      $siteName = $tmpTools->sitename();
      if ($tmpTools->getParam('logoType')=='image'): ?>
      <h1 class="logo">
         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
      </h1>
   <?php else:
      $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
      $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');   ?>
      <h1 class="logo-text">
         <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
      </h1>
      <p class="site-slogan"><?php echo $sloganText;?></p>
   <?php endif; ?>

   <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

   <?php if($this->countModules('user4')) : ?>
      <div id="ja-search">
         <jdoc:include type="modules" name="user4" />
      </div>
   <?php endif; ?>

   </div>
</div>
<!-- END: HEADER -->

Here is the CSS for the header area.

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
   background: #333333;
   color: #CCCCCC;
   line-height: normal;
   height: 120px;
        padding-top:10px;
}

#ja-header {
   position: relative;
   height: 120px;
}

.ja-headermask {
   width: 602px;
   display: block;
   /*background: url(../images/header-mask.png) no-repeat top right;*/
   height: 100px;
   position: absolute;
   top: 0;
   right: -1px;

}

#ja-header a {
   color: #CCCCCC;
}

h1.logo, h1.logo-text {
   margin: 0 0 0 5px;
   padding: 0;
   font-size: 180%;
   text-transform: uppercase;
}

h1.logo a {
   width: 400px;
   display: block;
   /*background: url(../images/logo.png) no-repeat;*/
        background: url(../../../images/banners/nabsa5-1.jpg) no-repeat;
   height: 120px;
   position: relative;
   z-index: 100;
}

h1.logo a span {
   position: absolute;
   top: -1000px;
}

h1.logo-text a {
   color: #CCCCCC !important;
   text-decoration: none;
   outline: none;
   position: absolute;
   bottom: 40px;
   left: 5px;
}

p.site-slogan {
   margin: 0;
   padding: 0;
   padding: 2px 5px;
   color: #FFFFFF;
   background: #444444;
   font-size: 92%;
   position: absolute;
   bottom: 20px;
   left: 0;
}

I have posted this question in the Joomla forums but am receiving no answers what so ever.

Thanks for any thoughts on this fix.

Dave

johanafm

Unless your PHP code actually changes the layout (rather than just content), there is no need providing anything but html and css code.
If your php code alters layout, it's still a good idea to provide an html code example, especially when there's php code mixed in with html code on every single line.

If I understand you correctly, you want to move an image element, and possibly its containing element, from its place and have it placed somewhere else. In this case, you don't even need an image. Just provide style width and height for the image and assign it a border or something else to make it stand out. Replace all php-provided content with some text describing what's supposed to be there, such as "top header" or "main content", and provide with and height styles if necessary (since there's no longer any real content filling up the elements).

After that, you will most likely have no trouble getting help. Especially not if you also provide an fixed positioned div which actually shows where you want your image to be.

Dawg

Thanks for the reply.

The problem is, I have played with all the code (that I see is related to the element), one item at a time and I still cannot figure out how or what needs to be edited in the header code or css (which is why I pasted all the header code and css) to move the rotation in the header. www.nabsa.org

I was hoping someone more advanced than I am might see through the fog and point me at the css or php that needs to be edited.

Sometimes reading code written by you more advanced users is pretty tough. ie: it's complicated.

Thanks

johanafm

Ah, I completely missed your link to the actual page, and looking at that, I have something to work with.
The image your talking about is assigned as background to the div "ja-header" with css styling "right top" for positioning, which means that it ends up in the top right corner of its element.

<div style="background: url('http://www.nabsa.org/templates/ja_purity/images/header/header1.jpg')
no-repeat scroll right top transparent;" class="clearfix" id="ja-header">

So, to move the image, you could simply change the background positioning to a fixed value for left-right by changing "left" to "400px", which will put it 17px to the right of the logo which is 383px wide.

<div style="background: url('http://www.nabsa.org/templates/ja_purity/images/header/header1.jpg')
no-repeat scroll 400px top transparent;" class="clearfix" id="ja-header">

Dawg

Thanks, That did it. I had tried something like this but I was not smart enough to use the Scroll. I'll have to look it up to see what it does.

johanafm

It wasn't the scroll that did it. In fact, the "scroll" part was allready there, as you can see from my straight off copy-paste (the first code snippet). The only thing changed between your code and mine (seond code snippet), is that "left" was replaced with "400px".

Dawg

That's interesting.

One of the first edits I did try was editing the code to say left 400px.

I guess that was totally wrong.

This is what separates us advanced beginners from you advanced coders.

Thanks again