Divi und das CSS box Modell

Divi und das CSS box Modell

Wie muss man die Elemente von Divi in Bezug zum CSS box modell interpretieren?

Divi geht vom cxx-box-Modell aus. Man immer vom Inhaltsbereich ausgehen. Der Inhaltsbereich kann mit einem Rand versehen werden und zu diesem Rand wird mit Padding eine Abstand definiert. Mit margin wiederum wir der Abstand zum nächsten Element (i.d.R. ein div-container) fesstgelegt.

 

Abb.:107_01-eca402a6

 

Mit Divi muss man sich das wie unten dargestellt vorstellen.

Bildschirmfoto vom 2016-05-30 15:18:13

Abb.:2

Wenn jetzt aber nur ein Hintergrundbild dargestellt werden soll. VGL Abbi3

Bibild

Abb.:3

Dann muss dieses in der äußeren blauen Reihe eingefügt werden. Das Bild wiederum soll Hintergrund zum Inhalt sein.

Der Inhalt ist aber eigentlich leer und somit würde das Hintergrundbild auch nicht oder nur unvollständig angezeigt.

Das Problem lässt sich dadurch lösen, dass im Inhaltbereich ein transparentes Bild (als png-format) in der Göße des Hintergrund-Bildes eingefügt wird.

Also das Bild öffnen mit gimp –> neue Ebene –> Bild löschen –> speichern im png-Format

 

Infofenster beim Drüberfahren

Infofenster beim Drüberfahren

css-trick Infofenster beim Drüberfahren

Unter einem „Tooltip“ versteht man einen css-trick in Form eines kleinen Info-Fensters, das sich beim Hovern öffnet und weitergehende Zusatzinformationen enthält. Wenn auch nachfolgend der Begriff „Info-Fenster“ verwendet wird, so sei darauf hingewiesen, dass es sich dabei nicht um ein eigenes Browserfenster, sondern vielmehr um eine „Box“ handelt, die beim Hovern erscheint.
Hier das Beispiel: Beim Drüberfahren soll text erscheinen HalloIch bin ein Tipfenster, wer über mich fährt erhält Informationen.

 

Folgendes wurde in die Style.css eingefügt:

a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}

a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}

und hier der html-Text:

Bei der Klasse a.info werden die Text- und Hintergrundformatierungen für den „normalen“, per Infofenster dann zu erläuternden Text hinterlegt. position:relative; z-index:1; dienen dazu, das spätere Infofenster in Bezug zum Text zu positionieren.
a.info:hover definiert in diesem Fall die Hintergrundfarbe des normalen Textes beim Hovern. Die „z-index-Angabe“ bewirkt, dass sich das spätere Infofenster eine Ebene über dem Ursprungstext einblendet.
„display: none;“ bei a.info span verhindert, dass der hinterlegte Infotext außerhalb des Hover-Zustandes ersichtlich ist.

In a.info:hover span sind schließlich die Angaben für den Tooltip hinterlegt. Man kann ihn absolut zum Text positionieren, indem top- und left- Werte definiert werden. Ferner können hier die üblichen Formatierungsangaben für Breite, Farben, Schrift, Hintergrund und Rahmen eingetragen werden.

Weitere Infos. Man kann natürlich auch Bilder einfügen

Tooltipp mit eingeblendeter Grafik

Anstelle eines erscheinenden Textes kann mann natürlich auch eine Grafik einblenden. Zu diesem Zweck muss man a.info:hover span eine Hintergrundgrafik sowie einen Breiten- und Höhenwert entsprechend dieser Grafik zuweisen.
Als Beispiel hier die modifizierten Angaben, wie in der dritten Demo zu sehen.

a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}

Beiträge mit  vertikaler Randmarkierung versehen

Beiträge mit vertikaler Randmarkierung versehen

Mit CSS vertikale Linien erzeugen

Beiträge mit Randmarkierung versehen. Im Gegensatz zur horizontalen Linie <hr> gibt es bisher kein Element für eine vertikale Linie. Dennoch müssen wir auf Vertikallinien nicht verzichten. Mit ein paar kleinen Kniffen können sie mit CSS erzeugt werden.

Beiträge mit Randmarkierung 

Die Eigenschaft „border“ wird in der Regel für einen allumfassenden Gesamtrahmen genutzt. Man kann damit aber auch gezielt einen einzelnen oberen, rechten, unteren und linken Rahmen oder eine Kombination davon definieren.

Nehmen wir an, es soll ein

Absatz mit einer linken, roten Vertikallinie markiert werden, um auf die Wichtigkeit seines Inhalts hinzuweisen. Dazu brauchen wir lediglich eine CSS-Klasse zu bilden. Wir bezeichnen sie mit .bl als Abkürzung für „border-left“ (selbstverständlich könnt ihr auch andere Bezeichnungen wählen)

.bl

{
padding: 8px;
border-left: 2px solid #f00;
}

HTML-Aufruf mit

<p class=“bl“>
wichtiger Text-Absatz
<p>

Das Ergebnis sieht dann so aus:

wichtiger Text-Absatz erstellt am 14.6.2016

Mit padding verändere ich den Abstand ich den Abstand vom Balken auf 16.
Der Rand soll auf 6px erhöht werden. Die Farbe ist dunkelgrün = 1d4209
in der style definieren wir als .bl1
{
padding: 16px;
border-left: 6px solid #1d4209;
}

Dies ist mit padding 16, border 6px und dunkelgrün:

Hier gibts weitere Informationen

 

Beiträge mit Randmarkierung

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

In den Seitenkopf unterhalb der Menüleiste ein Bild einfügen

Hintergrundbild im Seitenkopf

Unter dem Menü Bild einfügen

Unter dem Menü Bild einfügen ist ganz einfach, wenn man ein wenig css versteht. Geht man nämlich mit der F12-Taste auf die html-Seite und sucht nach dem div Kontainer im header wird man rDas Divi-theme bietet elativ schnell auf  <div id = main header > stossen. In diesen container müssen wir das Bild als Hintergrundbild einfügen. Hierzu in der Style.css folgendes eingeben:

background-image: url(link zum Bild); eingeben. Den „;“ nicht vergessen.

Wie gelangt man aber auf die Style-css. Hierzu gibt es verschiedene Möglichkeiten.

  1. Man geht mit einem ftp-Programm wie z.B. „file-Zilla“ auf den Server und bearbeitet dort die style.css.
  2. Man hat ein Child-Theme angelgt und kann nun direkt auf die style.css im editor gelangen. 
  3. Das Divi theme bietet verschiedene Möglicheiten die style.css zu bearbeiten.

 

 

Zum Newsletter anmelden

Zum Newsletter anmelden

Melden sie sich zum meinem Newsletter an und Sie erhalten ein Geschenk

Sie haben sich erfolgreich angemeldet