Beiträge von Käpt'n Blaubär

Käpt'n Blaubär

Zitat von Alphawolf

Naja, ich brauche Code, um mögliche Klassen/IDs auszumachen, durch die man sich zur Beitragstextauszeichnung durchhangeln könnte, um sie in der style.css zu notieren. Kannst mir den Link auch per PN schicken, wenn du nicht öffentlich posten willst.

Du hast eine PN.

Käpt'n Blaubär

Zitat von Alphawolf

Dazu bräuchte man einen Link zu einem Beitrag, damit man sieht, wie der Beitragstext "eingebettet" wird.

Genügt denn nicht auch ein Bildausschnitt? Hier klicken.

Code

<p style="text-align: justify; line-height: 1,7em;">Absatz 1</p>


<p style="text-align: justify; line-height: 1,7em; padding: 8px 0px">Absatz 2</p>


<p style="text-align: justify; line-height: 1,7em; padding: 8px 0px">Absatz 3</p>


<p style="text-align: justify; line-height: 1,7em; padding: 8px 0px">Absatz 4</p>


<p style="text-align: justify; line-height: 1,7em; padding: 8px 0px">Absatz 5</p>

Alles anzeigen

Käpt'n Blaubär

Tolles Design! Ist es von Dir?

Käpt'n Blaubär

Zitat von marX

Übrigens: 1.7 und nicht 1,7. Und Was 1.7? Ostereier? Also entweder % oder em. :wink:

Danke für den Hinweis.

Zitat von Alphawolf
Links und rechts darf natürlich kein Padding/Margin sein, sonst gibt's natürlich einen Einzug. ;)
Also:
Code
<p style="text-align: justify; line-height: 1,7; padding (oder margin): 20px [COLOR=SeaGreen]0px;[/COLOR]">Text</p>

Hat natürlich wie immer geklappt. Danke!

Jetzt müsste ich nur noch wissen, an welcher Stelle des Stylesheets ich die Codes einfüge, damit die gesamte Darstellung (Fließtext- und Absatzabstände) automatisch übernommen wird, wenn ich einen Eintrag veröffentliche. Kann mir da jemand weiterhelfen? Ich möchte keine Fehler im Sheet verursachen.

Code

{
    margin: 0em;
    padding: 0em;
}


a:link,a:visited
{
    color: #000000;
    text-decoration: none;
}


a:hover,a:active
{
    color:#000000;
    text-decoration:underline;
}


h1,h2,h3,h4,h5,h6 
{
    color:#330;
    font-family:Georgia,Verdana,Arial, Serif;
    letter-spacing:1px;    
}
img 
{
    border:#000000 0px solid;
    padding:2px;
}
img.left 
{
    float:left;
    margin:0 1em 1em 0;
}
img.right
{
    float:right;
    margin:0 0em 1em 1em;
}
blockquote {
    margin:1em;
    padding:1em;
    border-left:#999 1px dashed;
    color:#000000;
}
.clear 
{
    clear:both;
}
fieldset 
{
    border:0;
}
#main ol,#main ul 
{
    margin:1em;
    padding:0 2em;
}
#main ul.asides 
{
    margin:0 0 2em 0;
    padding:1em;
    list-style-type:square;
    border-bottom:#eec 1px solid;
}
body
{
    background: #eee url(img/tile.gif);
    color: #333;
    font-size:10px;
    font-family: Verdana,Tahoma, Arial, Serif; 
    font-size: small;
    font-size:0.76em;    
}


#outer
{
    width: 75%;
    margin: 0 auto 2em auto;
    padding: 0;
    border: #ccc 1px solid;    
    background:#fff;
}
#menu
{
    font-family:Tahoma, Verdana, Arial, Serif;
    padding: 1em 0.5em;
    width: 75%;
    margin: 1em auto 0;
    text-align:right;
}


#menu a
{
    color:#300;
    text-decoration: none;
    padding:0.8em 0.5em;    
}


#menu ul
{
    list-style: none;
    padding: 0em;
}


#menu li
{
    display: inline;
    font-size: 1em;
    font-weight: bold;    
}
#menu li a:hover,#menu li a:active,#menu li.current_page_item a
{
    border-bottom: #bc0000 2px solid;
}


#header
{
    margin:0;
    padding:2em;            
}


#header h1
{
    font-size: 2.4em;
    font-weight: normal;
    letter-spacing: 1px;
}
#header h1 a 
{
    color:#300;
}
#header h2
{
    position: relative;
    font-size: 0.9em;    
    font-weight:normal;
    border-style:none;
}
#header #searchform
{
    float:right;
    margin:0;
    padding:0;
}
#feedinfo 
{
    padding:0.5em 2em;
    background:#f9f7f5;
    border-top:#eee 1px solid;
    border-bottom:#eee 1px solid;
    font-size:0.9em;
    margin: 0;
}
#feedinfo em 
{
    float:right;
    font-style:normal;
}
#feedinfo .feed 
{
    background:url(img/icon_feed.gif) no-repeat left center;    
    padding:4px;
    padding-left:17px;
}
#content
{
    margin-top: 1.0em;
    padding: 1.2em;
    line-height: 2.2em;
    position: relative;    
    clear:both;
}
#main
{
    width: 70%;
    float: right;
    position: relative;
    margin:0;
    padding:0 2% 1%;
}


#main p
{
    line-height:1.6em;
    margin-top: 0;
    margin-bottom: 0.5em;


}
#main .post 
{
    margin:0 0 3em 0;
}
#main h2
{
    font-size: 1.7em;
    font-weight:normal;            
}
#main h2.pagetitle
{
    font-size: 1.5em;
    font-weight:normal;
    border-bottom:none;
    margin:0 0 1em 0;
}
#main h2 a
{
    color: #300;
}
#main .post-content 
{
    margin:1em 0;
    padding:0;
}
#main .post-content ul, #main .post-content ol 
{
    margin:1em 2em;
    padding:0;
}
#main p.post-info 
{
    clear:both;
    padding:3px 0;
    margin:1em 0;
    color:#999;    
    font-size:0.9em;        
    border-bottom: solid 1px #999;        
}


#main p.post-info a 
{
    color:#999;
}
#comments, #respond{
    margin: 2em 0 10px 5px;    
    font-size:1.4em;
    font-weight:normal;
}
#commentform 
{
    margin:10px 0;    
    padding:10px;
    background:#f9f7f5;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
}
.commentnum 
{
    font-size:1.5em;
    font-weight:bold;    
    padding:3px;
}
#outer .commentlist {
    margin: 0;
    padding: 0;        
    border-top: #ccc 1px solid;
    list-style:none;
}
.commentlist li 
{
    list-style:none;
    margin: 0;
    padding:1em;    
    border-bottom: #ccc 1px solid;    
}
.commentlist li.alt 
{
    background:#f9f7f5;    
}
.commentlist li .cmtinfo 
{
    font-size:1em;        
}
.commentlist li cite 
{
    font-style:normal;
    font-weight:bold;
}
.commentlist li .cmtinfo em 
{
    float:right;
    margin:0;
    padding:0;
    font-style:normal;
    font-size:0.9em;
    color:#999;
}
#outer .nocomments 
{
    text-align:center;
    color:#999;
    font-size:0.9em;
}
input.textbox
{
    border:#ccc 1px solid;
    background:#f9f9f9;
    font:1em Verdana, Arial, Serif;
    padding:2px;
    width:150px;
}
textarea{
    width: 90%;
    padding:5px;
    height: 20em;
    border: 1px solid #ccc;    
    background:#f9f9f9;
    font:1em Verdana, Arial, Serif;
}
.textbox:focus, textarea:focus
{
    background:#fff;
    border:#999 1px solid;
}
#sidebar
{
    width: 22%;
    float: left;
    position: relative;
    font-size: 0.9em;
    margin:0;
    padding:0 2%;
}


#sidebar p
{
    margin-bottom: 2.0em;
    color: #4F4F2B;    
}


#sidebar h2
{
    border-bottom:#999 1px solid;
    font-size: 1.6em;
    margin-bottom: 1em;
    padding:0;    
    font-weight:normal;    
}


#sidebar ul
{
    list-style: none;
    line-height: 2.0em;
    margin-bottom: 2em;
}
#sidebar form
{
    margin-bottom:2em;    
}
#sidebar input.textbox 
{
    width:80%;
}


#sidebar ul ul ul
{
    list-style: none;
    line-height: 2.0em;
    margin:0;
    padding:0 1em;
}


#footer
{
    padding:0 0 1em 0;
    margin:0 auto;
    font-size: 0.9em;
    clear: both;
    text-align:center;
    line-height:1.6em;
    width:75%;        
}

Alles anzeigen

Käpt'n Blaubär

Zitat von Alphawolf

Um den Abstand der Absätze zu vergößern, einfach mit margin und/oder padding arbeiten.

Das scheint auch nicht optimal zu funktionieren, siehe Bildausschnitt. Der neue Absatz wird eingezogen. Liegt das am Stylesheet?

Code

<p style="text-align: justify; line-height: 1,7; padding (oder margin): 20px">Text</p>

Käpt'n Blaubär

Zitat von Alphawolf
PHP
<p><div style="text-align: justify; line-height: 1,7;">Absatz 1: Text.</div></p>
kannst du auch mit
PHP
<p style="text-align: justify; line-height: 1,7;">Absatz 1: Text.</p>
ersetzen.
Um den Abstand der Absätze zu vergößern, einfach mit margin und/oder padding arbeiten.

Vielen Dank!

Auch möchte ich gerne wissen, wie ich die Codes so ins Stylesheet übernehme, dass nach dem Veröffentlichen eines Eintrages der Text in der eben gewünschten Darstellung erscheint.

Code

{
    margin: 0em;
    padding: 0em;
}


a:link,a:visited
{
    color: #000000;
    text-decoration: none;
}


a:hover,a:active
{
    color:#000000;
    text-decoration:underline;
}


h1,h2,h3,h4,h5,h6 
{
    color:#330;
    font-family:Georgia,Verdana,Arial, Serif;
    letter-spacing:1px;    
}
img 
{
    border:#000000 0px solid;
    padding:2px;
}
img.left 
{
    float:left;
    margin:0 1em 1em 0;
}
img.right
{
    float:right;
    margin:0 0em 1em 1em;
}
blockquote {
    margin:1em;
    padding:1em;
    border-left:#999 1px dashed;
    color:#000000;
}
.clear 
{
    clear:both;
}
fieldset 
{
    border:0;
}
#main ol,#main ul 
{
    margin:1em;
    padding:0 2em;
}
#main ul.asides 
{
    margin:0 0 2em 0;
    padding:1em;
    list-style-type:square;
    border-bottom:#eec 1px solid;
}
body
{
    background: #eee url(img/tile.gif);
    color: #333;
    font-size:10px;
    font-family: Verdana,Tahoma, Arial, Serif; 
    font-size: small;
    font-size:0.76em;    
}


#outer
{
    width: 75%;
    margin: 0 auto 2em auto;
    padding: 0;
    border: #ccc 1px solid;    
    background:#fff;
}
#menu
{
    font-family:Tahoma, Verdana, Arial, Serif;
    padding: 1em 0.5em;
    width: 75%;
    margin: 1em auto 0;
    text-align:right;
}


#menu a
{
    color:#300;
    text-decoration: none;
    padding:0.8em 0.5em;    
}


#menu ul
{
    list-style: none;
    padding: 0em;
}


#menu li
{
    display: inline;
    font-size: 1em;
    font-weight: bold;    
}
#menu li a:hover,#menu li a:active,#menu li.current_page_item a
{
    border-bottom: #bc0000 2px solid;
}


#header
{
    margin:0;
    padding:2em;            
}


#header h1
{
    font-size: 2.4em;
    font-weight: normal;
    letter-spacing: 1px;
}
#header h1 a 
{
    color:#300;
}
#header h2
{
    position: relative;
    font-size: 0.9em;    
    font-weight:normal;
    border-style:none;
}
#header #searchform
{
    float:right;
    margin:0;
    padding:0;
}
#feedinfo 
{
    padding:0.5em 2em;
    background:#f9f7f5;
    border-top:#eee 1px solid;
    border-bottom:#eee 1px solid;
    font-size:0.9em;
    margin: 0;
}
#feedinfo em 
{
    float:right;
    font-style:normal;
}
#feedinfo .feed 
{
    background:url(img/icon_feed.gif) no-repeat left center;    
    padding:4px;
    padding-left:17px;
}
#content
{
    margin-top: 1.0em;
    padding: 1.2em;
    line-height: 2.2em;
    position: relative;    
    clear:both;
}
#main
{
    width: 70%;
    float: right;
    position: relative;
    margin:0;
    padding:0 2% 1%;
}


#main p
{
    line-height:1.6em;
    margin-top: 0;
    margin-bottom: 0.5em;


}
#main .post 
{
    margin:0 0 3em 0;
}
#main h2
{
    font-size: 1.7em;
    font-weight:normal;            
}
#main h2.pagetitle
{
    font-size: 1.5em;
    font-weight:normal;
    border-bottom:none;
    margin:0 0 1em 0;
}
#main h2 a
{
    color: #300;
}
#main .post-content 
{
    margin:1em 0;
    padding:0;
}
#main .post-content ul, #main .post-content ol 
{
    margin:1em 2em;
    padding:0;
}
#main p.post-info 
{
    clear:both;
    padding:3px 0;
    margin:1em 0;
    color:#999;    
    font-size:0.9em;        
    border-bottom: solid 1px #999;        
}


#main p.post-info a 
{
    color:#999;
}
#comments, #respond{
    margin: 2em 0 10px 5px;    
    font-size:1.4em;
    font-weight:normal;
}
#commentform 
{
    margin:10px 0;    
    padding:10px;
    background:#f9f7f5;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
}
.commentnum 
{
    font-size:1.5em;
    font-weight:bold;    
    padding:3px;
}
#outer .commentlist {
    margin: 0;
    padding: 0;        
    border-top: #ccc 1px solid;
    list-style:none;
}
.commentlist li 
{
    list-style:none;
    margin: 0;
    padding:1em;    
    border-bottom: #ccc 1px solid;    
}
.commentlist li.alt 
{
    background:#f9f7f5;    
}
.commentlist li .cmtinfo 
{
    font-size:1em;        
}
.commentlist li cite 
{
    font-style:normal;
    font-weight:bold;
}
.commentlist li .cmtinfo em 
{
    float:right;
    margin:0;
    padding:0;
    font-style:normal;
    font-size:0.9em;
    color:#999;
}
#outer .nocomments 
{
    text-align:center;
    color:#999;
    font-size:0.9em;
}
input.textbox
{
    border:#ccc 1px solid;
    background:#f9f9f9;
    font:1em Verdana, Arial, Serif;
    padding:2px;
    width:150px;
}
textarea{
    width: 90%;
    padding:5px;
    height: 20em;
    border: 1px solid #ccc;    
    background:#f9f9f9;
    font:1em Verdana, Arial, Serif;
}
.textbox:focus, textarea:focus
{
    background:#fff;
    border:#999 1px solid;
}
#sidebar
{
    width: 22%;
    float: left;
    position: relative;
    font-size: 0.9em;
    margin:0;
    padding:0 2%;
}


#sidebar p
{
    margin-bottom: 2.0em;
    color: #4F4F2B;    
}


#sidebar h2
{
    border-bottom:#999 1px solid;
    font-size: 1.6em;
    margin-bottom: 1em;
    padding:0;    
    font-weight:normal;    
}


#sidebar ul
{
    list-style: none;
    line-height: 2.0em;
    margin-bottom: 2em;
}
#sidebar form
{
    margin-bottom:2em;    
}
#sidebar input.textbox 
{
    width:80%;
}


#sidebar ul ul ul
{
    list-style: none;
    line-height: 2.0em;
    margin:0;
    padding:0 1em;
}


#footer
{
    padding:0 0 1em 0;
    margin:0 auto;
    font-size: 0.9em;
    clear: both;
    text-align:center;
    line-height:1.6em;
    width:75%;        
}

Alles anzeigen

Käpt'n Blaubär

Zitat von Syntronica

text-align müsste es heißen, nicht align

Ach, stimmt ja. Danke. Die Kombination funktioniert jetzt ohne Fehler. Nun müsste ich nur noch wissen, wie ich einen neuen Absatz erstelle.

Wenn ich jeden einzelnen Absatz mit einem p-Tag umschließe, erscheint der Absatzabstand zu klein, siehe Bildausschnitt.

Code

<p><div style="text-align: justify; line-height: 1,7;">Absatz 1: Text.</div></p>


<p><div style="text-align: justify; line-height: 1,7;">Absatz 2: Text.</div></p>

Ohne p-Tags im zweiten Absatz erscheint die Darstellung natürlich im Fließtext, siehe Bildausschnitt.

Wie lautet der Code, um den Absatzabstand zu vergrößern?

Käpt'n Blaubär

Die Kombination von Justify und Line-Height funktioniert nicht. Was mache ich falsch? Line-Height funktioniert alleine problemlos.

Code

<div align="justify">Text</div>

Ausgabe: Hier klicken (funktioniert)

Code

<div style="align: justify; line-height: 1,7;">Text</div>

Ausgabe: Hier klicken (funktioniert nicht)

Käpt'n Blaubär

Zitat von Alphawolf

Sieht nach line-height aus. Alternativ an padding- und margin-Werten über 0.

Vielen Dank. Der Line-Height-Code war gefragt.

Eine weitere Frage: Wie hoch ist der gängige Wert, der eine saubere Darstellung anzeigt? 1,5 erscheint mir zu eng, 2,0 ist zu weit. Welchen Wert würdest Du empfehlen? Die Schrift ist elf Pixel groß.

Käpt'n Blaubär

Verringerung des Abstandes

Werte Gemeinschaft

Wie verringere ich den Abstand zwischen dem Fließtext mittels Justify-Code? Zum Verständnis ein Bildausschnitt: Hier klicken.

Code

<div align="justify">Text</div>

Ich bin für jede Hilfe dankbar.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von Käpt'n Blaubär

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

gedingst.de

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes

Verringerung des Absatzabstandes