...

View Full Version : CSS. Alignment



Ponot
02-15-2011, 02:35 PM
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

Excavator
02-15-2011, 02:46 PM
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 -
<!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 (http://www.w3schools.com/css/pr_text_text-align.asp).

Ponot
02-15-2011, 04:59 PM
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_breaks_in_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

Excavator
02-15-2011, 05:08 PM
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 (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).

Adding this bit in red may fix your issue -
#centre_div p.quote {
text-align: center;
color: #008000;
}

Ponot
02-15-2011, 08:28 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum