• Locked
1 reply [Last post]
Thu, 2012-12-20 09:50
rizzledon
rizzledon's picture
Offline
newbie
Last seen: 9 years 34 weeks ago
Timezone: GMT+10
Joined: 2012-03-15
Posts: 7
Points: 12

I've got 4 lines of text in a class, I'm trying to indent the last couple of lines abit to so they align better with the line reading "Monday: Closed"

I also styled a paragraph class for more control over the leading after the first line..there's probably a better way of doing that :/

Any suggestions?
Thanks

CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.kern {
	text-indent: 5px; }
.trading {
	font-family: Georgia;
	font-size: 14px;
	color: #3e2c1e;
	width: 175px;
	position: relative;
	right: -780px;
	line-height: 20px; }
.space { 
font-size: 8px;
line-height: 0px; }
</style>
</head>

HTML

<body>
<div id="wrapper">
<div class="trading">
<strong>Opening Hours:</strong><br />
<p class="space"></p>
Monday: <i>Closed</i><br />
<span class="kern">Tues-Fri: <i>7.30am-4.30pm</i><br /></span>
Sat-Sun: <i>8am-4pm</i></div>
</div>
</body>
</html>

Top
Tags:
Thu, 2012-12-20 16:49
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Some guess work involved

I think the coding below does what you want. A few things to note:

  • The use of <strong> and <i> is eliminated.
  • Shifting relative positioned elements is full of gotchas; absolute positioning would have better, but float is best in this case.
  • A heading is used instead of a strong text. The <b> would have been more appropriate, as strong implies you're yelling (strong emphasis).
  • The <dl> container is an appropriate list model. The dl is comparable to a hash list in programming; a keyword or phrase plus one or more values.
  • The purpose of html is to mark the elements for what they are, and to convey the document structure.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
      /*<![CDATA[*/
body {
    background-color: white;
    color: black;
    font: 100%/1.5 serif;
    }
 
h1 {
    font-size: 1em;
    }
 
dl {
    overflow: hidden; /*to enclose float descendents*/
    }
 
dt {
    clear: left;
    float: left;
    width: 5em;
    }
 
dd {
    font-style: italic;
    }
 
#wrapper {
    overflow: hidden; /*to enclose float descendents*/
    }
 
.trading {
    float: right;
    font-family: Georgia;
    font-size: 14px;
    color: #3e2c1e;
    width: 175px;
    line-height: 20px; 
    }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="trading">
	<h1>Opening Hours:</h1>	<!-- use the appropriate heading level -->
 
	<dl>
	  <dt>Monday:</dt>
	  <dd>Closed</dd>
	  <dt>Tues-Fri:</dt>
	  <dd>7.30am-4.30pm</dd>
	  <dt>Sat-Sun:</dt>
	  <dd>8am-4pm</dd>
	</dl>
      </div>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked