How to centre content area

HTML & CSS
1

A page I have been working on has a content area that is off-centre. Pls see here.

The off-centredness is most evident in the section after the intro bio, beginning with the title “Lloyd’s Perth Punk Memoirs”. (And yeah, I know the background could do with some work - just experimenting with that at the moment).

I suspected the following lines of code might be responsible for the content not being centered:

@media screen and (min-width: 600px) {
.site-content article {
margin-left: 42px;
margin-left: 3rem;
}

When I commented these lines out, indeed the content became centered. However, some unwanted effects occurred that were unacceptable. ie: the title and header from the home page showed up on all other pages.

So, I guess my question is, does anyone have any suggestions on how to centre the content without causing accompanying unwanted effects? Would be appreciative of any feedback, pls.

Cheers

2

Hi,

I don’t see how changing a margin is going to cause titles and headers to show?

It looks as though you do just need to tweak that left margin and then set box to width auto instead of 90%.

e.g.


.site-content article{margin-left:0}
.box{width:auto}
3

Try this:


@media screen and (min-width: 600px) {
 .site-content article {
  margin: 3em auto;
  border: dotted 3px red; /* DEBUG - to be removed */
 }
4

Hi Paul, and thanks for your response. It wasn’t changing a margin that caused titles and headers to show - it was commenting out those lines of code entirely. Stupidly, I suppose, I didn’t try changing the margins without getting rid of the code - just assumed I was working on the wrong code. I’ll give your suggestions a go and get back.

Cheers

5

Hi John, and thanks a lot for your suggestion - really helpful to have that red dotted line in there to clearly show what’s happening.

I’m glad to report that your coding changes have done the trick! Great! However, now I notice that anywhere I have boxes, they are off-center to the left. eg: Pls see this page.

Do you have any suggestions for remedying this, please? I’m thinking I need to change something on the style sheet where I have the box coding, but not sure what.

Cheers

6

Many thanks,

Try this:



  .box { /* ORIGINAL in style.css */
	float: none;					
   	width: 90%;						
   	padding: 15px;				
   	margin: 10px 10px;
   	min-width: 200px;			
   	border: 3px solid black;
          }
   .box { /* TO MODIFY in style.css */  				
	 margin: 10px auto;
	background-color:#9f9; 
          }

Please also validate your pages because it will reduce future browser conflict problems:

7

Perfect, John! Thanks a lot.

And as it happens, that green background actually looks quite good (I realise you only put it in there as a temporary clarity measure so I could easily follow the alignment change to the box). Not sure I won’t stick with it - although it sorta clashes with the purple header banner, I guess.

And thanks for the link to the validator. Ronpat made me aware of this facility in a previous post, but I haven’t had time yet to study the errors and fix them.

One question, if I may. It seems most of the errors relate to the html within the Wordpress page editor. No line numbers show up in there, and although I can readily identify the problem lines via the quoted phrases in the validator, I can’t always see the html code that needs fixing. Do you have any advice on how to get beneath the bonnet, so to speak? I’ve asked this question before on the WP Support forums and not received a clear answer. Maybe it’s too basic for tech-savvy folk to bother with!

Since I’ve exposed myself as less than well-educated in code matters, I’ve got nothing to lose by asking another question that has been perturbing me. When using the W3 CSS validator, line numbers are given that also do not appear in the WP css stylesheet. How is this best dealt with, do you think? Would I copy and paste the WP stylesheet code contents to some other editor that does display line numbers and do the corrections there, then copy and paste the code back to the WP stylesheet once corrected? If so, do you have a recommendation for an appropriate editor that does display line numbers? Someone recommended Notepad, but I’ve never managed to figure out how to get numbers displaying on that.

Much appreciate your help.

Cheers!

8

Hi, rolanstein,

I have been using a general purpose text editor called EditPad Pro for years. They publish a free version, EditPad Lite, that lacks just a few features such as the spell checker, maybe (I don’t remember). It’s hard to beat the price of “Lite”. If you try it, in the menu bar go to Options and select Line Numbers and they will be visible. http://www.editpadlite.com/

You can also Google for text editors and find quite a few others. Many are more well known. EPP is just the one that I picked several years ago and am very satisfied with. They have an online help forum, if needed.

Best2U

9

Editing:
excellent Sublime 2 Editor which has a free download and constant nag until bought.

Browser:
Firefox

HTML Validater Addon: (unobtrusive, displays green icon on success, click red icon for detailed line-numbered report and helpful suggestions)
http://users.skynet.be/mgueury/mozilla/

I tried Wordpress quite a few years ago, did not like the bloat and never produced a web page. Try posting your questions on the SitePoint CMS Wordpress Forum

10

Hi ronpat - good to hear from ya. Ta for that text editor suggestion. Will check it out. I did try googling, but found the choices all a bit confusing. So glad to have your recommendation.

Best to you, too!

11

Thanks for those tips, John. Will certainly follow them up.

I didn’t know there was a SitePoint CMS Wordpress forum - should have had a better look around. Thanks for alerting me. Will check it out.

Re WP, the new Twenty Twelve theme has had rave reviews from designers using WP as a CMS, and is apparently pretty light. But I can only go on what I’ve read - not experienced or knowledgeable enough to offer a valid assessment to someone like you. I’m enjoying designing this site using Twenty Twelve, though, because it’s forced me to learn a lot more about coding (thanks to generous people like you and ronpat, and some of the WP Support stalwarts). My lawd, it’s a steep, long learning curve, though, when you start with zero knowledge.

I’m curious: what CMS do you use in your designing?

Cheers

12

As mentioned I have very little knowledge or experience of WP but have heard that it is now rather mature, leader in the field and has an abundance of tutorials, videos, themes, plugins, etc.

>>> I’m curious: what CMS do you use in your designing?

About six or seven years ago I was introduced to the CodeIgniter Framework. It does what it “says on the tin” and has a Noobie friendly forum. I have tried other frameworks and keep reverting back to CI

13

I addressed that in my first post and made it match the rest of the content with the margin changes I gave :slight_smile: Not to worry though I see you have been given similar code. (Note: be careful when adding padding to percentage widths as they may end up being larger than the space available.)

14

Sorry, Paul, for not acknowledging you properly. I ended up trying John’s code recommendations first and neglected to come back to yours. I intended to try your code too, but when everything appeared sorted out and looking as I wanted I didn’t think any more about it. I’ll give it a run with the red dotted line John gave me so I can see what’s happening. The more experience I have with this mysterious stuff, the better! Your caution on adding padding to percentage widths noted, too - thanks!

Cheers!

15

Let me toss in a conceptual tidbit about those boxes with percent width and padding/margins…

Ideally, the boxes with percent widths will rest side by side and total no more than 100%, either explicitly or by default, and will not have any horizontal padding or margins applied directly.

IF the content of one or more of those boxes begs to be horizontally padded, THEN one can put another box inside the box with the percent width so that it surrounds the content items. You can then apply padding to that surrounding box without affecting the outer box with the percent width.

Caveat: One must always remember that fixed width objects can “break” percent width boxes if the percent width box tries to become narrower than the fixed width object. :slight_smile:

Edit: One more note…

John showed you how to use a 3px border to visualize how the layout is looking. I’d like to suggest that you use an outline instead. The border adds to the dimensions of the layout, and adds to the width of boxes to which it is applied. An outline does not influence the width of the container to which it is applied (although it can have other minor disadvantages). Therefore, as always, the best device depends on the context and your experience.

Hope this doesn’t muddy things too much. :slight_smile:

16

Everything muddies things for me at this stage, ronpat - but on the other side of that lies gradually developing clarity! So, always grateful for more education - thanks for those extras! Duly copied and pasted to my ever-expanding Word doc containing every tip and recommendation I’ve received since I started on this now marathon re-designing project.

BTW, the original site is www.perthpunk.com and was created back in 2005 using clunky ol’ MS FrontPage…but for all its clunkiness, it truly was WYSIWYG software - didn’t know how easy I had it! Anyway, as you’ll see, the original site is looking very dated these days in terms of design and general appearance, the photos are badly sized and in need of some Photoshopping, and all in all the site was in desperate need of a spruce-up. When it’s done, the end result will be much lighter and more reader-interactive than the prototype. Plus I’ll be a lot more coding-literate than I started out thanks for you and your coding-savvy peers! I’m very mindful of the generosity of you guys in sharing your knowledge so freely.

Not far off finishing the re-design, but then there’s the task of switching the original site to a subdomain for safekeeping/archiving, and the new re-designed site to the perthpunk domain. Not a business I’m looking forward to, as I’ve done it before with another WP CMS site, and know what I’m in for.

Cheers!