Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Help centering blockquotes in Footer

Posted on 2011-09-15
5
Medium Priority
?
191 Views
Last Modified: 2012-05-12
Hello Experts,

I have the following HTML Markup and CSS below for my Footer. I'm having a problem centering the contents of the <blockquote> at the bottom of my page along with the contents of the lblquoteauther Label Control.

Contents of the <Label> Controls are getting retrieved from the Database.

HTML Markup:

        <div id="footer">
            <blockquote>
                <asp:Label ID="lblquote" runat="server"></asp:Label>
            </blockquote>
            <br />
            <asp:Label ID="lblquoteauthor" CssClass="lblauthor" runat="server"></asp:Label>
        </div>

CSS:

#footer
{
    clear: both;
    padding-top: 10px;
}

#footer blockquote
{
    width: 880px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    color: #c2a863;
    margin: 0px;
    margin-left: 35px;
    padding-top: 20px;
    quotes: "\201C" "\201D";
    text-align: center;
}
 
#footer blockquote:before
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: open-quote;
    font-weight: bold;
}
 
#footer blockquote:after
 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    content: close-quote;
    font-weight: bold;
}

.lblauthor
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    color: #c2a863;
    text-align: center;
    margin-left: 200px;
}
0
Comment
Question by:asp_net2
  • 2
  • 2
5 Comments
 
LVL 6

Expert Comment

by:i-CONICA
ID: 36542595
Try giving the blockquote a width less than the width of #footer then use margin: 0 auto; on the blockquote, rather than text-align: center;
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36542646
Hi i-CONICA,

That worked very well with the <blockquote>. But also need the <label> control that is not included in the <blockquote> to do the same.
0
 
LVL 6

Accepted Solution

by:
i-CONICA earned 2000 total points
ID: 36548432
Hi,

I don't know ASP so don't know what that code outputs to the browser, but it must be some HTML. If it's just <label> then you could use the same, but with display:block; too.

#footer label{
display:block;
width:200px;
margin:0 auto;
}
0
 
LVL 4

Author Comment

by:asp_net2
ID: 36582627
Hi i-CONICA,

What worked but with a little issue. I had to use a width of 600 because of how long the author of the quotes are. But, by changing the width it does not appear to be centered it appears that it favors the left more meaning that the author info seems to go more towards the left rather than centering accordingly.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

885 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