Left Align Text Span

5 replies [Last post]

Sun, 2011-12-18 19:38

dpatel512

Offline

Last seen: 1 year 21 weeks ago

newbie

Timezone: GMT-8

Joined: 2011-12-18

Posts: 3

Points: 4

Hello All,

I'm new to this forum and look forward to actively contributing where I can. I've just started learning html/css and am slightly stuck. What I would like to accomplish is left align the <h1> paragraph of text that begins "Prospect Foundation is...".

Any help will be sincerely appreciated.

Thank you.

Screenshot: http://db.tt/dCtvrC8m

Code:

<html>
<head>
<meta name="google-site-verification" content="iO7_UbPYNMNEEDiKN-20EXEOZrX1a24j5MEc-9giwe4" />
<title>Prospect Foundation</title>
<style type="text/css">
	p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 70px;
	font-weight: bold;
	color: #ffffff;
	position: absolute;
    top: 0;
    left: 30px;
    width: 100%; 
	}
 
	p span {
    color: white;
    font: bold 70px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(246, 40, 7, 1);
    padding: 5px;
    }
 
	h1 span {
	color: rgb(0, 0, 0,);
    font: bold 18px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(255, 255, 255); /* fallback color */
    background: rgba(255, 255, 255, 1);
    padding: 1.5px;
    position:relative;
    left:130px;
    top:150px;
    }
 
	h1 {text-align:right}
 
	h2 span {
	color: white;
    font: 15px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(39, 172, 234, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:380px;
    }
 
	h2 {text-align:right}
 
	h3 span {
	color: white;
    font: 15px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(77, 46, 83, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:363px;
    }
 
	h3 {text-align:right}
 
	h4 span {
	color: white;
    font: 15px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(236, 190, 19, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:344px;
    }
 
	h4 {text-align:right}
 
	h5 span {
	color: white;
    font: 15px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(23, 54, 178, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:324px;
    }
 
	h5 {text-align:right}
 
	body {
	background-image:url('/Users/dp/Desktop/bg.jpg');
	background-repeat:repeat-y;
	}
 
</style>
</head>
<body>
 
<p>
 
<span>Tea
<span class='spacer'></span>
<br />
<span class='spacer'></span>
 
<span>is
<span class='spacer'></span>
<br />
<span class='spacer'></span>
 
<span>more
<span class='spacer'></span>
<br />
<span class='spacer'></span>
 
<span>than
<span class='spacer'></span>
<br />
<span class='spacer'></span>
 
<span>a
<span class='spacer'></span>
<br />
<span class='spacer'></span>
 
<span>beverage
 
</p>
 
<div>
<img height="20%" align="right" margin: 5px;" src="/Users/dp/Dropbox/PFound/10577894_55dd.png">
</div>
 
<h1>
 
<span>
Prospect Foundation is a 501(c)3 nonprofit <br>
international development organization that<br>
engages corporate and academic partners<br>
to provide agricultural training and financial<br>
services to tea farmers in need<br>
 
<span class='spacer'></span>
 
</h1>
 
<h2>
 
<span>
info@prospectfoundation.org
<span class='spacer'></span>
 
</h2>
 
<h3>
 
<span>
@prospect_found
<span class='spacer'></span>
 
</h3>
 
<h4>
	<span>
	1 617 320 2607
	<span class='spacer'></span>
</h4>
 
<h5>
	<span>
	fB
	<span class='spacer'></span>
</h5>
 
 
</body>
</html>

Tags:

CSS Styling

Mon, 2011-12-19 00:29

gary.turner

Offline

Last seen: 13 hours 13 min ago

Moderator

Dallas

Timezone: GMT-5

Joined: 2004-06-25

Posts: 8761

Points: 2704

Hi, glad to have you on board

You need to get the markup right before you can effectively debug the css.

To begin, delete all span tags. Then convert all heading tags (h1-6) to p elements. In the styles, lose all position references, and of course the references to headings and spans.

You must have well structured semantic markup to avoid developing a tangled wad of brain-cramping confusion. (See my sig line)

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Mon, 2011-12-19 03:56

dpatel512

Offline

Last seen: 1 year 21 weeks ago

newbie

Timezone: GMT-8

Joined: 2011-12-18

Posts: 3

Points: 4

Cleaning up the markup

Hi Gary,

Thank you for your helpful message. I anticipated having to make some improvements to my markup.

1. I deleted the span tags that I could (while keeping the basic design intact)
2. How can I best convert the heading tags to p elements? Do you think you could show me by using h1 as an example?
3. References to headings and spans--what do you mean here?

Also, don't worry about the left align issue. I've developed a liking for right alignment. Again, thank you very much for your help!

Screenshot: http://dl.dropbox.com/u/1053769/pfound.png

Code:

<html>
<head>
<title>Prospect Foundation</title>
<style type="text/css">
	p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 70px;
	font-weight: bold;
	color: #ffffff;
	position: absolute;
       top: 0;
       left: 30px;
       width: 100%; 
	}
 
	p span {
    color: white;
    font: bold 70px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(246, 40, 7, 1);
    padding: 5px;
    }
 
	h1 span {
	color: rgb(3, 58, 39);
    font: 15px Helvetica, sans-serif;
    letter-spacing: 0.5px;
    background: rgb(255, 255, 255); /* fallback color */
    background: rgba(255, 255, 255, 1);
    padding: 1px;
    position:relative;
    left:130px;
    top:130px;
    }
 
	h1 {text-align:right}
 
	h2 span {
	color: white;
    font: 13px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(27, 103, 107, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:282px;
    }
 
	h2 {text-align:right}
 
	h3 span {
	color: white;
    font: 13px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(81, 149, 72, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:267px;
    }
 
	h3 {text-align:right}
 
	h4 span {
	color: white;
    font: 13px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(136, 196, 37, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:250px;
    }
 
	h4 {text-align:right}
 
	h5 span {
	color: white;
    font: 13px Helvetica, Sans-Serif;
    letter-spacing: 0.5px;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(11, 72, 107, 1);
    padding: 1.5px;
    position:relative;
    left:-20px;
    top:232px;
    }
 
	h5 {text-align:right}
 
	body {
	background-image:url('/Users/dp/Desktop/bg.jpg');
	background-repeat:repeat-y;
	}
 
</style>
</head>
<body>
 
<p>
	<span>Tea<br>is<br>more<br>than<br>a<br>beverage<br></span>
</p>
 
<div>
	<img height="20%" align="right" margin: 5px;" src="/Users/dp/Dropbox/PFound/10577894_55dd.png">
</div>
 
<h1>
<span>
Prospect Foundation is<br> 
a 501(c)3 nonprofit<br>
international development<br>
organization that engages<br>
corporate and academic<br>
partners to provide<br>
agricultural training and<br>
financial services to<br>
tea farmers in need<br>
</span>
</h1>
 
<h2>
	<span>info@prospectfoundation.org</span>
</h2>
 
<h3>
	<span>@prospect_found</span>
</h3>
 
<h4>
	<span>1 617 320 2607</span>
</h4>
 
<h5>
	<span>fB</span>
</h5>
 
</body>
</html>

Mon, 2011-12-19 07:42

gary.turner

Offline

Last seen: 13 hours 13 min ago

Moderator

Dallas

Timezone: GMT-5

Joined: 2004-06-25

Posts: 8761

Points: 2704

Structure and semantics

The point of html + css + scripting is to make each layer as orthogonal to the others as possible. That starts with a good document structure and semantic markup that ignores the presentation layer. After the content is marked up you can begin your style rules, and they may require some markup modification to provide hooks for the css. For example, I went back and added some id tokens and some div elements to provide a grouping for like elements.

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Test document</title>
 
    <style type="text/css">
      body {
        background-color: white;
        color: black;
        font: 100%/1.25 helvetica, arial, sans-serif;
        margin: 0;
        padding: 0;
        }
 
      p {
        font-size: 1em;
        margin: 1.25em 0;
        text-align: right;
        }
 
      p#tag {
        background: url(teapicker.jpg)center no-repeat #efefef;
	color: black;
        float: left;
        font-family: Helvetica, Arial, sans-serif;
	font-size: 70px;
	font-weight: bold;
        height: 670px;
        margin: 0;
        padding-left: 30px;
        padding-top: 67px;
        text-align: left;
        width:1000px;
	}
 
      #tag span {
        background-color: rgb(246, 40, 7);
        background-color: rgba(246, 40, 7, 1);
        color: white;
        letter-spacing: -1px;
        padding: 5px;
        }
 
      h1 {
        font-size: 1.25em;
        }
 
     h1 img {
        display: block;
        }
 
      #wrapper {
        border: 1px dotted gray;   /*for clarity*/
        margin: 0 auto;
        overflow: hidden;
        width: 1250px;
        }
 
      #content {
        overflow: hidden;
        padding: 0 5px;
        }
 
      #social p {
        font-size: .8em;
        margin: 0;
        }
 
    </style>
  </head>
  <body>
    <div id="wrapper">
      <p id="tag"> 
	<span>Tea
	  <br />
	  is
	  <br />
	  more
	  <br />
	  than
	  <br />
	  a
	  <br />
	  beverage</span>
      </p>
 
      <div id="content"> 
	<h1>
	  <img alt="Prospect Foundation [logo]" 
	       src="/Users/dp/Dropbox/PFound/10577894_55dd.png" /></h1>
 
	<p>Prospect Foundation is a 501(c)3 nonprofit international
	  development organization that engages corporate and academic
	  partners to provide agricultural training and financial services to
	  tea farmers in need.</p>
 
	<div id="social">
	  <p>info@prospectfoundation.org</p>
 
	  <p>@prospect_found</p>
 
	  <p>1 617 320 2607</p>
 
	  <p>fB</p>
	</div>
      </div> <!-- end content -->
    </div> <!-- end wrapper -->
  </body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Tue, 2011-12-20 21:12

dpatel512

Offline

Last seen: 1 year 21 weeks ago

newbie

Timezone: GMT-8

Joined: 2011-12-18

Posts: 3

Points: 4

Ah! I see what you mean

Wow that looks MUCH more organized. I really appreciate your help!

Do you recommend any tutorials, books, guides, for beginners such as myself? I looked through the ones that are mentioned in your signature, but they seem a bit advanced.

Thanks again!

Tue, 2011-12-20 21:36

gary.turner

Offline

Last seen: 13 hours 13 min ago

Moderator

Dallas

Timezone: GMT-5

Joined: 2004-06-25

Posts: 8761

Points: 2704

Resources

My little articles do require a good knowledge base, as they are not cookbook recipes, but are more for the purpose of understanding why things do what they do.

Work through the tutorials at htmldog.com in order (alternating as they do from html to css and back) for best results. Griffiths has also written a book I'd recommend, HTML Dog: The Best-Practice Guide to XHTML and CSS. A Kindle version is also available. To be honest, I prefer to hold dead trees over eBooks. :shrug:

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hi, glad to have you on board

Cleaning up the markup

Structure and semantics

Ah! I see what you mean

Resources

User login

Navigation