Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Help centering blockquotes in Footer

Posted on 2011-09-15
5
Medium Priority
?
185 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

722 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