Jump to content

Indenting the first line


egbertz
 Share

Recommended Posts

Indenting the first line of a block of text is easy. Simply add "text-indent:..px;" to the css-style for that block and you're done.But what if the next paragraph is not a block, but just a paragraph following a line break inside that block? I often use line breaks inside a block for technical reasons, for instance when images are involved. I've tried to accomplish it by creating an extra class, containing the same style commands as the stylesheet for the block itself, using <span class="indent1stline">Text of the paragraph.</span> to implement it in my html-document. Well, it surely did indent the first line but in some aspects the paragraphs did no longer behave as expected. To mention something: as soon as the spanned text should float around an image, it did not do so but kept its smaller width which it had alongside that picture.Another method is using a number of non-breaking spaces, but this is not supported by all browsers. Am I right?Thanks in advance for your help.Egbert

Link to comment
Share on other sites

what if the next paragraph is not a block, but just a paragraph following a line break inside that block? I often use line breaks inside a block for technical reasons, for instance when images are involved.
You mean something like:<p>This is some text in a paragraph.<br /><img src='image.jpg' alt='image' /><br />This is another paragraph.</p>It would probably be better to do something like this:<p>This is some text in a paragraph.</p><img src='image.jpg' alt='image' /><p>This is another paragraph.</p>You can still control the positioning of the image and flow the text around it, perhaps even better. Edited by ShadowMage
Link to comment
Share on other sites

(...)<p>This is some text in a paragraph.</p><img src='image.jpg' alt='image' /><p>This is another paragraph.</p>You can still control the positioning of the image and flow the text around it, perhaps even better.
Maybe I did myself make not clear enough. After all, English is not my mother's tongue. To begin with your last example: if one paragraph of text appears to be higher than the image your approach would be okay, but in in most situations this is not the case. A block of text, let's say a <div>, mostly contains 3 or even 4 paragraphs in order to host the image properly. This is the idea:<div class="textblock">This is the first paragraph, correctly indented.<br/><div class="imgcontainer"><img src="image" style="width:...px;float:left" alt="image" />This is the caption text, which is inside a <div> in a <div>.</div> <span class="indent_1st_line">This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image.</span><br/><span class="indent_1st_line">This is the third paragraph. Same as the second.</span><br/><span class="indent_1st_line">This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. But is does not as said in my first message.</span></div>And no, I do not want to use <p>text</p> here, because that causes a white line between the paragraphs, which I do not want. It's either a white line (what I'm using now at http://www.damsterkraant.nl/damsterkoren.html (sorry, it's a Dutch site) or - preferrably - indented paragraphs, WITHOUT white lines in between.Thanks again
Link to comment
Share on other sites

You should use a <p> element for paragraphs. To remove the white lines, just set margin to zero on the p elements. You shouldn't use different elements for presentation, you should use the appropriate elements and then use CSS to change their presentation.To indent the first line of a paragraph, use text-indent. To indent the whole paragraph, use margin-left or padding-left.

Link to comment
Share on other sites

To begin with your last example: if one paragraph of text appears to be higher than the image your approach would be okay, but in in most situations this is not the case. A block of text, let's say a <div>, mostly contains 3 or even 4 paragraphs in order to host the image properly. This is the idea:<div class="textblock">This is the first paragraph, correctly indented.<br/><div class="imgcontainer"><img src="image" style="width:...px;float:left" alt="image" />This is the caption text, which is inside a <div> in a <div>.</div> <span class="indent_1st_line">This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image.</span><br/><span class="indent_1st_line">This is the third paragraph. Same as the second.</span><br/><span class="indent_1st_line">This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. But is does not as said in my first message.</span></div>And no, I do not want to use <p>text</p> here, because that causes a white line between the paragraphs, which I do not want. It's either a white line (what I'm using now at http://www.damsterkraant.nl/damsterkoren.html (sorry, it's a Dutch site) or - preferrably - indented paragraphs, WITHOUT white lines in between.
All of that can be accomplished using my second example. Like Ingolme said, you can set margins to 0 on the p tags to remove the space above/below them. Here's the general idea:
<div><p>This is the first paragraph, correctly indented.</p><div class="imgcontainer" style='width: --px; float: left;'><img src="image" alt="image" />This is the caption text, which is inside a div in a div.</div>  <p>This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image</p><p>This is the third paragraph. Same as the second.</p><p>This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. and now it should do just that.</p></div>

...and CSS:p {text-indent: --px;margin: 0px;}Notice I moved the float and width declaration from the img to the container div. This will float the div, which will allow other elements to flow around it.

Edited by ShadowMage
Link to comment
Share on other sites

You should use a <p> element for paragraphs. To remove the white lines, just set margin to zero on the p elements. You shouldn't use different elements for presentation, you should use the appropriate elements and then use CSS to change their presentation.(...)
Thanks! I didn't try it yet (will do it asap) but I feel this is the correct approach.One final question. Between the blocks of text, containing the paragraphs, should be white lines. So is the following the correct approach?<div class="block"><p>First paragraph.</p><div class = "imgcontainer"><img.... />Caption and/or text describing the image.</div><p>Second paragraph</p><p>Third paragraph</p><p>Fourth paragraph</p></div>Regards,Egbert
Link to comment
Share on other sites

One final question. Between the blocks of text, containing the paragraphs, should be white lines. So is the following the correct approach?
Yes, that is correct. See my example above.As previously stated, you can remove those white lines using margin: 0px; on the p elements.
Link to comment
Share on other sites

All of that can be accomplished using my second example. Like Ingolme said, you can set margins to 0 on the p tags to remove the space above/below them. Here's the general idea:
<div><p>This is the first paragraph, correctly indented.</p><div class="imgcontainer" style='width: --px; float: left;'><img src="image" alt="image" />This is the caption text, which is inside a div in a div.</div>  <p>This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image</p><p>This is the third paragraph. Same as the second.</p><p>This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. and now it should do just that.</p></div>

...and CSS:p {text-indent: --px;margin: 0px;}Notice I moved the float and width declaration from the img to the container div. This will float the div, which will allow other elements to flow around it.

Thanks to you too! As I see it now, the container (<div>) does not need a CSS declaration, because the paragraphs (<p>) are correctly styled?I'm going tot work on it right now.Regards,Egbert
Link to comment
Share on other sites

As I see it now, the container (<div>) does not need a CSS declaration, because the paragraphs (<p>) are correctly styled?
Correct. Unless you want to apply specific styles to that div, but its main purpose it just a container for your text/images.
Link to comment
Share on other sites

Maybe I did myself make not clear enough. After all, English is not my mother's tongue. To begin with your last example: if one paragraph of text appears to be higher than the image your approach would be okay, but in in most situations this is not the case. A block of text, let's say a <div>, mostly contains 3 or even 4 paragraphs in order to host the image properly. This is the idea:<div class="textblock">This is the first paragraph, correctly indented.<br/><div class="imgcontainer"><img src="image" style="width:...px;float:left" alt="image" />This is the caption text, which is inside a <div> in a <div>.</div> <span class="indent_1st_line">This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image.</span><br/><span class="indent_1st_line">This is the third paragraph. Same as the second.</span><br/><span class="indent_1st_line">This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. But is does not as said in my first message.</span></div>And no, I do not want to use <p>text</p> here, because that causes a white line between the paragraphs, which I do not want. It's either a white line (what I'm using now at http://www.damsterkraant.nl/damsterkoren.html (sorry, it's a Dutch site) or - preferrably - indented paragraphs, WITHOUT white lines in between.Thanks again
You should still use<p> to format your paragraphs. I suspect the reason your SPAN approach is not working 100% is that SPAN in an INLINE element to which you want to assign BLOCK values.Just define a style for all the <P> inside TEXTBLOCK:
.textblock p  {  margin-top:-1em;  }

This means that each P within textblock will have no whitespace above. Using -1em should scale correctly regardless of the current font size. The CSS experts in this forum may advise another unit is better but 1em works for me. If this approach is not suitable, just define a special P like

p.nospace  {  margin-top:-1em;  }

hope this helps.........

Link to comment
Share on other sites

Sorry folks, but none of the above given examples does the trick. When I create <p>-paragraps inside the <div>, the last one that should flow around the image-container, goes straight down, keeping its initial smaller width.So I think, I must use a little image, in the shape of a white rectangle with appropriate dimensions. This is the idea:

<div class="block"><div class="imgcontainer"><img.../>Image caption</div>First paragraph.<br/><img src="whitespace" alt="text-indenter">Text of second paragraph.<br/><img src="whitespace" alt="text-indenter">Text of third paragraph.<br/><img src="whitespace" alt="text-indenter">Text of 4th paragraph.</div>

It's bedtime in The Netherlands, so tomorrow I'll let you know if this works.Best regards,Egbert

Link to comment
Share on other sites

So I think, I must use a little image, in the shape of a white rectangle with appropriate dimensions. This is the idea:
No, no, no! That's a bad idea.
When I create <p>-paragraps inside the <div>, the last one that should flow around the image-container, goes straight down, keeping its initial smaller width.
Can you post the code that produced this result? HTML and CSS
Link to comment
Share on other sites

No, no, no! That's a bad idea.Can you post the code that produced this result? HTML and CSS
Why should that be a bad solution? I tried it and it appears to work in IE7. Tomorrow I'll check the other important browsers (FF, Chrome & Safari).I cannot post the code for 2 reasons. The first one is that I destroyed it already :) . The second reason is that I had to post here an entire html-page in Dutch, which will please nobody, I think.As said in my previous message, it's bedtime here (00:11 aka 12:11 AM) but tomorrow I will create and upload a smaller page in English (containing just enough stuff to show what went wrong) and post its URL here.Egbert
Link to comment
Share on other sites

I might have got this totally wrong, BUT! do you mean something like this.

<style type="text/css">.textblock { width: 800px;}.textblock p{ margin:0; text-indent: 20px;}.textblock p:first-letter{ font-weight:bold; font-size:18px;}.imgcontainer{width: 296px; float: left;margin:10px; border: 1px solid #000;}.imgcontainer p{margin:0 8px; }</style>

<div class="textblock"><p>This is the first paragraph, correctly indented. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor ut enim ad minim veniam, consectetur adipisicing elit. Cupidatat non proident, sed do eiusmod tempor incididunt ullamco laboris nisi.</p><div class="imgcontainer"><img src="../images/myimage.jpg" alt="image" /><p>This is the caption text, which is inside a div in a div. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor ut enim ad minim veniam, consectetur adipisicing elit.</p></div>  <p>This is the second paragraph, correctly idented too, because its stylesheet is a copy of the texblock-style. It starts in the empty space right from the image. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor ut enim ad minim veniam, consectetur adipisicing elit. Cupidatat non proident, sed do eiusmod tempor incididunt ullamco laboris nisi. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p><p>This is the third paragraph. Same as the second. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor ut enim ad minim veniam, consectetur adipisicing elit. Cupidatat non proident, sed do eiusmod tempor incididunt ullamco laboris nisi. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p><p>This is the last par. of the block. Same story as above, except: as soon as it bypasses the bottom of the image it should flow underneath the fotocontainer. and now it should do just that. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor ut enim ad minim veniam, consectetur adipisicing elit. Cupidatat non proident, sed do eiusmod tempor incididunt ullamco laboris nisi. Quis nostrud exercitation velit esse cillum dolore eu fugiat nulla pariatur. In reprehenderit in voluptate sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p></div>

Link to comment
Share on other sites

Thank you very much, dsonesuk! Your approach works :) . At this moment and to be honest, I do not exactly understand the differences between yours and the other given examples. That insight will come later, I hope.So far I tested it locally. Later today I will really implement it on my site.You all will understand that creating a shorter English version of a not working HTML-document is no longer nessecary at this stage.I thank everyone very very much for his/her help.Kind regards,Egbert

Link to comment
Share on other sites

Why should that be a bad solution?
Because it's using elements in a way they are not supposed to be used. In terms of semantics, it's a bad solution. There may also be other repercussions, but I can't really think of anything right now.
Link to comment
Share on other sites

<style type="text/css">.textblock { width: 800px;}.textblock p{ margin:0; text-indent: 20px;}.textblock p:first-letter{ font-weight:bold; font-size:18px;}.imgcontainer{width: 296px; float: left;margin:10px; border: 1px solid #000;}.imgcontainer p{margin:0 8px; }</style>

[/quote]excellent example.  I was about to do something similar....one point about the "p:first-letter".  Would it not be better to use font-size of 120% or perhaps 1.2em?  That way the first letter would be relative to the size of the text around it . . . especially if the user is using a large base-font?also agree about using blank images as spacers.  That is the trick we adopted before CSS.  Now we can just add margins or padding where we need them.  For example if I want more border at the top of the image I can use[code].imgcontainer{width: 296px; float: left;border: 1px solid #000;	 margin:  50px 10px 10px 10px;}

..Guy

Link to comment
Share on other sites

Because it's using elements in a way they are not supposed to be used. In terms of semantics, it's a bad solution. There may also be other repercussions, but I can't really think of anything right now.
an extra HTTP request for the image
Link to comment
Share on other sites

Confusion for non-rendering clients (e.g. screen readers). Highly inflexible. Extra markup.P.S.: you should test in IE last, because IE has the most quirks.

Link to comment
Share on other sites

A few days ago I promised to upload my style edits, as far as they fit in this discussion. But let me begin with a brief explanation. What I initially called a textblock, is in Dutch a 'paragraaf' (paragraph). I found out that a good English word for this might be 'section'. Therefore I now name it a 'section' class instead of a 'textblock' class. (Only in this example, just for readability reasons. On my site I always try to give the style-classes Dutch names). In HTML the P-tag stands for paragraph, which is 'alinea' in Dutch. As you see here, my entire document has a gray background. Centered on it is the 780 pixels wide body layer (including 2 x 10 pixels for padding left and right as white margins), created by a blank image. This fits exactly on a 800 pixels wide screen, including a right scrollbar. Maybe I should write pages for 1026 pixels nowadays, but my articles really do fit so neat in the actual lay-out. Besides, I'm far too lazy to start with it.Furthermore, a section (or textblock) does no langer have a 12 px bottom margin, which would create in total 24 pixels space between 2 blocks. Twelve is enough, being exactly the heigt of a blank line. Is it wise to do it this way (top 12 px) or should I divide it into a 6 px top-margin and a 6 px bottom-margin?Finally, as it appears, I was not aware of the possibility to create classes in this form: .classname html-tag, e.g. .section p { } . Is this exacly the same as writing <p class="section"> in your HTML-document?I want, again, thank you all for your contributions, especially DSONESUK who provided this working approach:

html {   background: #808080 url("images/achter.bmp") repeat-y top center; }body {  margin:0px auto;  width: 760px;    padding-left: 10px;  padding-right: 10px;  font-family: Verdana, Arial, Tahoma, sans-serif;  text-align: justify;}.section {   margin-top:12px;  margin-bottom:0px;  font-size:12px;  float:left;}.section p {   margin:0;   text-indent:12px;}.imgcontainer_left {  width:495px;  margin-top:4px;  margin-right:10px;  padding-bottom:4px;  border-bottom:1px solid #000000;  border-right:1px solid #000000;  float:left;}.imgcontainer_left p {  margin:0;  font-size:10px;  font-weight:bold;  text-align:center;  text-indent:0;}

Regards,Egbert

Link to comment
Share on other sites

Furthermore, a section (or textblock) does no langer have a 12 px bottom margin, which would create in total 24 pixels space between 2 blocks. Twelve is enough, being exactly the heigt of a blank line. Is it wise to do it this way (top 12 px) or should I divide it into a 6 px top-margin and a 6 px bottom-margin?
I think if you split it up you will only have 6px margin due to collapsing margins. I personally would recommend using margin-bottom because (for me at least) it seems to provide more consistent results.
Finally, as it appears, I was not aware of the possibility to create classes in this form: .classname html-tag, e.g. .section p { } . Is this exacly the same as writing <p class="section"> in your HTML-document?
No they are not the same..section targets any element with a class of 'section'ex.<div class='section'><p class='section'><span class='section'>.section p targets any p element within any element with a class of 'section'ex.<div class='section'><p></p></div>See the W3C selectors page for a list of possible selectors. Edited by ShadowMage
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...