|
|
Test betreffend Layout
Test und schöne Musik
Einfacher Test zwischendurch
Ladies and Gentelemen!
Dies ist ein Test, bei dem es eigentlich völlig egal ist, was ich schreibe - es kommt nur darauf an, dass ich einen Text schreibe, den ich anschließend in zwei Textspalten aufteilen will, die möglichst gleich lang sein
sollen.
Außerdem sollen sogenannte Softhyphens in den Text eingespielt werden. Das sind grundsichtlich unsichtbare Trennzeichen, die aber dann zum Zuge kommen, wenn der Browser einen HTML-Text darstellt: Sie sorgen dann dafür, dass Wörter an den richtigen Stellen getrennt werden.
Um das alles möglichst schnell zu schaffen,
vom geschriebenen Text zum Textsatz unter HTML, der vierspaltig ist und nichts mehr zu wünschen übrig lässt, habe ich mir ein paar Sachen aus dem Internet besorgt.
Das heißt aber leider nicht, dass ich nur den Text schreiben und dann auf einen Knopf drücken muss - ich muss mit den mir verfügbaren Mitteln mehrere Etappen selbstständig durchführen, es ist also eine Mischung aus Handarbeit 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.
|
|
|
|
|
