Fragenkatalog: Betrifft (nochmals) das Einbinden von Fonts & ein dummes CSS Prob

[einsiedler]

Nabend liebe Forumer, DANKE für eure Beiträge in meinem vorherigen Thread, ich bin nun um einiges "schlauer". Nun aber zu meinen neuen Fragen, dies Betrifft zum einen nochmal das Einbinden von Fonts: a) Und zwar habe ich auf meinem Host mehrere Domains und ich möchte zum Bespiel bei meiner Domain meinewebseiteA.onion in einem Ordner alle Fonts "sammeln". Auf meiner Homepage meinewebseiteB.onion möchte ich villeicht denselben Font wie bei meiner anderen webseite benutzen , villeicht aber auch einen anderen der im Ordner meiner ersteren webseite liegt. Alle webseiten liegen auf demselben Server. Wie mache ich das nun? ich habe versucht einen absoluten Link zum Ordner meiner ersten Domain zu setzen, aber das funktioniert einfach nicht. Nichts passiert? Aber wieso? Was ist hier zu tun? Wie geht das richtig?

b) Wie schon erwähnt habe ich ein kleines CSS maleur. Es Betrifft den Firefox und den IE und zwar wenn das Bildschirmfenster sehr schmal ist , also konkret bei @media only screen and (max-width: 30.625em) {}

Vornehmlich auf dieser Unterseite : fehlerhafte Seite

da dort die Höhe des Fensters ganz ausgenutzt wird und dadurch Elemente die innerhalb von .site-wrap {} sind , zum Beispiel <main class="main main--small"> nach unten hin hinausgeschoben werden und .site-wrap einfach (im bottom) überlagern. Also stimmt da doch mit "height" etwas nicht. Die Sache ist die, das die Elemente innerhalb von .site-wrap vertikal mittig angeordnet werden (durch: flex-direction: column; justify-content: center; align-items: center;. Dadurch kann es, wenn das Bildschirmfenster so schmal gezogen wird , mit der Höhe ja nicht klappen, und es werden da Elemente nach oben und unten ausserhalb , überlagert, wie ein overflow. Doch möchte ich nun , auch wenn der Inhalt "überqillt" , also mehr Höhe des Bildschirmfensters einnimmt, das alle Inhalte innerhalb von .site-wrap bleiben, sodass ich endlich auch eine Wirkung eines margin dem ich .site-wrap mitgebe erhalte, das ist bis jetzt nicht der Fall.

Versucht habe ich bisher, das ich .site-wrap ein height:auto; mitgegeben habe, aber dann passiert das gleiche alswenn ich justify-content: flex-start; mitgebe, alles wird ganz vonobenan angeordnet, das aber kann es doch nicht sein wenn ich alles weiterhin mittig angeordnet haben möchte! Was hilft mir also dabei?

Ich hoffe ihr versteht mein Anligen und Bitte um Mithilfe!

Danke!!!

Der misanthrop

[Der Martin]

Guten Abend,

ich möchte zum Bespiel bei meiner Domain meinewebseiteA.onion in einem Ordner alle Fonts "sammeln". Auf meiner Homepage meinewebseiteB.onion möchte ich villeicht denselben Font wie bei meiner anderen webseite benutzen , villeicht aber auch einen anderen der im Ordner meiner ersteren webseite liegt. Alle webseiten liegen auf demselben Server.
Wie mache ich das nun? ich habe versucht einen absoluten Link zum Ordner meiner ersten Domain zu setzen, aber das funktioniert einfach nicht. Nichts passiert?

die Frage ist: Was meinst du mit einem "absoluten Link"? Wenn du versuchst, über das Dateisystem des Servers auf die andere Domain zu verlinken, wird das schiefgehen, weil der Browser nichts über die Datei-Organisation auf der Serverseite weiß.
Du musst also eine absolute URL aus HTTP-Sicht verwenden. Denn nur das ist von außerhalb des Servers "sichtbar".

Ciao,
 Martin

[einsiedler]

Ist jetzt villeicht "platt", ich habe bisher folgendes gemacht:

@font-face {
	font-family: 'Font-Bold';
	src: url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.eot'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Variable-Bold.eot?#iefix') format('embedded-opentype'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.woff') format('woff'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.woff2') format('woff2'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

Das ist mein font-css.css für meine zweite webseite. Doch das ist warscheinlich das, was nicht funktioniert.

[Gunnar Bittersmann]

@@einsiedler

Ist jetzt villeicht "platt", ich habe bisher folgendes gemacht:

@font-face {
	font-family: 'Font-Bold';
	src: url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.eot'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Variable-Bold.eot?#iefix') format('embedded-opentype'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.woff') format('woff'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.woff2') format('woff2'),
		url('http://meinewebsiteA.onion/web-fonts/Fontname/Fontname-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

Und ich habe dir vor kurzem schon gesagt, dass das Unsinn ist.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

du hättest ihm aber trotzdem noch auf seine Frage antworten können.

Tassilo, ich nehme an, dass meinewebseiteA.onion ein Beispielname ist und Du nicht wirklich im TOR Netz hängst. Oder doch? Beispiel-URLs schickt man nicht ins Zwiebelnetz, sondern dafür gibt's Namen wie example.org.

Wegen der Fonts solltest Du in die Entwicklerwerkzeuge des Browsers schauen und gucken, ob es Fehlermeldungen in der Konsole oder im Netzwerk-Tab gibt.

Vermutlich steht da, dass eine http Ressource nicht in einer Seite eingebunden werden kann, die über https abgerufen wurde.

Die best practice ist, bei Ressourcenzugriffen auch bei absoluten Adressen kein Schema anzugeben:

src: url('http://example.org/web-fonts/foo/foo-Bold.woff') format('woff')

Der Browser verwendet dann für den Ressourcenzugriff das gleiche Schema wie für die Seite, in der die Ressource eingebunden ist.

Ein Schema in der Ressource brauchst Du nur, wenn deine Seite über http abgerufen wird, du aber externe Ressourcen via https nachladen willst.

Rolf

[einsiedler]

Hallo Rolf, NEIN, keine Panik, es handelt sich um eine ganz normale offizielle .de Webseite. Weiß auch nicht was mich da geritten hat das zu schreiben.

Ich werde es mal ausprobieren was Du da geschrieben hast. Villeicht ist es einfach besser bei jeder Domain sein eigenen Font-Ordner anzulegen, das hättet ihr mir auch schreiben können wenn es so ist.

Naja, bleibt noch Problem 2!

Gruß der misanthrop

[TS]

Hello,

Hallo Rolf, NEIN, keine Panik, es handelt sich um eine ganz normale offizielle .de Webseite. Weiß auch nicht was mich da geritten hat das zu schreiben.

Ich werde es mal ausprobieren was Du da geschrieben hast. Villeicht ist es einfach besser bei jeder Domain sein eigenen Font-Ordner anzulegen,

Ja, das ist eine Lösung. Und da die Fonts alle im selben Dateisystem liegen, kann man dann serverintern für die Fontsverzeichnisse jeweils mit einem symbolischen Link auf ein zentrales gemeinsames Verzeichnis arbeiten.

Dieses muss vom Webserveruser gelesen werden dürfen.

Glück Auf
Tom vom Berg

[Matthias Apsel]

Hallo Rolf B,

Die best practice ist, bei Ressourcenzugriffen auch bei absoluten Adressen kein Schema anzugeben:

src: url('http://example.org/web-fonts/foo/foo-Bold.woff') format('woff')

Der Browser verwendet dann für den Ressourcenzugriff das gleiche Schema wie für die Seite, in der die Ressource eingebunden ist.

Ein Schema in der Ressource brauchst Du nur, wenn deine Seite über http abgerufen wird, du aber externe Ressourcen via https nachladen willst.

„Jetzt, da SSL für alle empfohlen wird und keine Leistungseinbußen mehr hat, ist diese Technik nun ein Anti-Pattern. […] Es ist immer sicher, HTTPS-Ressourcen anzufordern, auch wenn Sie eine HTTP-Website betreiben, aber umgekehrt ist das nicht der Fall.“ – https://www.paulirish.com/2010/the-protocol-relative-url/

Bis demnächst
Matthias

[Matthias Apsel]

Hallo einsiedler,

Wie schon erwähnt habe ich ein kleines CSS maleur. Es Betrifft den Firefox und den IE und zwar wenn das Bildschirmfenster sehr schmal ist , also konkret bei @media only screen and (max-width: 30.625em) {}

Vornehmlich auf dieser Unterseite : fehlerhafte Seite

Ich weiß nicht, ob ich deine Beschreibung richtig verstanden habe, …

Also stimmt da doch mit "height" etwas nicht.

… aber wenn du feste Höhen vorgibst (und 100% ist eine feste Höhe) verhält sich die Seite genau so, wie sie soll.

rechts mit height: 100%, links ohne.

Lösung könnte min-height: 100% sein. Insgesamt stellt sich mir auch die Frage nach dem Sinn des wrapper-divs.

Bis demnächst
Matthias

[einsiedler]

Habe nun doch mal screens gemacht:

a) Firefox

und genauso b)

Da hört der wrapper-div irgendwann auf, und der Inhalt , das main ragt hinüber und schließt nicht am Ende vom wrapper-div mit ab. So kann ich dem wrapper-div kein margin-bottom mitgeben da es ohnehin nicht wirkt.

Das ist mein knackpunkt. Warum wird main nach unten hin "hinausgeschmissen"?

[Matthias Apsel]

Hallo einsiedler,

hast du meinen Lösungsvorschlag überhaupt gelesen?

Bis demnächst
Matthias

[einsiedler]

Doch, doch, sorry habe ich, werde ich als nächstes mal anwenden. DANKE!

[einsiedler]

Funktioniert nicht, die Höhe vom wrapper-div ist immer noch eine andere und das main-Element ragt nach unten hin herüber, und es werden nicht alle Elemente innerhalb des wrapper-div wie gewünscht umschlossen, dann wirkt also mein margin-bottom dort (beim wrapper-div) nicht.

Was wohl funktioniert ist folgendes:

`@media only screen and (max-width: 30.625em) {
	.site-wrap {
		margin: 0 0.2rem;
		padding: 1.2rem 0;
		height: auto;
		align-items: flex-start;
	}`

also height: auto; setzt

dann allerdings wäre das derselbe Fall als wenn ich justify-content: flex-start; nehmen würde und alle Elemente werden von ganz obenan angefangen nach unten hin gesetzt.

wenn es also so sein muss, mache ich es so.

Ich wiederhole meine These, das wenn alle Elemente vertikal mittig gesetzt werden (durch: justify-content: center;) dann tritt eben diese MERDE auf!

P.P.S. Mein Eindruck: Es kommt mir so vor als wenn die HÖHE des wrapper-div NUR die aktuelle Höhe des Fensters einnimmt, nicht darüber. Also stimmt da doch schon was nicht wie ich die HÖHE gesetzt habe also in % , dann wäre hier die % - Angabe falsch

[Matthias Apsel]

Hallo einsiedler,

https://flexboxfroggy.com/#de ist eine nette Seite, um das Konzept von flexbox kennenzulernen.

Bis demnächst
Matthias

[MudGuard]

Hi,

Vornehmlich auf dieser Unterseite : fehlerhafte Seite

Geht das nur mir mit meinem Browser so, oder sind da auch bei Euch keine Eingabefelder zu sehen?

Das halte ich für ein wesentlich größeres Problem als irgendwelche Verschiebungen von Feldern …

da dort die Höhe des Fensters ganz ausgenutzt wird

Da ist doch nur ein kleiner Bereich in der Mitte des Browsers benutzt, links, oben, rechts und unten ist massig Platz …

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

Geht das nur mir mit meinem Browser so, oder sind da auch bei Euch keine Eingabefelder zu sehen?

Das halte ich für ein wesentlich größeres Problem als irgendwelche Verschiebungen von Feldern …

Ja, das ist überhaupt nicht zugänglich

input {
  background-color: #083A6D; //identisch mit Hintergrund
  border: none;
  outline: none;
}

da dort die Höhe des Fensters ganz ausgenutzt wird

Da ist doch nur ein kleiner Bereich in der Mitte des Browsers benutzt, links, oben, rechts und unten ist massig Platz …

auf ganz schmalen viewports …

Bis demnächst
Matthias

[einsiedler]

Was muss ich da also noch machen?

[Matthias Apsel]

Hallo einsiedler,

Was muss ich da also noch machen?

die input-Elemente (mindestens) sichtbar.

Bis demnächst
Matthias