Page 2 of 3

Re: [new free template] fhs-basic

Posted: Sat Nov 23, 2019 12:04 pm
by mhz
Danke euch beiden!
@frase: Die Boxen sollen sie ja eben nicht anders anordnen!
Wegen der flanks: könnte es ohne diese flanks eher funktionieren, also dann 2D?

Re: [new free template] fhs-basic

Posted: Sat Nov 23, 2019 12:22 pm
by frase
mhz wrote:
Sat Nov 23, 2019 12:04 pm
@frase: Die Boxen sollen sie ja eben nicht anders anordnen!
Überlege mal: 4 Boxen nebeneinander auf einem Smartphone mit 300px Bildschirm-Breite.
Die müssten dann schon arg klein werden und der Text wäre nicht zu lesen bzw. läuft über.

Und überhaupt, man sollte mal darüber nachdenken, was solche Boxen im Header eigentlich sollen?
Sie bedürfen einer Interaktion (Mouse over).
Besucher einer Website werden sicher Bilder im Header als angenehm und informativ wahrnehmen - eben als Dekoration.
Dass man dort auch noch mit der Maus was veranstalten kann - darauf werden die Wenigsten kommen. Der Seiteninhalt ist wichtiger.

Re: [new free template] fhs-basic

Posted: Sat Nov 23, 2019 7:14 pm
by Tata
Nicht sagend, dass es auch viele Besucher gibt, die Bilder blokiert haben, weil si mehr die Textinfos suchen, nicht die nichtssagende Bilderschmick-smack-tricks.

Re: [new free template] fhs-basic

Posted: Sat Nov 23, 2019 8:17 pm
by lck
frase wrote:
Sat Nov 23, 2019 8:28 am
Dein Template hat übrigens noch Fehler. Zwei DIVs werden nicht geschlossen:
Das sollte unbedingt als erstes behoben werden, da scheint schon einiges geändert worden zu sein.

Vorschlag, wenn du das gerne möchtest, dann wäre folgendes eventuell eine Alternative. Mit Scrollbalken, somit sind die Flip-Boxen auch bei kleinen Viewports sichtbar.

template.htm
class="row" umbenennen zu <div class="header-row">
class="cell" (4 Vorkommen) umbenennen zu class="header-cell"

stylesheet.css am Ende einfügen

Code: Select all

.header-row {
	font-size: 0;
	line-height: normal;
	overflow-x: auto;
	overflow-y: hidden;
	text-align: center;
	width: 100%;
	white-space: nowrap;
}
.header-cell {
	background-color: transparent;
	border: 1px solid #9E9E9E;
	box-sizing: border-box;
	display: inline-block;
	font-size: 1rem;
	margin: 10px 5px;
	padding: 5px;
}

Re: [new free template] fhs-basic

Posted: Fri Apr 03, 2020 3:52 pm
by mhz
Hallo zusammen!
Mein Vorhaben, die Flipboxen ans Laufen zu bringen, habe ich inzwischen aufgegeben.

Auf meiner Test-Seite https://herrmann-hesse-schule.de: Ich habe mir noch einmal das ursprüngliche Template genommen und nun die beiden Newsboxen auf der rechten Seite aktiviert.
Dann habe ich die Header-Slideshow weiter hoch verschoben und dadurch den Bereich Logo verbannt. Unter dieses baute ich auch noch eine Submenü-Navigation ein. Links unter die Navigation bastelte ich Memperpages ein, weiter unten noch Privacy. In die 1. Newsbox setzte ich das Plugin Chat und in die 2. Newsbox den Kalender. Funktioniert bisher soweit richtig gut. Diese Seiten, die dieses Grundtemplate nutzen, sind aber allesamt für die Mitglieder, also den normalen Besucher unsichtbar.
(Für euch hier habe ich die Seite Osterferien speziell freigegeben (Benutzername: Gast, Passwort: Gast).

Als Start-Template (so ist es auch benannt) für die Seite Willkommen wollte ich nun mein bisher verwendetes Design verwenden. Da die Newsboxen nicht erscheinen sollen, änderte ich in der css den Teil c12 (Zeile 19) von ca. 50% wieder auf 75% und im template.htm kommentierte ich die Bereiche id="newsboxes" aus.
Das klappte bisher auch sehr gut, solange ich die beiden versteckten Newsboxen leer hatte. Weil sie aber jetzt mit Inhalt gefüllt sind, passiert das, was auf dieser Willkommen-seite zu beobachten ist. Unter dem Content erscheinen jetzt die beiden Newsboxen und manchmal ist in der Newsbox 1 auch die komplette Startseite mit allen Elementen zu sehen.

Das passiert aber nur, wenn ein User angemeldet ist.
Wie bekomme ich diese beiden Boxen da unten nur für die Startseite weg, wenn jmd. angemeldet ist?

Re: [new free template] fhs-basic

Posted: Fri Apr 03, 2020 5:20 pm
by frase
Nimm den aktuellen Firefox und lasse dir den Quelltext der Seite anzeigen.

An den vielen roten Textstellen kannst du sehen, wo du Fehler im Template hast.

Einige Elemente sind nicht richtig geschlossen.
Das ist beim Auskommentieren passiert.

Re: [new free template] fhs-basic

Posted: Fri Apr 03, 2020 5:54 pm
by mhz
Danke. Den Quelltext habe ich bisher noch nie offen gehabt. Immer nur Element untersuchen.

Re: [new free template] fhs-basic

Posted: Sat Apr 04, 2020 6:51 am
by frase
mhz wrote:
Fri Apr 03, 2020 5:54 pm
Danke. Den Quelltext habe ich bisher noch nie offen gehabt. Immer nur Element untersuchen.
Ja, das mache ich auch nur selten - aber immer dann, wenn die Seitenstruktur zerschossen ist.

Bei dieser Gelegenheit ist mir auch noch ein eigener Fehler im Original-Template aufgefallen: :oops:

Code: Select all

<div id="noScript">Please activate JavaScript in your browser.</p>
<p><a href="?&amp;sitemap">&raquo; Sitemap</a></p>
</div>
Beim ersten Satz "Please ..." fehlt das öffnende <p>.
Es muss also heißen:

Code: Select all

<div id="noScript"><p>Please activate JavaScript in your browser.</p>
<p><a href="?&amp;sitemap">&raquo; Sitemap</a></p>
</div>
Wenn möglich, versuchen die Browser solche Fehler zu korrigieren.
Das klappt aber nicht immer und es entstehen falsche Verschachtelungen und Überlappungen.
Bei dir auf der Seite "Osterferien" (eingeloggt) sind noch etliche rot markierte Bereiche zu finden - ganz so, als hätte ein Lehrer die Arbeit mit Rotstift korrigiert ;-)

Re: [new free template] fhs-basic

Posted: Sat Apr 04, 2020 7:30 am
by mhz
Danke!
Kann passieren. Irgendwie war da auch ein öffnendes div und ein anschließendes p.
Ja, genau.
Ich habe plötzlich auch ganz viel rot gesehen.
Inzwischen habe ich mir überlegt, dass ich das Auskommentieren lasse, sondern gleich lösche.
Dann kann ich aber Etliches später nicht mehr nachvollziehen.

Re: [new free template] fhs-basic

Posted: Sat Apr 04, 2020 7:35 am
by frase
Das Problem ist nicht das Auskommentieren oder das Löschen, sondern, dass du an einigen Stellen zu viel und an anderen zu wenig herausgenommen hast.
<div> ... </div>
<a> ... </a>
usw.
Die Verschachtelung der Elemente muss stimmen.