Zeilenabstand einstellen?! / How to set up line spacing?

[Gino Bonetti]

Hi all,

ufortunately this topic does not seem to be satisfyingly solved, at least I cannot find something useful with the search.

I want to change the standard line spacing for everything that is shown in {CONTENT}.

LINE-HEIGHT Attribute does not show any effect so far. So what can I do?

I would really like to change that. Standard continous-text looks really bad because interline-lead is just not big enough.

Anyone got (new) ideas?

Greets,
Gino


-- Und noch einmal auf Deutsch --

Hallo zusammen,

nach dem zu urteilen, was die Suche ausspuckt, scheint dieses Thema noch nicht wirklich zufriedenstellend gelöst worden zu sein.

Ich möchte dringend den Zeilenabstand ändern, und zwar für alles, was in {CONTENT} angezeigt wird.
Ist das tatsächlich so schwer? Das LINE-HEIGHT Attribut zeigt keinerlei Wirkung, so wie ich es einsetze (soll ja angeblich auch nur bei "Text mit Bild funktionieren").

Es wäre klasse, wenn es dafür irgendeine Lösung gäbe (nicht nur für einzelne Content-Parts), denn der Standard-Fliesstext ist einfach nicht besonders augenfreundlich, der Durchschuss ist viel zu gering.

Weiß jemand was?

Grüße,
Gino.

[spirelli]

The CSS line-height attribute is correct! It should work something like this:

Code: Select all

<style type="text/css">
  p { line-height: 280% }
</style>

If not, you should post your code, or give a link to your site and CSS file.

Also a great forum for these types of questions is http://www.sitepoint.com/forums/

Hope that helps.

[Gino Bonetti]

Okay, I tried the following in frontend.css:

Code: Select all

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 300%;
}

But that does not show any effect at all.

Where would I have to use that code-snippet use posted?

[rushclub]

try to edit this one:

td, th, p, div, span {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px
}

i am not really sure

rush

[Gino Bonetti]

hm..this only changes line spacing in article-summary (="Schlagtext"?)

[Oliver Georgi]

seems you have line-height in use which overrides your body setting.

Best to do is using:

Code: Select all

<div id="mainContent">
{CONTENT}
</div>

then use following in your CSS style definitions at the end of all other definitions!!!!

Code: Select all

#mainContent {
  line-height: 150%;
}

Oliver

[Gino Bonetti]

Thanks Oliver, I used

Code: Select all

<div id="mainContent">
{CONTENT}
</div>

in my template and

Code: Select all

#mainContent {
  line-height: 150%;
}

in frontend.css at the end of all other definitions.

But strange to say, that only affects the line spacing in "Schlagtext". The text in other content parts remained the same. "LINE-HEIGHT" is used nowhere else.

I am now using

Code: Select all

<div style="padding:5px 0px 25px 0px; margin:0;"><span style="line-height: 160%;">{CONTENT}</span></div> 

in my templates.

Looks okay so far (http://www.dennis-blank.de). And seems to work for all content parts. Although I get the feeling that this is some kind of cheating..

Gino.

[Oliver Georgi]

you can not use <span> in this way !!!

Oliver

[nekket]

<SPAN> doesn't create a block elemtent, it's an inline element und due to this, the line-height doesn't make sense.

Just do Oliver's way, it works perfectly in all my web sites...

[Gino Bonetti]

you can not use <span> in this way !!!

Oliver

Okay, be patient with me! As you might guess, I am no professional! Sometimes it is more trial and error to achieve things..

So, I cannot use <span> this way. Then what about:

Code: Select all

<div style="line-height: 160%;">{CONTENT}</div>

Works just the same. Or isn't that allowed as well?!

Just do Oliver's way, it works perfectly in all my web sites...

Hm..as I have already posted above, I tried but that only affected article summary. Or did I miss something?

[Oliver Georgi]

Why you don't use it like this:

Code: Select all

<div id="mainContentSection">
{CONTENT}
</div>

Then create a new entry in your frontend.css - make it the last entry:

Code: Select all

#mainContentSection {
  margin: 0;
  padding:5px 0 25px 0;
  line-height: 160%;
}

/* to define line height for sub tags too */
#mainContentSection p,  
#mainContentSection div,
#mainContentSection td,
#mainContentSection ul,
#mainContentSection h1,
#mainContentSection h2,
#mainContentSection h3,
#mainContentSection h4,
#mainContentSection h5,
#mainContentSection h6,
#mainContentSection form {
  line-height: 160%;
}

Oliver

[Gino Bonetti]

Works just fine now, thanks a lot!