Solved

Help centering blockquotes in Footer

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now