Fluid width and logo alignment

[Cynthia]

We have a fixed width design in place for our default style. We have three optional styles that we have applied the same to but our members prefer the fluid width. The problem is the ads in the logo of the header. Here's what I have in the template:


<!-- logo -->
<a href="http://mothering.com/drupal_snapshot/subscription-offer-gift-month"><img src="http://www.mothering.com/discussions/images/banners/subgift.jpg" border="0"></a>

<if condition="!is_member_of($bbuserinfo, 37)">
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT mdc-misc-leaderboard-top-728x90 -->
<script type="text/javascript">
GA_googleFillSlot("mdc-misc-leaderboard-top-728x90");
</script>
<!-- END OF TAG FOR SLOT mdc-misc-leaderboard-top-728x90 -->

</if>
<!-- /logo -->
<br />

The jpg image does not stay aligned with the 728x90 leader board ad. It moves over to the right side of the screen, far away from the 728x90 leaderboard and expands and contracts based on the width of the browser window. See the attached screenshot.

I want to keep it right aligned with the leaderboard. What would I place in the tag for the image alignment to achieve this? Thanks for any suggestions.

[m411b]

Have you tried -- align="right" with a forward slash at closing, like this?


<!-- logo -->
<a href="http://mothering.com/drupal_snapshot/subscription-offer-gift-month"><img src="http://www.mothering.com/discussions/images/banners/subgift.jpg" border="0" align="right" /></a>

<if condition="!is_member_of($bbuserinfo, 37)">
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT mdc-misc-leaderboard-top-728x90 -->
<script type="text/javascript">
GA_googleFillSlot("mdc-misc-leaderboard-top-728x90");
</script>
<!-- END OF TAG FOR SLOT mdc-misc-leaderboard-top-728x90 -->

</if>
<!-- /logo -->
<br />

[Cynthia]

I just tried your code



<!-- logo -->
<a href="http://mothering.com/drupal_snapshot/subscription-offer-gift-month"><img src="http://www.mothering.com/discussions/images/banners/subgift.jpg" border="0" align="right" /></a>

<if condition="!is_member_of($bbuserinfo, 37)">
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT mdc-misc-leaderboard-top-728x90 -->
<script type="text/javascript">
GA_googleFillSlot("mdc-misc-leaderboard-top-728x90");
</script>
<!-- END OF TAG FOR SLOT mdc-misc-leaderboard-top-728x90 -->

</if>
<!-- /logo -->
<br /> and it still sticks to the right side of the page when I drag the browser window open.

[m411b]

Oh, I see now! You want it to stay to the right edge of the 728x90 image?
Just suggestions but, I know this will center your image. You may have to fix this in your css where you can position it other ways and in other positions by using percentages and other methods.
The code below will more than likely put your image above the rest but centered.


<!-- logo -->
<div align="center"><a href="http://mothering.com/drupal_snapshot/subscription-offer-gift-month"><img src="http://www.mothering.com/discussions/images/banners/subgift.jpg" border="0" align="center" /></a></div>

<if condition="!is_member_of($bbuserinfo, 37)">
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT mdc-misc-leaderboard-top-728x90 -->
<script type="text/javascript">
GA_googleFillSlot("mdc-misc-leaderboard-top-728x90");
</script>
<!-- END OF TAG FOR SLOT mdc-misc-leaderboard-top-728x90 -->

</if>
<!-- /logo -->
<br />

[Cynthia]

I'll have to get someone CSS skilled to take a look. Thanks for your help!

~Cynthia

[Chapman]

Hey!

I'm not too sure but is it possible for you to use floating images. Then you can set where they are.

I'm not too sure though :P
Just something I use for my login images to put them on the banner.

[Cynthia]

I'm not sure either Chapman. But thanks for the suggestion. :)

[m411b]

How did you fix it? It looks good BTW!

EDIT: OK, I see align="right" worked! Did you change things in your .css?

[Cynthia]

Actually I didn't get it fixed. You may be looking at the default style. If you change the style to MDC Tan you'll see my problem. :(

I haven't had anyone CSS skilled available to play with it so I'm stuck with the expanding alignment for now.

[m411b]

You might try this!
I changed it by using Dreamweaver CS4. The .css element you want to change is ".cover".
AdminCP/Styles & Templates/Style Manager/GOTO Dropbox of style you want to change( in this case "MDC Tan" and choose Main CSS/ - Scroll all the way to the bottom to the "Additional CSS Definitions" and in the SECOND box increase size and find the element called .cover and change it from

THIS:

.cover {
position: absolute;
width: 130px;
height: 96px;
right: 0;
top: 0;
}TO
THIS:

.cover {
position: absolute;
width: 130px;
height: 96px;
right: 675px;
top: 5px;
}This change will move your small image on the top right; to the right edge of your big header image, but will keep everything left aligned on the page. If you want all the images centered, I will figure that out for you as well!
Keep in mind this works only when I copy your page source and change values in DWCS4. So it may give unexpected results. If it give unexpected results just change the two values back to '0'.

[Cynthia]

Thanks so much for the help :)

This:

.cover {
position: absolute;
width: 130px;
height: 96px;
right: 0;
top: 0;
}
Is for a different image that is not a problem. Could it be this that I'd adjust?



#headercontainer {
position: relative;
border: 3px solid #FFF;
border-bottom: none;
background-color: #8ba13d;
height: 130px;
width: 974px;
}

[m411b]

OK, we will try this cause it works! We are going to add a new div class just for this pic.

Add this below the .cover element:

.little {
position:absolute;
width:240px;
height:90px;
right:675px;
top:5px;
}And then add this for your pic code:


<div class="little"><a href="http://mothering.com/drupal_snapshot/subscription-offer-gift-month"><img src="http://www.mothering.com/discussions/images/banners/subgift.jpg" border="0" align="right"></a></div>I apologize for the other .css change not working as I was in a rush and did not pay much attention! Rest assured this will work... If it does not, I will ask a mod to give you my board reputation (which isn't much)!! m411b is crossing fingers that this does it :)

This change will give you this:


If anyone else wants to chime in, be my guest!

[Cynthia]

LOL!

Well, It's not doing quite what I need. See the attached screenshot.

[m411b]

LOL, If you go to http://www.xtreme-tronics.org/test2.php you will be able to see what the above change will do for you! The screenshot I posted was the wrong one..
Here is the correct one with the change mentioned above:

[Cynthia]

That produced this in my view:

[m411b]

OK then we are getting somewhere, right! LOL
You will have to adjust the "right" to something like "500" or "475" to get it over to the right some. The "right" is basically a padding from the right. Take the number down and it will move your image to the right..take the number up and it will move the image left..

One other thing to consider is that the banner to the left of the small image on top changes its height. This is going to hide a small portion of the bottom of the small image behind the large image below it when the banner to the left on top changes its height.

[Cynthia]

I had to bring it down to 190 but it worked! Thanks so much! :)

And yes, the 468x60 banner is of isue and we're switching them all over to 728x90. So that should resolve that.

Much appreciated!!

[m411b]

No problem, sorry it took so much work to get what you wanted! I'm glad it worked for you.