Solved

How to style this so the facebook plugin is aligned on the bottom?

Posted on 2012-03-19
25
216 Views
Last Modified: 2012-03-20
How can I have <div class="slideshow"> and <div class="facebook" align="center"> next to each other, aligned at the bottom?  Right now, the <div class="facebook" align="center"> is below facebook.  Thank you.


    <center>
          <div class="slideshow">
            <img src="img/Carousel Photos/keck-medical-center-usc-driveway.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/medical-plaza-banner.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/quad-with-keck-sign.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/USC_pdd_0147.jpg" alt="Doctor" width="375" height="236"/>
          </div>
       
        <div class="facebook" align="center">
            <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKeck-Medical-Center-of-USC%2F276536222387052&width=238&colorscheme=light&show_faces=true&border_color=%23990000&stream=false&header=false&height=258" scrolling="no" frameborder="2px" style="overflow:hidden; width:238px; height:258px;" allowTransparency="true"></iframe>
        </div>
       

        <ul id="ticker01">
              <li><span>1/19/2012</span><a href="http://www.keckhospitalofusc.org/">Special announcement at Keck Hospital...</a></li>
              <li><span>1/19/2012</span><a href="http://keck.usc.edu/">Special announcement at Keck Medical School...</a></li>
              <li><span>1/19/2012</span><a href="http://www.ncbi.nlm.nih.gov/pubmed/">Special announcement at Pubmed...</a></li>
              <!-- eccetera -->
        </ul>

    </center>
Site.Master
base.css
0
Comment
Question by:lapucca
  • 13
  • 12
25 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 37739024
Can you show a live link instead?

The first thing that has to go is the <center> tag.  That tag is depreciated and should not be used.  
>>>http://www.w3schools.com/tags/tag_center.asp 

The proper way to center block-level elements is to give it a width and use margin:0 auto;.

A live link, even if an example would help us help you much easier.
0
 

Author Comment

by:lapucca
ID: 37739155
http://keckmed.usc.edu/pp/

I want to center it in any resolution.  Will the margin tag accommodate this?  thank you.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37739163
Yes. That's the entire purpose of that way of doing it.  

Try this for your CSS .facebook:

.facebook {
    border: 20px none black;
    margin:0 auto;
    width: 230px;
}

Open in new window

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:lapucca
ID: 37739293
It seems to work for the facebook plugin but not for the other 2 components.  I tried putting the class Centering but that doesn't do it.  I added it to the ticker01 but that doesn't work either.  And I don't think I can edit the slideshow css since it's part of the jQuery plugin.  And 2 items, facebook and the slideshow are still not displayed on the same level and aligned at the bottom.  thank you.

.CategoryDiv li
{
    margin-top:3px;
    width: 800px;
}



    <div class="Centering">
          <div class="slideshow">
            <img src="img/Carousel Photos/keck-medical-center-usc-driveway.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/medical-plaza-banner.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/quad-with-keck-sign.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/USC_pdd_0147.jpg" alt="Doctor" width="375" height="236"/>
          </div>
       
        <div class="facebook" align="center">
            <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKeck-Medical-Center-of-USC%2F276536222387052&width=238&colorscheme=light&show_faces=true&border_color=%23990000&stream=false&header=false&height=258" scrolling="no" frameborder="2px" style="overflow:hidden; width:238px; height:258px;" allowTransparency="true"></iframe>
        </div>
       

        <ul style=" margin:0 auto;width: 800px;" id="ticker01">
              <li><span>1/19/2012</span><a href="http://www.keckhospitalofusc.org/">Special announcement at Keck Hospital...</a></li>
              <li><span>1/19/2012</span><a href="http://keck.usc.edu/">Special announcement at Keck Medical School...</a></li>
              <li><span>1/19/2012</span><a href="http://www.ncbi.nlm.nih.gov/pubmed/">Special announcement at Pubmed...</a></li>
              <!-- eccetera -->
        </ul>

    </div>
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37739297
I can't access the page now.
0
 

Author Comment

by:lapucca
ID: 37739314
Please try again, I just updated it.  Thank you.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37739335
Give your .Centering class a width
0
 

Author Comment

by:lapucca
ID: 37739351
I tried that already but still didn't work.  I just updated the sever.  Please check and see.  Thank you
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37739355
There's no width on the .Centering class

.Centering{margin:0 auto;}
0
 

Author Comment

by:lapucca
ID: 37739430
Oops, sorry, I added it to the class below it by mistake.  please check now but it still not working though.  Thank you.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37739968
Ok great.  Now all you need to do is make a slideshow class to your CSS and add the same margin:0 auto.  Like this:

.slideshow{margin:0 auto;}
0
 

Author Comment

by:lapucca
ID: 37740257
so there will be 2 slideshow css class?  One in my base.css and one with jQuery plugin css?  How would that work?  Both classess will be merged into one and used by the page?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37742342
You don't need 2 of them, but I didn't see any declarations in your page for the slideshow when I used Firebug.  I can only see the inline style that the Jquery is setting.
0
 

Author Comment

by:lapucca
ID: 37743796
It's in the asp.net master file.  I have to name the images div to .slideshow according to jQuery plugin.  Why isn't it picking up the parent div tag's class of Centering?  Is there a way to add additional style to that div besides the class?  Thank you.


    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });

            $(function () {
                $("ul#ticker01").liScroll();
            });
        });
    </script>

    <div class="Centering">
          <div class="slideshow">
            <img src="img/Carousel Photos/keck-medical-center-usc-driveway.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/medical-plaza-banner.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/quad-with-keck-sign.jpg" alt="Doctor" width="375" height="236"/>
            <img src="img/Carousel Photos/USC_pdd_0147.jpg" alt="Doctor" width="375" height="236"/>
          </div>
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37743813
It's not picking it up because that's not how it works. I understand the slideshow and Jquery requirement.  That's all fine.  

>>>Is there a way to add additional style to that div besides the class?
You could just do this:

<div class="slideshow Centering">
0
 

Author Comment

by:lapucca
ID: 37743823
okay, you're rigth.  Jquery uses that css clss name but I can still create that class in my base.css.  However, that seems to center the image location but the images and the facebook are still not aligned next to each other and lined up at the bottom.  Thank you.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37743831
So both the FB box and the slideshow should be next to each other????????
0
 

Author Comment

by:lapucca
ID: 37743903
I put a wrapper class around those 2 components.  yes, I would like the image and the facebook on the same level and aligned at the bottom.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37743915
At the bottom of what?
0
 

Author Comment

by:lapucca
ID: 37744006
I mean, both component should "aligned" at the bottom, basically, so they look like they're on the same level horizontally.  Right now one is on top of the other. Thank you.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37744032
Ok ready?

Add float:left to the following elements:
.slideshow
.facebook

Add clear:both to the following elements:
.tickercontainer

Finally add margin-top:20px; to the following:
.slideshow


Let me know
0
 

Author Comment

by:lapucca
ID: 37744315
Thank you so much for your patience and it is coming together nicely.  First, I can't edit the tickercontainer class.  That is a jQuery class for its plugin for the news ticker.  I did everything else you mentioned and you can see it looking nice in IE but completely messed up in FireFox.  I don't know what could be causing this.  Thank you.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 37744327
The CSS for it is right here:
http://keckmed.usc.edu/pp/Styles/li-scroller.css 

Line 3:

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff; 
width: 800px; 
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
clear:both;
}

Open in new window

0
 

Author Closing Comment

by:lapucca
ID: 37744766
Ah, that was the final touch which completed this for me.  Thank you very much for hanging in there to help me.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37744871
No problem at all.  Glad to help
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 35
Hide un-named HTML Label with CSS 14 36
LINQ Select all records by MAX data syntax help 1 17
asp.net mvc 2 21
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question