Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS. Alignment

  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Loire Valley, France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS. Alignment

    Salut,

    Can anyone help me with this annoying problem.

    I have a <p> tag set up on a style sheet and I want to apply a class to configure one <P> differently.

    I have applied a class, .quote, and applied the CSS in html. It changed the colour but would not change the text-align. I then deleted the p class="quote" and used a span tag on the actual words. - same thing, it would format most things but not the text-align. The code is as follows:


    <p class="quote">
    Please do not hesitate to
    <a href="mailto:brianand%20sheila@closdesguyons.com?subject=Autumn Break" title="contact us by email">contact</a> us for further information</p>

    and the CSS:

    .quote {
    text-align: center;
    color: #008000;

    Dead simple but can't see why it won't work, any suggestions welcome.
    I am using EW4

    Merci bien
    Brian

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello Ponot,
    It looks like what you've given us should work so there must be something wrong with what you have not yet shown us. You are missing a closing bracket, }, on that CSS but I'm assuming that just got missed in the copy/paste.

    See this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    	text-align: left;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 50px 0;
    	background: #999;
    }
    .quote {
    	text-align: center;
    	color: #008000;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <p class="quote">
                Please do not hesitate to 
                <a href="mailto:brianand%20sheila@closdesguyons.com?subject=Autumn Break" title="contact us by email">contact</a> us for further information
            </p>
        <!--end container--></div>
    </body>
    </html>
    See the w3schools page on the text-align property here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Loire Valley, France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS alignment

    Thank you for coming back to me,

    I'm no expert but I can't see any other problems.

    If you can possibly find the time this is the page http://www.closdesguyons.com/october..._the_loire.htm

    I've fiddled around with the style sheet as the .quote itself is on the page but I can't seem to change anything.
    I copied most of the text from an earlier html page so I though there may have been an inline style somewhere but I can't see anything.

    Merci encore

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    In your test.css, line 257 you have an entry for #centre_div p that is overridinging your .quote CSS. Being more specific will fix that. See a page explaining specificity here.

    Adding this bit in red may fix your issue -
    Code:
    #centre_div p.quote {
    	text-align: center;
    	color: #008000;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Loire Valley, France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm eternally gratefully Excavator, it was causing me sleepless nights!

    Like many problems in CSS it is very simple - once someone like you has pointed it out.

    This is the first time I have used this forum and I have to say that I am very impressed. Most problems I will beaver away at untill I find the solution and I suppose that I would eventually found the solution here - but after how long I would not like to guess!


    Thanks again and, if you ever come to France, the wine will be on me.

    à bientôt
    Ponot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •