Solved

Help centering blockquotes in Footer

Posted on 2011-09-15
5
171 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 500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

756 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