HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
How to remove an unwanted line of text?
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
georgex5



Joined: 30 Jan 2008
Posts: 11

PostPosted: Sat Feb 09, 2008 1:14 pm     How to remove an unwanted line of text? Reply with quote

I am still struggling with formatting a play script.

An acceptable modified format would be as follows:

AL: Hello.

BOB: Glad to see you.

(INDENT)AL WALKS TO DESK
(INDENT)AND PICKS UP PHONE.

(the direction requires two lines or more.)

I was able to get pretty close to this using <br> and <p> </p> for most of
the formatting and putting the whole text in a table. I then used css to get an indent. But when I do this, I get:

(INDENT)AL WALKS TO DESK
(UNWANTED EMPTY LINE)
(INDENT)AND PICKS UP PHONE.

=====

I am using

Code:
<style type="text/css">
.one{
text-indent:60px;
font-style:normal;
}
.two{
text-indent:40px;
font-style:normal;
}
</style>

AL: Hello.<br><p> </p>

BOB: Glad to see you.<br><p> </p>


<p class="one">AL walks to desk<p class="one">and picks up the phone<br><p> </p>

THE CSS INSERTS AN EXTRA LINE AFTER DESK AS INDICATED ABOVE.
I'd like to get rid of that extra line.
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8315
Location: Castle Pines North, CO USA

PostPosted: Sat Feb 09, 2008 2:07 pm     Reply with quote



I am not certain where "two" is played out because you used one in your HTML source code. But you can try something like
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 2</title>
<style type="text/css">
.one{
margin: 0px 0px 0px 60px;
font-style:normal;
}
.two{
font-style:normal;
margin: 0px 0px 0px 40px;
}
</style>
</head>

<body>
AL: Hello.<br><br><br>
BOB: Glad to see you.<br> <br><br>
<p class="one">AL walks to desk</p>
<p class="one">and picks up the phone </p>

</body>

</html>
This will make sure that the <p> element has no margins. You can use the <span> element as well - it is inline and does not have any extra space around it.

_________________
Corey
Toll Free Fax Solutions | Mile High Merchant Accounts | Expression Web Blog
sticks464



Joined: 31 Dec 2006
Posts: 1171

PostPosted: Sat Feb 09, 2008 8:15 pm     Reply with quote

You can do it as Cory shows or a little simplier using the <p> defaults
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 2</title>
<style type="text/css">
.one{
margin: 0px 0px 0px 60px;
font-style:normal;
}
.two{
font-style:normal;
margin: 0px 0px 0px 40px;
}
</style>
</head>

<body>
<p>AL: Hello.</p>
<p>BOB: Glad to see you.</p>
<p class="one">AL walks to desk<br>
and picks up the phone </p>

</body>

</html>
georgex5



Joined: 30 Jan 2008
Posts: 11

PostPosted: Tue Feb 12, 2008 9:04 am     Reply with quote

Thanks. Both will work but they both require extra html for the direction text, and some directions run many lines. There was a version of the margin html that produced the same result as a word processor with a ruler line, where the ruler identified the direction area. This would be the preferred html if it is possible.

I put the whole script in a table to control the overall width of the
script. This worked ok with the dialog entries but I could not get it
to handle margins for direction.

Regards, George
madprof



Joined: 26 Jan 2008
Posts: 98

PostPosted: Tue Feb 12, 2008 10:40 am     Reply with quote

This is going to go off topic so forgive me, but... Smile

Not wishing to sound facetious but you're beginning to find out why we use content management systems. Smile
If I was faced with this problem normally and I knew I'd be churning out directions and dialogue lines in great quantity I'd create a tool which allowed me to enter things in quickly and without using any HTML at all, then template it up to do the Right Thing.

This is of no imediate help but really I see no quick fix - you just have to put the stuff in to get the result.

What I'd do if at home - write a text file with no HTML in it. Indent, using tabs, the directions. Then parse it with a little Perl script to put <p> </p> around each line apart from ones starting with a tab which I would put <p class="indent"> </p> around instead. All paragraphs would have margins made zero by default.
You can write something almost as eaily using PHP I am sure.
If this doesn't help at all, sorry. It's just what I'd do.
francky



Joined: 07 Mar 2008
Posts: 1

PostPosted: Fri Mar 07, 2008 6:17 pm     Reply with quote

Hi,
With a variant to sticks464 you can just use <p>...</p> for the spoken texts, and <code>...</code> for the directions. With some css-ing of the <code> element you can miss the extra classes in all direction-lines.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="Content-Language" content="en-us">
   <meta name="keywords" content="...">
   <meta name="Description" content="...">

   <title>Test :: Play Script</title>
   
   <style type="text/css">
      html {
         height: 101% /* to avoid jumping right scrollbar in Firefox */
         }
      body {
         margin: 0;
         padding: 2% 0% 2% 17%;
         font-family: arial, sans-serif;
         font-size: 90%;
         line-height: 130%;
         background: #EBFFEB;
         color: black;
         }
      #wrapper {
         width: 80%;
         padding: 10px;
         background: white;
         color: black;
         }
      p {
         margin: .5em 0;
         padding: 0;
         }
      code {
         margin: .5em 30px;
         padding: .2em;
         display: block;
         font-family: arial, sans-serif;
         font-size: .9em;
         border: 1px solid #C0C0C0;
         font-weight: normal;
         line-height: 130%;
         background: #FAFAFA;
         color: black;
      }
   </style>

</head>

<body>

<div id="wrapper">

<h1>Scene 5</h1>

<code>BOB coming in<br>
while phone is ringing.</code>

<p>AL: Hello.</p>

<p>BOB: Glad to see you, alligator.</p>

<code>AL walks to desk<br>
and picks up phone.</code>

<p>AL: Hello?</p>

<code>Long silence.<br>
AL gestures &quot;can't help&quot;,<br>
BOB walks to the window</code>

<p>AL: Yes, but I'm not alone. - No, it's a he...</p>

<code>BOB turns around, smiling.</code>

<p>AL: Yes, call you back soon!</p>

<code>Phone goes down.</code>

<p>BOB: Aha! Girlfriend?</p>

<code>Knocking on the door. Lots of things are happening. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.
</code>

<p>AL: I'll tell you the story. Listen...<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vel urna vel nulla molestie pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>
Cras convallis, diam a congue tincidunt, mauris est fringilla turpis, quis gravida nunc dui id libero. Vivamus dapibus felis non urna ornare egestas.
</p>

<p>BOB: That's a story!</p>

</div>

</body>
</html>


You can see this one working over here.

For faster working, you can write everything in paragraph elements first (with <br>'s when needed).

Now in most (free) WYSIWYG html-editors you can easily format text with <h1>, <h2>, ... <p> and <pre> (=preformat), but the <code> format isn't there in a quick way.

No worry! Then you format all directions with <pre>...</pre>, and when finished you go to the Code View. There you can do Edit HTML > Search and replace: replace all words "pre>" in the word "code>". *) Then all <pre>'s are now <code>'s and all </pre>'s are </code>'s.
Ready in 1.5 sec.! Smile

Success and greetings,
francky

*) With the end tag ">"in the search you avoid to change all words in the text with "pre" in it (so you don't have to see and approve each replacement by hand).
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial