Keine Absätze

.storycontent p { margin-bottom: 1.4em; }

Gruß Jeriko

Zitat von mlogger

danke Jeriko, das hat geholfen :mrgreen:

Kann mir einer verraten, wo ich das überall einfügen muss? Benutze das chameleon-Theme, da gibt es eine style.css und einige weiterer .css-Dateien, die zu den jeweiligen Farboptionen gehören. In beide .css-Varianten überall da wo "font" dabeisteht?

Mein WP macht nämlich auch keine Absätze, und ich bin es leid, mir mit einem billigen Trick zu helfen. :mrgreen:

Moin,

Zitat von Monika

suche dir in dem style.css mal alles wo font-size steht und gib dort überall

Code

line-height:1.6em;

dazu vielleicht hilft dies schon mal,

line-height ist ein Faktor und ein solcher gehört ohne Maßeinheit notiert.
Man darf dabei auch nicht vergessen das er nur die Zeilenhöhe beeinflußt nicht die Höhe der Box.

Um Abstände zwischen Boxen herzustellen eignet sich margin z.B. viel besser.

Überall da wo font-size steht line-height einzugeben ist imho vollkommen unnötig.

Besser wäre es das z.B. so zu definieren:

body  {
    font:100%/1.4 arial, verdana, sans serif;
}

Die im Beispiel definierte Zeilenhöhe 1.4 vererbt sich nämlich, deshalb muss nur noch abweichendes notiert werden. ;)

Die erste Schriftangabe in der CSS sollte wg. diverser IE-Fehler immer in Prozent sein.
Schreibt man sie in px (wie im Theme) führt das dazu, das sich die Schrift im IE unter Normaleinstellungen nicht mehr skalieren läßt.
Nimmt man em kann es zum Extreme-Font-Size-Bug kommen.

Im Theme ist ja lobenswerterweise ein CSS-Prolog definiert, weshalb alle Abstände erst mal browserübergreifend vereinheitlichend auf null gesetzt wurden.
Danach müssen natürlich alle Abstände neu definiert werden.

Man kann z.B. direkt nach den Definitionen für body einfach:

p  {
   margin-bottom:1em;
}

schreiben, dann muss auch nur noch abweichendes extra definiert werden.

Persönlich habe ich in meiner CSS immer eine ganze Reihe von Standarddefinitionen, die ganz oben unter /*Allgemeine Selektoren*/ stehen und mir das Layouten ernorm erleichtern. ;)

Gruß
koslowski

Um es also für einen Laien verständlich zu machen:

Zitat

.storycontent p { margin-bottom: 1.4em; }

an allen stellen, wo font-size steht einzufügen, bringt nichts?

Stattdessen sollte ich mal versuchen,

Zitat

p {
margin-bottom:1em;
}

direkt unter die Definitionen vom body einfügen und dann überall da, wo font-size steht noch

Zitat

body {
font:100%/1.4 arial, verdana, sans serif;
}

einfügen?

Ich merk das mit den Absätzen auch bei manchen Plugins, wo es mit Sicherheit nicht so sein sollte, dass sich da alles so eng aneinanderkuschelt, dass es schon nicht mehr schön aussieht...

Zitat von Olfri

Um es also für einen Laien verständlich zu machen:

Zitat:
.storycontent p { margin-bottom: 1.4em; }
an allen stellen, wo font-size steht einzufügen, bringt nichts?

Stattdessen sollte ich mal versuchen,
Zitat:
p {
margin-bottom:1em;
}
direkt unter die Definitionen vom body einfügen und dann überall da, wo font-size steht noch

Zitat:
body {
font:100%/1.4 arial, verdana, sans serif;
}
einfügen?

Alles anzeigen

Neiiiin. :wink:

Hör mal, ich will dir ja nicht zu nahe treten, aber könnte es sein das du von CSS so gar keine Ahnung hast?

WP nimmt dir ja eine Menge ab. Es gibt unzählige Themes die du einsetzen kannst und nur noch an deine Bedürfnisse anpassen mußt.
Aber um grundlegende XHTML/CSS- Kenntnisse kommst du imho nicht herum.

Du solltest den Unterschied zwischen Block,- und Inline-Elementen kennen.
Mit Begriffen wie Spezifität, Kaskade solltest du etwas anfangen können, usw., usw..
Lies Little Boxes 1, da werden dir die Grundlagen unterhaltsam nahegebracht. ;)

Okay ich gebe dir noch ein Beispiel wie der Anfang einer CSS-Datei ausschauen könnte:

@charset "utf-8";
/* CSS Document */


/*---------------------------------------------------------------
Stylesheets fuer www.beispiel.de
Datei:    style.css
Version: 1.0
Datum:  12.12.1991
Ersteller: Ich
----------------------------------------------------------------*/


/*###########################################


 INHALTSVERZEICHNIS:
1.Allgemeine Selektoren
2.Allgemeine Hyperlinks
3.Layout allgemein + #startseite
      3.1 #umhang
      3.2 #kopf
      3.3 #navigation
      3.4 #content
      3.5 #fuss
4. Layout Unterseiten  
       4.1 #inhaltsverzeichnis
        usw., usw.               
5.Sonstige Styles
      5.1 Sonstige Klassen


###########################################*/


/*========================================
   1. Allgemeine Selektoren
   ========================================*/
 *  {
    padding:0;
    margin:0;
}
html  {
    height:100%;
}
body  {
      color:#000;
      background:#fff;
      font:100%/1.4 arial, verdana, sans-serif;
}
p, li, dt, dd, input, textarea  {
     font-size:1em;
}
p  {
    margin-bottom:0.5em;
}
li  {
    list-style-type:none;
}
img  {
    border:none;
}
a img  {
    border:none;
}  
h1  {
    font-size:1em;
} 
h2  {
    font-size:2em;
    margin:0.5em 0;
}  
h3 ........
h4 ........
usw.   
 /*========================================
   2. Allgemeine Hyperlinks
   ========================================*/
 a  {
}
a:link  {
    color:#000;
    background-color:#fff;
}
a:visited  {
    color:#000;
    background-color:#fff;
}
a:focus, a:hover  {
    color:#fff;
    background-color:#000;
}
a:active  {
    color:#fff;
    background-color:#000;
}  
  
/*========================================
   3. Layout allgemein # #startseite
   ========================================*/


/*:::::::::::::::::::3.1 #umhang::::::::::::::::::::::::::::::*/ 


/*:::::::::::::::::::3.2 #kopf::::::::::::::::::::::::::::*/


/*:::::::::::::::::::3.3 #navigation::::::::::::::::::::*/


/*:::::::::::::::::::3.4#content::::::::::::::::::::::::*/


/*:::::::::::::::::::3.5 #fuss:::::::::::::::::::::::::::::*/
 
/*========================================
   4. Layout Unterseiten
   ========================================*/
........................
/*========================================
   5. Sonstige Klassen
   ========================================*/
............................

Da es bei WP meistens nur eine allgemeine style.css gibt ist es sehr wichtig das du da Ordnung hast, sonst suchst du dir nen Wolf, wenn du nach einem Jahr was ändern willst.

Die Werte sind natürlich nur beispielhaft, was du da einsetzt bleibt dir überlassen.

Zuerst kommt der CSS-Prolog. Mit dem *-Selektor und den zugehörigen Deklarationen, werden browserübergreifend alle Abstände auf null gesetzt, damit man eine einheitliche Grundlage hat.

100%-Höhe für html definiere ich deshalb, damit das Root-Element (html), das ja auch der Initial Containing Block ist, eine Höhe entsprechend des Viewports bekommt und nicht entsprechend seines Inhalts.

body bekommt Schrift,- und HG-Farbe, Schriftgröße, Zeilenabstand und Schriftarten zugewiesen.

Auf der Website vorkommende Elemente bekommen nochmal die Schriftgröße, diesmal in em (kann jederzeit durch andere Elemente erweitert werden).
p bekommt einen unteren Abstand.

Listenzeichen werden ausgeschaltet.
Default-border für Grafiken werden ausgeschaltet.

Schriftgrößen und Abstände für die Überschriften werden definiert.
Schriftgröße für h1 mag verwirrend sein, aber ich schiebe meistens eine Grafik mit einer schönen Schriftart für h1 über den h1-Text ( Gilder/Levin! ).

Dann kommen die allgemeinen Hyperlinks, dann die allgemeinen Definitionen für die Hauptcontainer auf der Site.
Danach die Definitionen die die Unterseiten betreffen und zum Schluß "Sonstige Klassen".

Die allgemeinen Definitionen vererben sich i.d.R. nach unten, deshalb müssen nur noch Abweichungen notiert werden.

Ist deine CSS-Datei so oder ähnlich strukturiert wirst du auch nach einem Jahr Änderungen rappzapp durchführen können. :)

Gruß
koslowski

:oops:

Du hattest natürlich Recht mit deiner Einschätzung ;)

Vielen vielen Dank für den Anstoss, ich werd mich wirklich mal mit den Grundlagen auseinandersetzen, hab aber die Struktur und was die einzelnen Befehle definieren dank deiner tollen Erklärung durchschaut ;)