Solved

Help centering blockquotes in Footer

Posted on 2011-09-15
5
170 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: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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
Placeholder text not disappearing in Contact Form 7 2 23
Else condition 9 23
Troubles viewing HTML in Outlook 2010 client 3 28
Responsive Font Size 6 25
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

791 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