Do it yourself: CSS für Profil und Blog

@HelDerStille

Klar zB ungefähr so: (ohne die ***)

<style> #youtube_back {    display: block;    overflow: hidden;    position: fixed;    top: -10vh;    left: -10vw;    right: -10vw;    bottom: -10vh;    width: 120vw;    height:120vh;    z-index: -1;    background: transparent; } </style> <iframe id="youtube_back" name="youtube_back" src="https://you *** tube.com/embed/JyhMXXnPqeU?rel=0&loop=1&playlist=JyhMXXnPqeU&autoplay=1&controls=0&showinfo=0&autohide=1&playsinline=1&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe>

@Sector7

Danke :)

Hallo allerseits

Ich hab da mal wieder eine Frage:


Weiss jemand wie und ob ich verschiedene Paragraphstärken machen kann? P1, P2, P3 oder so oder hat jemand eine andere Idee?


Und zwar würde ich gerne verschiedene, immer wiederkehrende Zeilenabstände auf meiner Seite einfügen.

Das heisst der Titel sollte sagen wir 10 Pixel hoch sein, dann einen Abstand von 4 Pixel, dann ein Text von 8 Pixeln, dann ein Abstand von 6 Pixeln und dann ein Untertitel von 10 Pixeln usw.

Das ganze sollte dann ungefähr so aussehen:

Original anzeigen (0,3 MB)


Ich dachte dabei an sowas hier:

p { line-height: 1.3; } p1 { line-height: 1.5; } p2 { line-height: 1.8; }

Könnte das funktionieren?

@blackmirror

Vermutlich verstehe ich dein Ansinnen zu simpel, aber ansonsten mach das doch einfach so, wie du geschrieben hast:

p {
line-height: 1.3;
}

.p1 {
line-height: 1.5;
}

.p2 {
line-height: 1.8;
}


Und dann:

<p> bla </p>

<p class="p1"> bla </p>

<p class="p2"> bla </p>

@Sector7
Hat geklappt, gäbe vielleicht noch eine einfachere Lösung aber warum einfach wenns auch kompliziert geht :)

Vielen Dank

blackmirror schrieb:gäbe vielleicht noch eine einfachere Lösung

Wenn es eine eindeutige Struktur Gibt, dann mit:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

Und damit jedes 2. P, jedes 3. P, jedes 4. P selektieren

@blackmirror

Ich würde, um die Struktur W3C-Konform zu machen und vor allem um einen besseren Überblick im Code zu bekommen, die Überschriften mit den HTML-Tags h3 und h4 auszeichnen und explizit mit CSS stylen. h1 und h2 gehen auch, aber dann müssen die entsprechenden Allmy-Tags überschrieben werden. Der p-Tag ist eigentlich für Texte und Absätze vorgesehen.

Als Beispiel (HTML-Teil):

<h3>Größere Überschrift</h3>
<p class="my_txt">
Mein Text
</p>

<h4>Kleinere Überschrift</h4>
<p class="my_txt">
Mein Text
</p>


CSS:

h3 {
font-size: 25px;
font-weight: 600;
color: red;
}

h4 {
font-size: 18px;
font-weight: 600;
color: yellow;
}

p.my_txt {
font-size: 16px;
line-hight: 120%;
color: green;
}

Gutes Gelingen ;)

Ich danke euch.

@S_C
@Bishamon
@Sector7


Ich weiss jetzt wie ich es machen möchte, ob das geht ist meine zweite Frage.

Und zwar hätte ich gerne nach wie vor Untertitel und Text in konstantem, fortlaufenden Wechsel. Ich würde einfach nur gerne die Zeilenabstände selbst definieren.

Die dazu passende Frage lautet:

Wie spreche ich den Abstand zwischen Untertitel und vorgehendem und nachfolgendem Text an?


So, dass ich die Absätze immer gleich halten, und einfach beim Untertitel definieren kann, dass er zum Absatz oben 8pt Abstand und nach unten 4pt Abstand lassen soll, bevor der nächste Textblock erscheint.


Also irgendwie sowas:


p {
   font-size: 15pt;
   line-height: 120%;
}

h3 {
   font-size: 15pt;
   Abstand zu vorgehendem Absatz 8pt
   line-height: 100%;
   Abstand zu nachfolgendem Absatz 4pt
}



Und im HTML Teil dann nur


<h3>Titel</h3>
<p>Text</p>
<h3>Titel</h3>
<p>Text</p>
usw.

Wenn ein html-Element eine inline-block-box (display: inline-block) ist, kann vertikaler margin (vertikaler Abstand zu anderen Elementen) verwendet werden.

Block-Boxen (display:block) können das auch, erzeugen aber zusätzlich einen Zeilenumbruch.

Bei inline-Boxen (display:inline) wird vertikaler Abstand ignoriert.

margin-top:9px (oberer Abstand 9px)
margin-bottom:7px (unterer Abstand 7px)

margin-left:auto; margin-right:auto; (horizontal zentriert)

H6 {display:box; margin-top: 5px; margin-bottom:4px;}

@Bishamon

merci, verstehe zwar nicht ganz alles aber hat funktioniert, ...

h5 {line-height:1.2;
margin-top:22pt;
margin-bottom:5pt;
font-size:16pt;
font-family:'Times New Roman';
color:#888888;
font-weight:700;
font-style:normal;
font-variant:normal;
text-decoration:none;
vertical-align:baseline;
white-space:pre-wrap;
}


p {
font-size: 15pt;
line-hight: 1.15;
}

blackmirror schrieb:aber hat funktioniert,

Na dann :)

Yoa, Merci :)

Hallo :)
Kann mir jemand sagen, wie ich diese Angaben auf meinem Profil löschen, oder unsichtbar machen kann?

@Eisprinzessin

Welche?

@S_C
Am liebsten alle. Es sollte am besten nichts zu sehen sein

@Eisprinzessin

<style> .profile_info { display: none !important; } </style>

@S_C
Danke :)

@Eisprinzessin
Kein Problem 👍

@Eisprinzessin
Hiermit kannst du auch die Liste der letzten Profil Besucher ausblenden:

<style> .profile_info, h2, .user_view { display: none !important; } </style>