Announcement

Collapse
No announcement yet.

Fluid width and logo alignment

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Fluid width and logo alignment

    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:

    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"></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.
    Attached Files
    Eat Your Veggies

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

    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 />
    Last edited by m411b; Tue 25th Aug '09, 3:30pm.

    Comment


    • #3
      I just tried your code

      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.
      Eat Your Veggies

      Comment


      • #4
        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.

        Code:
        <!-- 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 />
        Last edited by m411b; Tue 25th Aug '09, 3:51pm.

        Comment


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

          ~Cynthia
          Eat Your Veggies

          Comment


          • #6
            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.

            Comment


            • #7
              I'm not sure either Chapman. But thanks for the suggestion.
              Eat Your Veggies

              Comment


              • #8
                How did you fix it? It looks good BTW!

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

                Comment


                • #9
                  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.
                  Eat Your Veggies

                  Comment


                  • #10
                    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:
                    Code:
                    .cover { 
                      position: absolute;
                      width: 130px;
                      height: 96px;
                      right: 0;
                      top: 0;
                    }
                    TO
                    THIS:
                    Code:
                    .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'.

                    Comment


                    • #11
                      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?

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

                      Comment


                      • #12
                        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:
                        Code:
                        .little {
                            position:absolute;
                            width:240px;
                            height:90px;
                            right:675px;
                            top:5px;
                        }
                        And then add this for your pic code:

                        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!
                        Last edited by m411b; Sun 6th Sep '09, 10:51pm.

                        Comment


                        • #13
                          LOL!

                          Well, It's not doing quite what I need. See the attached screenshot.
                          Attached Files
                          Eat Your Veggies

                          Comment


                          • #14
                            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:
                            Last edited by m411b; Mon 7th Sep '09, 6:59am.

                            Comment


                            • #15
                              That produced this in my view:
                              Attached Files
                              Eat Your Veggies

                              Comment

                              Related Topics

                              Collapse

                              Working...
                              X