Hi,

 

I am looking to improve the testimonial section of a website. The text is currently left to right and covers that section, looking to make 50% width, maybe. I can’t seem to get this done at the moment?

 

Thanks,

 

www[]dianneinglis[]com

I'd do this

 

HTML:

<div class="testimonial">
<em>Evelyn Thomson, Larbert</em>
<p>Not being a big fan of gym workouts, I tentatively joined Dianne’s fitness class 6 years ago and have never regretted it. As well as providing an excellent workout regime, Dianne’s classes are geared to every age group and fitness level with different options of speed and challenge offered. Her sparkling personality and gift of choreography bring an added element of fun in a way that provides a current and modern approach, while her dance training opens avenues that give the participant the opportunity to exercise within classic and international cultures. Classes are suitable for every age group and fitness level, range from zumba and burlesque to Pilates and modern dance, all generously peppered with a liberal sprinkling of laughter!</p>
</div>

CSS:

.testimonial {
width: 50%
margin: 0 auto;
}

.testimonial p {
text-align: center;
}

Then again, I'm no pro... There may be better ways out there! +1 if it helped though!

Edited June 5, 201412 yr by lakey

Thanks Lakey for the help.

Wouldn't it be more semantic to use blockquote/cite?

 

 

<blockquote class="testimonial">
  <cite>Fred Flintstone</cite>
  <p>Yabba dabba dooo!</p>
</blockquote>
 

I agree with bluedreamer, his markup is what you should use.

or simply style the blockquote element itself rather than using a class to target it, unless of course you're going to have many different styles of quotes...

Best to use a class I'd say, you never know if the site will grow in the future and require a differently styled blockquote. The chances of this are low, granted but it could potentially save a headache down the line when you're asked to do some maintenance work. Generally only base styles should be added to element selectors then you can extend on these with the use of classes.

 

On a very small project this is less critical but it's a good standard to follow for all projects

makes sense to me the other way round: styling the tag means you don't hgave to write a class into every blockquote and then if you want to use a differently styled blockquote in addition to the standard one that's been defined then you can write an additional class for the exceptions. no headache at all

using a class is redundant until you might need a different style and then if you do you require 2 or more classes or at least one more class than before

But then when you add a different styled blockquote you will have to add styles to the new one that remove styles from the old blockquote, resulting in messy harder to manage code that is also larger than it needs to be. On large scale project this is not desirable. All styles that are added to an element selector must behave in a predictable manner that is constant throughout the site - generally the kind of things you find in a css reset.

 

Do a bit of research into OOCSS, look up Johnathan Snook, Nicole Sulivan and Harry Roberts. They have worked on huge projects such as Sky Bet, rewriting all of Facebook's CSS they can explain the principles far better than I could, the standards they preach result in easy to manage front ends for large scale projects, but the principles carry over nicely to smaller projects too as it makes them more scalable.

 

The Facebook project resulted in a reduction of more than half of the css as there were so many styles added to reset other styles further up the chain, and then styles to overwrite those styles for other sections and so on, sounds like a nightmare of a codebase!

i have to think how that would apply in this case, not saying that the overall principle is wrong. I've skimmed the surface of OOCSS but must admit i don't really know much about it.

 

in this case i would imagine a mimumum of styling would be needed and therefore a variation of the basic blockquote might be only a simple, small change of rule e.g. a change of colour of a side border to denote a certain type of blockquote for example. seems overkill for a project that isn't going to scale that much - or is it?!

 

i guess the other thing (and i might be confusing myself here) is to use that atomic style of classes (is that the same as OOCSS? can't remember) and have basic 'eements' i.e. styles to build up the appearance of the blockquote e.g. a class of font family, one for font size, one for colour, one for margins, etc.

 

i suspect though if you were using sass you could use some sort of variables and mixins to still stlye the blockquote and then change any modifications for another style of blockquote easily enough.

 

really i'm just thinking out loud and to me it still seems counterintuitive but i'm just saying i haven't followed it through as far as the great minds have yet

 

guess what it comes down to is whether or not this particalur project is now or could become large enough to warrant the approach you're advocating. I could envisage for a site like the OP has that redefining the basic blockquote (like the css reset you mentioned) would be manageble and possibly more semantic. basically they *want* all blockquotes to look the same, at least until next month when they decide they need 5 different sorts and my simple semantic approach has now become potentially messy

It's a very grey area, and constantly find myself toying between the idea of adding a class or just styling the element, usually it's just down to me being a little lazy and wanting to code it faster, but on quite a few occasions when clients have asked for additions to the project my coding style has meant these additions take longer and with each one the code gets that little bit less maintainable. Nicole Sulivan talks about css objects like blocks of lego that are location independant so they can be moved to other parts of the page and still maintain their look.

 

OOCSS is more critical to larger websites than small ones that are never updated. But in general it's good practice to use the OOCSS methods as you never know when a big project will come along and you will have had plenty of practice to get the skillset required to tackle it.

 

And I'm not sure be sementic you meant sementic classes as there is no such thing as a sementic class, just sensible classnames and insensible The sementics lie within the tags that are used, blockquote being sementic use for a large quotation.

Edited June 10, 201412 yr by rbrtsmith