The Haze of the DIVs
Up here, the picture has a DIV (pull left)! And Markdown-Syntax inside. Misfunction of the editor.
I'm so tired, I haven't slept a wink. So tired, my mind is on the blink. Now, my nice assistant Betty One has to explain you all the haze happens with the DIVs. I am available as Afrog day and night but sometimes I fall into sleep. Preferential from autumn to spring. Do you see all this urgly code around my nice picture? Only one of the symptoms of all the symptoms around and with the DIVs. But I'm tired of croaking. It's your turn, Betty One…
Alignments are done by the use of a DIV-Container and an additional class attribute:
<div class="pull-left">picture–adress or text, etc.…</div>
Cool down all you „rulers of the code“, only this attribute is allowed and the pull right. There are no more known classes or attributes. Same in HTML. Basics are allowed, only! Yes, we have a lot of potential, but poor tools. It is Beta on the Steem. Around these DIVs no Markdown works. That's fact. No Markdown like
[Text](https://" adress…")
is possible if there rules a DIV beside. You have to write in HTML–syntax<a href="https://adress…and.com">picture or text here</a> Normally we use []() for Links.
It is a real HTML URL (link), the A–statement. No aditional attributes of the A–Tag are allowed.
Headlines doesn't work beside a DIV? I know. Incredible. No #
for the first class header, ##
and so on until ######
. Okay, we know it doesn't work beside the DIV so we have to take HTML.
Markdown | Description | HTML |
---|---|---|
# | Headline 1. Class | <h1>I am Headline 1</h1> |
## | Headline 1. Class | <h2>I am Headline 2</h2> |
### | Headline 1. Class | <h3>I am Headline 3</h3> |
#### | Headline 1. Class | <h4>I am Headline 4</h4> |
##### | Headline 1. Class | <h5>I am Headline 5</h5> |
###### | Headline 1. Class | <h6>I am Headline 6</h6> |
No difference between header Nr. 4 to Nr. 6. That's poor too. And here are the other secrets:
To make a picture into a DIV–Container without fragments of code around:
<img src="https://adress of the picture.jpg" />
The blank and slash at the end of the IMG–Tag is needed, because there is a HTML–Tags without closing statement (because there is no
</img>
in the Syntax of IMG–tag).
To center parts of text or pictures always works by doing this:
<center> Now center me! </center>
To change text to bold
<strong> Now bold me up!</strong>
Here you are. These are the secret basics for sophisticated layouts at the moment in the Beta–phase. Steem on and mine your STEEM!
ich versuche mir das mal zu merken!!
Ja, leider muss man sich das drauf schaffen, wenn man virtuos posten möchte, Steemit ist kein Kinderspiel.
ich bin ja froh das ich Leute wir dich kenne die mir den Nebel des HTML etwas wegzaubern
Danke @homeartpictures. Da gibt es bei mir auch noch einigen Nebel.
Da habe ich noch keine Lösung gefunden. Allerdings danach auch noch nicht gesucht. Man vermeidet so etwas halt an diesen Stellen. Was aber nicht Sinn der Sache ist…
Mit div geht es so:
Einfach den blockquote in das div integrieren, das geht. Hier ein div container mit pull-right.
Das steht links >und das steht rechts<div class="left">Das steht links > und das steht rechts<div>
So geht es auch nicht:
<div class="left">Das steht links > und das steht rechts<div>
Wie hast Du das gemacht, @schamangerbert? Einfach scheint es nicht zu sein.
Nimm einfach anstatt "left" "pull-left"
< div class="pull-left">< blockquote>Text< /blockquote>< /div>
Nimm die Leerzeichen raus und versuche es.
Der div container steht dann links, der andere Text ohne div steht dann rechts.
mit sowas setzt man die Zutatenliste beim Food post etwas nach inne.....lol***
Finde die Lösung, wenn ein DIV im Spiel ist!
was ist ein DIV???
http://www.steemstyle.com/
Thank you for the link @mars9. What do you do in the editor of comments? Do you have a menue there, too? No. What to do, when you use to write in the Markdown–editor without menue? All the help–files of Steemit are incomplete.
I know that .... This post from you is very cool .... it will help a lot .... just help just put the link .... apologize if this behavior is not good .... but i just use this link ... Now I will keep this post in the browser ... until it is reset
Thank's a lot Mars!
it's my pleasure
nice post @afrog
Thank you @silvia. It's written to whom it concerns.
Schön dass Du fragst, @homeartpictures. Ein DIV ist ein HTML–Container, der etwa zur Jahrtausendwende im HTML eingeführt wurde . Im Prinzip hat ein DIV–Tag selbst gar keine spezifische Funktion. Er löst einen Zeilensprung aus, mehr nicht. Seine wichtigste Funktion ist es Content–Bereiche einzuschließen, die dann mittles spezifischer Attribute des DIV–Tags formatiert werden. Im Falle unseres Editors bekommt der DIV eine Klasse zugeordnet, die ihn links- oder rechtsbündig im Verhältnis zum umgebenden Inhalt setzt.
DIVs kamen im Zuge der Einführung von Stylesheets (CSS) zum HTML hinzu und haben diesem eine völlig neue Dimension der Browser–Formatierung eröffnet. Hier zur Veranschaulichung noch einmal ein DIV, wie ich sie bereits oben in meinem Bericht gezeigt habe:
<DIV>Der eröffnende Tag links trennt, zusammen mit dem schließenden Tag rechts, den Container vom Rest des Dokuments.</DIV>
Das Attribut (class="left") ist eine Referenz auf den bestimmten, formatierenden Abschnitt (class) im Stylesheet (andere Datei mit der Erveiterung CSS), der dort mit „left“ bezeichnet wurde. Unter diesem Abschnitt stehen dann die verschiedenen Anweisungen zur Formatierung.
Man kann aber auch direkt formatieren in einem DIV. Das geht mit dem Attribut „style“ und den zugehörigen Anweisungen z.B.
<div style="position:absolute;left:20px;top:100px;width:100px;height:200px;background-color:#efefef;border:1px solid #ff0000;">CONTENT CONTENT CONTENT CONTENT</div>
Leider macht dabei der Markdown–Editor nicht mit und es war schon eine große Überraschung, dass überhaupt ein DIV mit wenigstens zwei Klassen eingeführt wurde. Was da allerdings im Stylesheet unter left oder right tatsächlich steht, weiß von den Steemern keiner.
Ausführung:
<div class="pull-right">Ah, danke @schamangerbert! Ich habe natürlich das „pull“ vergessen!</div><blockquote> So geht es!</blockquote>