Die Volkszeitung
     Die Volkszeitung

Technik dieser Seite - sicher und komfortabel: Info

Stimmen anderer zur Lage der Nation: Info

Impressum: Info       www.die-volkszeitung.de

Inhalt dieser Seite: Diese Seite ist eine Modellseite.

Test betreffend Layout

Test und schöne Musik

Einfacher Test zwischendurch

La­dies and Gen­t­e­le­men!
Dies ist ein Test, bei dem es ei­gent­lich völ­lig egal ist, was ich schrei­be - es kommt nur dar­auf an, dass ich ei­nen Text schrei­be, den ich an­schlie­ßend in zwei Text­spal­ten auf­tei­len will, die mög­lichst gleich lang sein sol­len.

Au­ßer­dem sol­len so­ge­nann­te Sof­t­hy­phens in den Text ein­ge­spielt wer­den. Das sind grund­sicht­lich un­sicht­ba­re Trenn­zei­chen, die aber dann zum Zu­ge kom­men, wenn der Brow­ser ei­nen HTML-Text dar­stellt: Sie sor­gen dann da­für, dass Wör­ter an den rich­ti­gen Stel­len ge­trennt wer­den. Um das al­les mög­lichst schnell zu schaf­fen,

vom ge­schrie­be­nen Text zum Text­satz un­ter HTML, der vier­spal­tig ist und nichts mehr zu wün­schen üb­rig lässt, ha­be ich mir ein paar Sa­chen aus dem In­ter­net be­sorgt.

Das heißt aber lei­der nicht, dass ich nur den Text schrei­ben und dann auf ei­nen Knopf drü­cken muss - ich muss mit den mir ver­füg­ba­ren Mit­teln meh­re­re Etap­pen selbst­stän­dig durch­füh­ren, es ist al­so ei­ne Mi­schung aus Hand­ar­beit und EDV nötig.

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.


N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S
N
W O
S