|
|
Sicherheit und Komfort:
Die Technik der neuen Seiten unter www.die-volkszeitung.de
Die Technik dieser Seiten - sicher und komfortabel Zur Technik der Seiten ist kurz zu sagen, dass nur CSS und HTML zum Zuge kommen, mit denen es unmöglich ist, Besucher auszuspähen, Besucher auf Seiten festzuhalten oder irgendetwas anderes zu tun, was von Internetnutzern oft zu Recht als unzulässig oder zumindest als lästig empfunden wird. Die verwendeten Stilelemente können eingesehen werden:
CSS-Datei:
HTML-Datei:
Zur Bedienung der Navigation Innovatives Element dieser Seiten ist eine Navigation, die ebenso einen schnellen Überblick über die Inhalte ermöglicht, wie auch einen schnellen und gezielten Ansprung von Bildern oder Artikeln. Kernelemente sind die Navigatoren, die allgemein das Springen nach rechts (W wie West), links (O wie Ost), oben (N wie Nord) und unten (S wie Süd) erlauben.
Ausnahme: Sind zwei Navigatoren senkrecht übereinander im Bild zu sehen, dann ist ein nach oben springen vom unteren Navigator nicht möglich - weil der nächst obere ja bereits oben im Bild ist (siehe Bild DEMONSTRATION). Natürlich ist es auch nicht möglich, z.B. nach links zu springen, wenn der linke Rand der Seite bereits erreicht ist.
Die von den Browsern gebotene Navigation innerhalb der Seite (Balken-Scrolling) funktioniert natürlich ebenfalls, auf diesen Seiten wird nichts eingeschränkt.
Sie werden aber feststellen, dass es z.B. deutlich schneller und komfortabler möglich ist, sich die Bilder rechts auf dieser Seite unter Nutzung der Navigatoren anzusehen, als per Scrolling.
Da die Navigatoren auf der Technik der HTML-Ankerlinks basieren, können Sie nach Verwendung von Navigatoren auch den Zurück-Button Ihres Browser nutzen, um genau dorthin zurück zu springen, wo Sie hergekommen waren.
Fürchten Sie sich nicht, die Navigatoren auszuprobieren - was auch immer Sie auf diesen Seiten anstellen mögen, es kann nichts geschehen, was negative Folgen hat. Obwohl ich die Navigation selbst programmiert habe - wie nützlich sie ist, habe ich auch erst festgestellt, als ich sie ein paar Mal benutzt hatte.
Liebe Grüße
Ihr
Dipl.-Kfm. Winfried Sobottka, UNITED ANARCHISTS
|
CSS-Datei mit allen verwendeten Elementen
.elastic-video {
position: relative;
padding-bottom: 55%;
padding-top: 15px;
height: 0;
overflow: hidden;
}
.elastic-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
elastic-video-wrapper {
width: 500px;
max-width: 100%;
}
#schrift1 {
position: relative;
z-index: 1;
font: bold 2em Verdana;
color: #041270;
}
#schrift2 {
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
z-index: 2;
color: silver;
}
#column1 {
float:left;
width: 50%;
}
#column2 {
float:left;
width: 50%;
}
body {
font-family: arial;
font-size:14px;
font-weight:normal;
background-color: #ffffff;
position: absolute; /* NN4 */
top: 0; /* NN4 */
left: 0; /* NN4 */
margin: 0; /* das reicht eigentlich */
padding: 0; /* Opera UASS */
}
table {
border-collapse:collapse;
}
td
{
vertical-align:top;
border-collapse:collapse;
}
h1 {
font-weight:bolder;
margin-left:20px;
font-size: 36px;
}
h2 {
font-weight:bold;
margin-left:20px;
font-size: 24px;
}
h3 {
font-weight:bold;
margin-left:20px;
font-size: 18px;
}
p {
font-style: normal;
font-weight: normal;
font-size: 1em;
font-family: verdana;
letter-spacing: 0px;
text-align: justify;
margin-left:20px;
margin-right:20px;
line-height:1.5em;
color: #333333;
}
p.second{
font-style: normal;
font-weight: normal;
font-size: .9em;
font-family: verdana;
letter-spacing: 0px;
text-align: justify;
margin-left:20px;
margin-right:20px;
line-height:1.0em;
color: #333333;
}
a.cssmenugrey:link {
width : 150px;
color : #FFFFFF;
background-image: url(buttons/button-04-01.jpg);
text-align : center;
text-decoration : none;
font-size : 12px;
font-family: arial, verdana;
font-weight: bold;
border-top : 1px black;
border-right : 1px black;
border-left : 1px black;
border-bottom : 1px black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 2px;
}
a.cssmenugrey:visited {
width : 150px;
color : #FFFFFF;
background-image: url(buttons/button-04-01.jpg);
text-align : center;
text-decoration : none;
font-size : 12px;
font-family: arial, verdana;
font-weight: bold;
border-top : 1px black;
border-right : 1px black;
border-left : 1px black;
border-bottom : 1px black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 2px;
}
a.cssmenugrey:hover {
width : 150px;
color : #000000;
background-image: url(buttons/button-04-07.jpg);
text-align : center;
text-decoration : none;
font-size : 12px;
font-family: arial, verdana;
font-weight: bold;
border-top : 1px black;
border-right : 1px black;
border-left : 1px black;
border-bottom : 1px black;
padding-top : 2px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 2px;
margin-right : 2px;
}
a.einfach:link {
text-decoration : none;
}
a.einfach:visited {
text-decoration : none;
}
a.einfach:hover {
text-decoration : underline;
}
|
HTML-Datei mit allen verwendeten Elementen
Die Html Dateien können Sie sich jeweils ganz einfach anzeigen lassen: Wenn Sie jetzt
zum Beispiel die rechte Maustaste klicken, dann erscheint ein Fenster. Eine der angezeigten Optionen
heißt "Quelltext anzeigen". Wenn Sie diese Option wählen, wird Ihnen der vollständige HTML-Text des
Dokumentes angezeigt, das Sie gerade aufgerufen haben. Sie können es dann auch mit P & C in eine
Textverarbeitung oder einen Editor übertragen.
Vielleicht interessant für manche, die es wissen wollen, wie ich die Schattenschrift in der Headline, oder
die Einbindung von Videos oder die Navigation bewerkstelligt habe, denn anhand der CSS-Datei und
der HTML-Datei ist alles einsehbar.
Ich habe für manche Dinge viel im Internet suchen und viel ausprobieren müssen - vielleicht kann das
hier veröffentlichte CSS und der Einblick in die HTML-Datei dem einen oder anderen weiterhelfen.
|
|
|
|
|
