5 replies [Last post]
roboy
roboy's picture
Offline
Regular
United States
Last seen: 7 years 35 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

I have been working off of an HTML5up template called "Read-Only". I liked the design, but I fully admit, its a bit over my head. To begin with, there are some 5 style sheets attached to it.

Anyway, it's a basic two-column layout, but the right column is static.

The left column, which I consider to be the "main area" appears to be centering all content. At least, that's what I though. I have combed through all the css and I did not find any "centering" code.

I would like to right align the content and then pad it to something like 10 px.

Trouble is, I need to locate the existing formating code, and I can't.

There is a body code:

/* Basic */
 
	body {
		background: #fff;
	}
 
	body, input, select, textarea {
		color: #888;
		font-family: "Lato", sans-serif;
		font-size: 16pt;
		font-weight: 400;
		line-height: 1.75em;
	} 

But that does not seem to have anything pertaining to centering or padding.

I also found:

/* Section/Article */
 
	section.special, article.special {
		text-align: center;
	}

But when I changed text align to right, nothing happened.

I also had no luck with a section named "Main".

The url is http://vrocchio.net

I appreciate any help and advice.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi roboy, Try

Hi roboy,
Try text-align:right on .content.

Learn to use the inbuilt browser developer tools of your preferred browser.
It will help you find out what's going on.
Usually right click on the page and choose Inspect Element.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 7 years 35 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

Tony, Can you recommend a

Tony,

Can you recommend a good tutorial on how to use the developer tool? I use it to find errors and its great for that, but I don't know how to use it well enough to troubleshoot things that work but I want to change.

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi roboy, I just learnt from

Hi roboy,
I just learnt from experimentation .
Try searching for "browser developer tools" in google.
Or look at the firebug plugin for firefox.

roboy
roboy's picture
Offline
Regular
United States
Last seen: 7 years 35 weeks ago
United States
Timezone: GMT-4
Joined: 2015-03-23
Posts: 11
Points: 14

Tony, I took your advice and

Tony,

I took your advice and I found what I am looking for, but only sort of. I opened the developer tool in chrome, and even watched a tutorial. I can find exactly what my issue is. It is this code:
.container{margin-left:auto;margin-right:auto;width: 45em}

If, in the tool, I change those values to left: 15% and right: 10% and width: 90% I get exactly what I want. So far so good. Where I am having problems now is using the developer tool to tell me where that css code is. That's when the tool does NOT do what the tutorial will say it does.

So I just looked the hard way and saw that code in a skel.css file and changed it. Only, when I reloaded the page, nothing happened. I went into developer tool and saw that the code is unchanged. I went back on the server, looked at the skel.css file, and saw that my changes were there.

Undaunted I clicked in the upper right hand corner for the style sheet. In the console it takes me to the html header and says it belongs to  style type= text/css .

In the styles window it tell me that this is inherited from  global.html.xlarge

That's where I get totally lost. If, for example I open up xlarge.css file, I don't see any  .container script.

What am I missing? Appreciate your help on this.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 7 years 5 weeks ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

Padding or Centering Problem

Hi, the padding and centering problems are used to margin:0 auto; used it or separate div splitting and width given to % not an px,try it.