21 replies [Last post]
foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Hello,

I'm working on a website and I was wondering if it's possible to apply two separate types of leading on 1 paragraph. For example, I have a set leading for my text in my stylesheet. The paragraph consists of bullets.

So when a bulleted line breaks to the next line I want that text to have less leading then the other bulleted lines have. Can anyone give me some info on this one?

Thanks

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

By "leading", are you referring to the indention of the whole paragraph or set of items, or do you mean the spaces between letters? I dont know what specific tag/element you are using, but you may try these (I'm assuming a list):

For a set of items (like a list): li { padding-left: 10px; text-indent: -10px; }

For letter spacing:

li { letter-spacing: 0px; }
li:first-line { letter-spacing: 1px; }

Or maybe you mean the spaces between lines? You could use line-height for that.

li { line-height: 100%; }
li:first-line { line-height: 150%; }

The px and % values above are just examples, you may use your own values. While youre at it, you may specify your own styles for the :first-line pseudoclass.

Hope this helps. Smile

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Line-height was it!

Thanks that helps alot! One more question - Any idea how to remove that extra break that an ordered list adds at the end of the list (through CSS or HTML???)?

Thanks

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

I dont know much about lists and its attributes, but you may set the following:

ul, ol { 
margin-top: 0px; 
margin-bottom: 0px;
} 

I just dont know if there's a simpler way. I'm still discovering what CSS can do. Wink

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Ok - What about just listing lines of text without unordered lists - I'd like to control the indentation and the leading (line space) on certain lines to be different then others. Any tips?

-Foochuck

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Is there a way (through CSS) to control IF a line breaks to have that next line automatically indent?

-Foochuck

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Hi foochuck,
You can have all the text indented with padding or the first line indented with text-indent.
To get all but the first line to indent use a negative value for text-indent.

Hope that helps

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

foochuck wrote:
Ok - What about just listing lines of text without unordered lists - I'd like to control the indentation and the leading (line space) on certain lines to be different then others. Any tips?

The tip of using :first-line is not limited to lists alone. This could also be used on just about any element like DIV or P. Lists was just my example. First-line, however, seems not to work with paddings and margins. So for your next inquiry,

foochuck wrote:
Is there a way (through CSS) to control IF a line breaks to have that next line automatically indent?

Tony is right. You could negative text-indents for this as suggested in my previous reply.
.yourclass { padding-left: 10px; text-indent: -10px; }
Padding-left was added with a positive value of the text-indent so as to have a cleaner layout. And not having negative text-indent messing any existing layout.

Hope this helps. Wink

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

When I use the Line Height option in CSS - it adds space above AND below the line. I'd just like space added above the line...why is it adding space above and below?

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Are we still referring to having a different line-height for the first-line? If so, you don't need the :first-line pseudoclass. If this (additional space above the line) is the effect you wanted, you could just do this:p { padding-top: 12px; }or.yourclass { padding-top: 12px; }
You could specify your own padding value.

I just dont know if you could control how the text is displayed in first-line, but this is usually done using vertical-align.

Hope this helps.

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

What I'm referring to is have my text in an unordered list with bullets.

I want the first line 'line spacing' to be different from bullets that break into more then 1 line.

When I do this - the line spacing for first line works - but when I add line spacing for LI it adds space above and below the bullet line.

And one more thing - I was able to get rid of the indent for the unordered list thats added by default - it works in IE but not netscape. What do I have to change in netscape? Let me know if you need a sample of what I've done.

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Maybe a sample of what you have done and what you intended to do would be fine. But based from what I understand from your reply, you want something like:

ul #myID { margin: 0px; }
#myID li { margin-top: 1.5em; line-height: 1em; }
To use this:
<ul id="myID">
<li>item 1 is a long item.. it breaks somewhere along the way..</li>
<li>this is item 2..</li>
</ul>

Hope this helps.

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Below is the code I'm using for my page. The li line-height attribute adds space above and below the lines. What I'm aiming for is a set of bullets. Any bullets that break to a 2nd line should have less spacing between the frist and 2nd line - but the same amount of space after that 2nd line as all of the other bullets. I can't seem to figure out how to get that.

 ul { margin-left: 0;}
 li { margin-left: 1em;}
 li { line-height: 100%; } 
 li:first-line { line-height: 16pt; }

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Refer to the attached image. Is that what you intend to do? It was achieved using:

css:
ul#myID { 
   margin: 20px;
}

ul#myID li { 
   margin: 5px 0 0 0; 
}

html:
<ul id="myID">
  <li>this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
  </li>
  <li>this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
  </li>
  <li>this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
      this is a test.. this is a test.. this is a test.. this is a test.. 
  </li>
</ul>

If this is not what you intend to do, it woud really help if you provide an image or sample. Wink

--

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Thats exactly what I'm looking for.

One question - why all the zeros in this line of code - margin: 5px 0 0 0; ??? Do they effect different margins?

Also - can I get rid of the spacing above & below the first bullet?

Also I want to run this script from a main.css file. I guess it will still work the same, I'm going to go test it out right now.

And one last request...could you explain what each css line does so if I need to tweak it, I'll know what to tweak.

Thanks!

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Suggestion: You may read more about CSS in the CSS W3School. This is a great help especially if you are starting in CSS. Im kinda new myself. Or get a good book about CSS. It wouldnt hurt to study thru books. Wink

For your question about margins, it is best answered by this link. To summarize, margin: 5px 0 0 0; is the same as

margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

Its just a shorter and easier way if you want to tweak around with the margins. The order presented above is the order they are represented in that one-line equivalent.

What spacing (above & below first bullet) are you referring to? Just play around with the margins and paddings.

For the little explanation,

ul#myID {
   margin: 20px;   
  /* arbitrary value for my sample, this is just to ensure that
      the bullet image is displayed in IE, you may do without this
      and place other definitions here */
}

ul#myID li {
   margin: 5px 0 0 0;
   /* arbitrary value of 5px as the margin-top.  This is just to
       illustrate the effect of setting this value to the desired
       layout that you want.  The other 0's are just my convention
       for easier tweaking of the margins.  You may simply use
       "margin-top: 5px;" instead.  The value of the margin-top
       would ensure that for every instance of li within myID (ul),
       you would have a space between the last entry and the
       new li element */
} 

Hope this helps. Smile

--

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

I'm referring to the space above and below the <ul> </ul tags.

For example - if you use this code 2 times in a row:

<ul id="myID">
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
</ul>

<ul id="myID">
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
<li>this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
this is a test.. this is a test.. this is a test.. this is a test..
</li>
</ul>

Look at the space in between them (the space comes from the end of the first bullet list and the beginning of the second list. Also put a graphic above the first bullet list - theres alot of space between that graphic and the first bullet list that I want to get rid of.

-Foochuck

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Hi foochuck,
Have you tried changing the margin on the UL to 0.

ul#myID { 
   margin: 0; 
} 


Hope that helps.

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Heres what I've got...my CSS file contains:

ul { margin-left: 0; margin: 16px;}
li { margin: 4px 0 0 0;}
.pageSubHeaders { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-style: normal; font-weight: bold; font-variant: normal; color: #000000; text-decoration: none}

next my html is layed out like this:

<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="../css/rodriguez.css" type="text/css">
</head>
<body bgcolor=#FFFFFF leftmargin="0" topmargin="0">
<table width="509" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="149" width="509" valign="top" bordercolor="#000000" class="pageSubHeaders">
<ul>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
</ul>
</td>
</tr>
</table>
<table width="509" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="149" width="509" valign="top" bordercolor="#000000" class="pageSubHeaders">
<ul>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
<li>Here is my test. Here is my test. Here is my test. Here is my test. Here is my test. </li>
</ul>
</td>
</tr>
</table>
</body>
</html>

And lastly is the attachment of how this looks.

Now - the spacing above and below the first and last bullet of each bullet is what I'm trying to get rid of. Everything else is fine. Any ideas?

Thanks!!!

-Chaunce

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

As Tony have suggested, you could do that by specifying the margin values for your ul: ul { margin: 0px 16px;} To explain, this would set a top & bottom margin of 0px and a left & right margin of 16px for your ul. This would eliminate the spaces before and after every ul you define.

Bear in mind that there are several ways of indicating top, right, bottom, left values of any element that has such definitions (e.g. margin, padding). To list,

/* all in one - usually used if you want to define each value separately in one definition */
margin: <top> <right> <bottom> <left>

/* grouped - used if the top & bottom values are the same as well as the left & right values */
margin: <top & bottom> <left & right>

/* individually defined - well, if you want each definition to be defined uniquely in its own line of code */
margin-top: <value>
margin-bottom: <value>
margin-right: <value>
margin-left: <value>

Hope this clarify things for you. Smile

--

foochuck
Offline
Enthusiast
Fort Myers, FL
Last seen: 11 years 37 weeks ago
Fort Myers, FL
Timezone: GMT-5
Joined: 2003-10-15
Posts: 54
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

Thanks for all your help Jagger.

Mission accomplished!

Laughing out loud

-Foochuck

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 12 years 14 weeks ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Text Leading (Line Spacing) - 2 types on 1 paragraph?

no problem... that's what the forum's for... for us to help one another... i'm glad to help out... Wink