3 Replies - 887 Views - Last Post: 30 March 2015 - 10:06 PM

#1 celestial   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 30-March 15

Text alignment in html/css layout

Posted 30 March 2015 - 07:56 PM

Hey guys I am doing a web project and have encountered a strange problem. First I have to say I am an amateur and never officially learned web development.

http://celestialspectrum.org/home.html

This is my website (Don't laugh at me it's very basic, just a prototype). It is hosted in Godaddy

The problem started from this page: http://celestialspec...s/18790719.html

Originally the font of the article is Georgia, then I decided to use Verdana, a sans-serif font. So I defined a new style in the .css file, the code is:

 h9{font-size: 14px; font-family: Verdana, Helvetica} 


It worked good at first, as you can see in the attachment. Then I decided to try different text alignment styles, such as justify, center, left. But even after I deleted the "text-align" code in the h9 style, the text is still aligned centrally, as you can see now. and even the webpages/articles that I haven't touched at all changed to central alignment as well, and also the footer is totally messed up.

I don't know what's going on here, why changing a webpage would affect other pages as well, and why the effect remains even after the relevant code is deleted, someone can help?

Thanks for all.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Text alignment in html/css layout

#2 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: Text alignment in html/css layout

Posted 30 March 2015 - 08:42 PM

The text alignment is being inherited from the div. Because nothing is overriding that style, it stays the way it is. If you add the text alignment back to either a p or h9 style rule it will use that rule instead of what it is inheriting from the div rules.

Does that make it more clear?
Was This Post Helpful? 1
  • +
  • -

#3 celestial   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 30-March 15

Re: Text alignment in html/css layout

Posted 30 March 2015 - 09:54 PM

Thanks! I used Inspect Elements tool in Chrome and find out where the problem is. But strangely I don't remember I changed that place. The articles in other pages were aligned to the left correctly and then suddenly all changed to aligned centrally. I still don't understand why but it works!

Still a lot of work to do with the footer

Thanks!

This post has been edited by Dormilich: 30 March 2015 - 11:12 PM

Was This Post Helpful? 0
  • +
  • -

#4 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3151
  • View blog
  • Posts: 11,956
  • Joined: 03-December 12

Re: Text alignment in html/css layout

Posted 30 March 2015 - 10:06 PM

That would be where adding a class to the divs comes in. Then you can style them all together without creating several of the same rules.

The other thing to point out, and I don't know if you care at this point, but the site is not mobile friendly. Since you are using chrome, there is an icon that looks like a phone next to the magnifying glass. Click that and you can emulate how the site works on mobile devices.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1