Link to home
Create AccountLog in
ASP.NET

ASP.NET

--

Questions

--

Followers

Top Experts

Avatar of lapucca
lapucca

How to style this so the facebook plugin is aligned on the bottom?
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

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.


Avatar of LZ1LZ1🇺🇸

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.

Avatar of lapuccalapucca

ASKER

http://keckmed.usc.edu/pp/

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

Avatar of LZ1LZ1🇺🇸

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


Reward 1Reward 2Reward 3Reward 4Reward 5Reward 6

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.


Avatar of lapuccalapucca

ASKER

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>

Avatar of LZ1LZ1🇺🇸

I can't access the page now.

Avatar of lapuccalapucca

ASKER

Please try again, I just updated it.  Thank you.

Free T-shirt

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.


Avatar of LZ1LZ1🇺🇸

Give your .Centering class a width

Avatar of lapuccalapucca

ASKER

I tried that already but still didn't work.  I just updated the sever.  Please check and see.  Thank you

Avatar of LZ1LZ1🇺🇸

There's no width on the .Centering class

.Centering{margin:0 auto;}

Reward 1Reward 2Reward 3Reward 4Reward 5Reward 6

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.


Avatar of lapuccalapucca

ASKER

Oops, sorry, I added it to the class below it by mistake.  please check now but it still not working though.  Thank you.

Avatar of LZ1LZ1🇺🇸

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;}

Avatar of lapuccalapucca

ASKER

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?

Free T-shirt

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.


Avatar of LZ1LZ1🇺🇸

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.

Avatar of lapuccalapucca

ASKER

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>

Avatar of LZ1LZ1🇺🇸

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">

Reward 1Reward 2Reward 3Reward 4Reward 5Reward 6

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.


Avatar of lapuccalapucca

ASKER

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.

Avatar of LZ1LZ1🇺🇸

So both the FB box and the slideshow should be next to each other????????

Avatar of lapuccalapucca

ASKER

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.

Free T-shirt

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.


Avatar of LZ1LZ1🇺🇸

At the bottom of what?

Avatar of lapuccalapucca

ASKER

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.

Avatar of LZ1LZ1🇺🇸

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

Reward 1Reward 2Reward 3Reward 4Reward 5Reward 6

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.


Avatar of lapuccalapucca

ASKER

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.

ASKER CERTIFIED SOLUTION
Avatar of LZ1LZ1🇺🇸

Link to home
membership
Log in or create a free account to see answer.
Signing up is free and takes 30 seconds. No credit card required.
Create Account

Avatar of lapuccalapucca

ASKER

Ah, that was the final touch which completed this for me.  Thank you very much for hanging in there to help me.

Avatar of LZ1LZ1🇺🇸

No problem at all.  Glad to help

Free T-shirt

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

ASP.NET

ASP.NET

--

Questions

--

Followers

Top Experts

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications