/    Sign up×
Community /Pin to ProfileBookmark

Displaying indented text correctly

Copy linkTweet thisAlerts:
Jul 28.2011

Hi all,

I want to remove as many ‘br’ and ‘strong’ and ’em’ tags as possible from my page, so everything’s pretty much controlled by CSS.

I have a bit of an issue which I hope you can help me with.

[code]
.indent2 { margin-left: 10px; }
.indent3 { margin-left: 20px; }
.indent4 { margin-left: 30px; }

<strong>word1:</strong> word2
<br /><span class=”indent2″><strong>word3:</strong> word4</span>
<br /><span class=”indent3″><strong>word5:</strong> word6</span>
<br /><span class=”indent4″><strong>word7:</strong> word8</span>
<br /><span class=”indent4″><em>word9</em></span>
[/code]

I’ve tried a few ways to compact the code (using h3/h4 tags – (h1 and h2 are used for other headings)) to align it more with CSS but this always causes words 2,4,6,8 to be pushed down a line.

The output [i]should[/i] look like this-ish:

[b]word1:[/b] word2
&nbsp;[b]word3:[/b] word4
&nbsp;&nbsp;[b]word5:[/b] word6
&nbsp;&nbsp;&nbsp;[b]word7:[/b] word8
&nbsp;&nbsp;&nbsp;[i]word9[/i]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Cory_RJul 28.2011 — When using the headings you would need to remove the next line-break and set the headings default margin to '0'.
Copy linkTweet thisAlerts:
@W8_4meauthorJul 29.2011 — So I'd still need to keep the spans but just change the strong's and em to h3 and h4 with margin 0?
Copy linkTweet thisAlerts:
@Cory_RJul 29.2011 — It really depends on what you prefer. If you're wanting to use headings you would set the margin to '0' and remove the next line break. I'm not entirely sure why you're wanting to use headings, however. The STRONG and EM tags can be accomplished with CSS. Your current setup does appear to work for the most part.
Copy linkTweet thisAlerts:
@W8_4meauthorJul 29.2011 — <i>
</i>.indent2 { margin-left: 10px; display: block; }
.indent3 { margin-left: 20px; display: block; }
.indent4 { margin-left: 30px; display: block; }
h3 { font-size: 12px; font-weight: bold; margin: 0px; display: block; }
h4 { font-size: 12px; font-style: italic; font-weight: normal; margin: 0px; display: block; }

&lt;h3&gt;word1:&lt;/h3&gt; word2
&lt;span class="indent2"&gt;&lt;h3&gt;word3:&lt;/h3&gt; word4&lt;/span&gt;
&lt;span class="indent3"&gt;&lt;h3&gt;word5:&lt;/h3&gt; word6&lt;/span&gt;
&lt;span class="indent4"&gt;&lt;h3&gt;word7:&lt;/h3&gt; word8&lt;/span&gt;
&lt;span class="indent4"&gt;&lt;h4&gt;word9&lt;/h4&gt;&lt;/span&gt;


I still get the same problem - words 2,4,6,8 are being pushed down a line! arrggh!
Copy linkTweet thisAlerts:
@Cory_RJul 29.2011 — http://prntscr.com/2glx5

That's what I see in Firefox 5.
Copy linkTweet thisAlerts:
@W8_4meauthorJul 29.2011 — Yes... it's still wrong.
Copy linkTweet thisAlerts:
@Cory_RJul 30.2011 — Change 'block' to 'inline-block'.
×

Success!

Help @W8_4me spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...