Putting Big Temp on header jpg

[jdpsys]

I wish to put the BigTemp and the ajax-gizmo on the right side of my header jpg
Any idea's on modifying the header.php?

<div id="header">
             <a href="index.php" title="Browse to homepage"><img src="header.jpg" alt="Fairfield Weather" border="none" /></a>
          <div class="headerTemp">
       <span class="doNotPrint">
         <span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"; ?>
        </span>
      </span>
      </div>
 
      <div class="subHeaderRight">
     <?php
      if (isset($showGizmo) and $showGizmo) {
        include_once("ajax-gizmo.php");
      } else {
        print "&nbsp;<br/><br/>\n"; // needed as placeholder if no gizmo
      }
     ?>
     </div><!-- end subHeaderRight -->
</div>

[saratogaWX]

If you want the big-temp and gizmo to appear over your header graphic, I'd suggest you remove the

           <a href="index.php" title="Browse to homepage"><img src="header.jpg" alt="Fairfield Weather" border="none" /></a>
 line

and change the default CSS for your website to have in

Code:

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

Then change the 'background-color: #nnnnnn;' to 'background-color: transparent;' in both the .subHeader and .subHeaderRight CSS

You may need to adjust the height: number to get your image to fully show.

Hope this helps...

BTW.. best way to test this is using the Firefox Web Developer plugin (CSS Editor) so you can interactively tweak and see the results .. saves a lot of FTP activity while testing the CSS out.

Best regards,
Ken

[jdpsys]

Thanks Ken,
Perfect ~

[Moose Whisperer]

Is there any way to do this along the original lines of the OP's question? I wish to have the big temp and gizmo show up on the right side of my header graphic for use in other pages using entirely different css files. Ideally then, that graphic can just be inserted at the top of the page without any other formatting needed (if this makes sense).

[Gordon]

Thanks Ken,
Perfect ~

Jon,

Would you mind posting the snippets of code you modified? I'm having the darnedest time getting this to work.

I'd appreciate it...

[jdpsys]

No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.

[Gordon]

No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.

Great...Thanks Jon.

[Gordon]

No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.

Well...almost. I can't get my background image to display:

Header.php:

Code:

<!-- header -->
    <div id="header">
        <div class="headerTemp">
       <span class="doNotPrint">
         <span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"; ?>
        </span>
      </span>
      </div>

.css file:

Code:

#header {
  color: inherit;
  background-image: url ('images/susan-banner.jpg') no-repeat center;
  background-color: transparent;
  height: 120px;
}

Thoughts?

[jdpsys]

You might try:

background: url(images/susan-banner.jpg) no-repeat center;

I’m assuming you are in the selected CSS file for your pages.

I am not familiar enough with style sheets to spot format errors. I just wack away at it and know I made a mistake when something does not work.

[Gordon]

You might try:

background: url(images/susan-banner.jpg) no-repeat center;

I’m assuming you are in the selected CSS file for your pages.

I am not familiar enough with style sheets to spot format errors. I just wack away at it and know I made a mistake when something does not work.
javascript:void(0);

Ha! Got it! (although your suggestion above wasn't the issue.) It was my menu configuration getting in the way.

Believe me Jon, I know of no other way to code...  

Thanks again for the assistance!

[CNYWeather]

Gordo, looks like you lost the styling of the menubar?

It was blue yesterday when I stopped by 

[Gordon]

Gordo, looks like you lost the styling of the menubar?

It was blue yesterday when I stopped by 

Lets just say the menubar took one for the team TG...   

I dunno, change is good they say...