Thursday, March 21, 2013

Line Spacing Problem Solving HTML

You might have felt frustrated about too much space between lines of text when using the <h> tags or <p> tag or <ul> or <ol> tags in HTML.
Even if you're using a platform such as Joomla, Silverlight, or Wordpress, the line spacing problem persists—sometimes it gets worse.
I searched for "adjust line space" and "reduce line space" and "control space between lines" in order to get some kind of answer.

After several hours of searching, I compiled an answer that has solved all my layout problems, and I am glad to share it with you.

I had such a hard time finding the answer to this that I actually put up my own page of advice in May of 2012. I got a very positive comment about it about a week later, but I think the more I spread the message of how to solve this pesky problem, the more nice-looking websites I'm going to see.


THE ANSWER TO LINE SPACE CONTROL
Every tag has a default margin, even div. Each of these margins behaves differently in different browsers, but still, this works for probably all.

So in your CSS area or in your in-line "style" attribute, you want to control how much of a margin you have around your tag content.

The most common line spacing problem that I was facing was with the title tag being too far spaced from the p tag.

I solved it this way:
<h1 style="margin-bottom:0px;">My Title</h1>
<p style="margin-top:0px;">My paragraph…</p>

or

<h1 style="margin:0px 0px 0px 0px;">My Title</h1>
<p style="margin:0px 0px 0px 0px;">My paragraph…</p>


When you use the 4-sided margin attribute, the numbers are describing the sides in a clockwise fashion. The first number is for top, then right, bottom, & finally left.

This even works on Wordpress, unless the parameters are overridden in the style.css file, which you can fix in the  "Appearances/Edit" page.

TEXT LINE CRUNCHING
If you are doing some fancy font-family, and the lines are on top of each other, you can override the "line-height" attribute:
<p style"font-family: vivaldi, serif; line-height:100%;">Vivaldi Is Pretty</p>

Another problem I was having was when I had a png or gif file with a drop shadow. It wouldn't look properly aligned because there was invisible area to accomodate the shadow. I learned to work the margin like this to lower the image:
before:   after:

This is what the image tag would look like:
<img src="http://myWebsite/images/myImage.png" style="margin-bottom: -9px;" width="60px" />

A negative value for the margins can come in handy lots of times.

Sometimes your <hr/> tag is too close to your  text or other elements. So you want to make your tag look something like this:
before  <hr/>:

after <hr style="margin:20px 5px 20px 5px;" />:

WELL, THAT'S ALL FOR NOW. SEE YA LAYTAH

Tuesday, February 26, 2013

The Ratio of Website Ranking to Links on a Page

So I really struck paydirt at Wikipedia. There was a probability formula on the page that I will try to translate into English for normal people.
The PageRank formula is based on the idea that your ranking increases when other websites point to you, and the more popular websites pointing to you really increases your ranking value. Kinda reminds me of high school.
The Wiki picture is so cute that I'm including it here.

Here's a Good Point: Ranking is for pages, not for websites.

☞The Google Toolbar PageRank score ranges from 0 to 10. 10 means the most popular pages.
☞Every web page starts (is initialized) at a ranking score of 0.25.
       ✥If the page has links that move to different spots on itself, the ranking stays the same.
       ✥If a single page has a link to another single page, the ranking stays the same.
☞The ranking score is based on a proportion to all the webpages in the world,
       ✥so everybody's score goes down whenever the spiders make a new crawl.
       ✥That's okay, because it affects everybody the same way.
☞The Juice is distributed from a page to the other pages that it links outward to.
       ✥The webpage that gets the incoming linkage gets juice from each of the outbound webpages.
       ✥So, if 3 virgin webpages linked outward to my virgin webpage,
       ✥I would receive 0.25 score points from the score value of each of the outbound pages,
       ✥for a total of 0.75 points.
       ✥If I include the points that my webpage had (0.25), I get a total score of 1 point.
       ✥This does not affect the ranking score of the pages that link to me.
☞If Athene's webpage points to Babs’ and Candy’s webpages,
       ✥then Athene’s value of 0.25 points gets split between the 2 pages.
       ✥So Babs adds her 0.25 to Athene’s 0.125, and so does Candy. They each have 0.375.
       ✥If Arnold points to Athene, Babs, & Candy, then Arnold's 0.25 gets split up 3 ways = 0.083.
       ✥So Athene, Babs, & Candy, each get 0.083 from Arnold’s links.
       ✥Add that to what they already have, and Athene has 0.25 + 0.083 = 0.333,
       ✥but Babs, & Candy each have 0.375 + 0.083 = 0.458.
☞Pages with no outbound links are assumed to link out to all other pages in the website (collection).
       ✥So all the pages in the same website share the outbound points
       ✥from a page that does not link outward.
       ✥If my website has 10 pages, and one of my pages has no links outbound,
       ✥then my 9 other pages will get 0.25 / 9 = 0.0278.

What Does This All Mean?

The Juice from PageRank that my boss was talking about is not leaking out from the outbound links to other websites.
So you shouldn't worry if you have legitimate links going to reference webpages that you have sited as sources for your information.
Also if you are linking outward to other websites that are related to your work, that is also kosher and should not affect your own ranking.
The links that point to you are the ones that help your standing in the browsers, but nothing beats getting lots of people to visit your site. So have all your friends give you multiple visits to raise your click ranking.

Outgoing Links and Website Ranking

Well, my boss at my online marketing & web optimization job told me something really intriguing today, and I felt compelled to research it when I got home.
He said that links going from your website to a different website created an effect like energy leaking away from your website and that it had a deleterious effect on browser rankings.
I went to Google Webmaster Tools to see what they had to say about it, but so far the only thing that seemed to relate to what my boss said was this:
•Keep the links on a given page to a reasonable number.
This was at http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35769 under the heading “"Design and content guidelines"”.
I'm going to research further to see if I can find a deeper explanation. But first, I'm going to install Lynx, which Google recommended as a good test viewer for website design.
These problematic questions have a way of presenting answers in bits and pieces, and I'm confident that I'll eventually put it all together. If you have an experience with link energy drain, I'd love to read about it.