* weitere Spielereien mit dem Layout

This commit is contained in:
phil 2006-07-18 13:43:20 +00:00
parent 7eb3e063d8
commit 9ada9f6953
7 changed files with 209 additions and 28 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5 KiB

View file

@ -15,12 +15,32 @@ h1, h2, h3, h4 {
color: #7fb945;
}
a {
text-decoration: none;
color: #f57900;
background: none;
}
a:visited {
color: #ce5c00;
}
a:active {
color: Orange;
}
a:hover {
color: #fcaf3e;
text-decoration: underline;
}
/*
a:link, a:visited {
color: #7fb945;
}
a:hover {
color: #3f8915;
}
}*/
hr {
height: 1px;
@ -45,7 +65,7 @@ hr {
}
#titlebar {
background: #336699;
background-color: #33436a;
color: white;
font-size: 44px;
text-shadow: 2px 2px 3px gray;
@ -53,6 +73,7 @@ hr {
padding-top: 1px;
padding-left: 16px;
padding-right: 16px;
border-bottom: 6px solid #f57900;
}
#titlebar .right {
@ -64,12 +85,18 @@ hr {
/* #### Menue #### */
#nav {
float: left;
width: 20%;
padding: 0;
border: 1px solid silver;
margin-top: 40px;
color: rgb(80,80,80);
background-color: transparent;
text-align: left;
/*position: absolute;
top: 130px;
right: 10px;*/
width: 180px;
margin: 0 0 0.5em 2em;
padding: 0.75em;
font-size: 90%;
border:1px solid #ccc;
background-color: #f6f6f6;
line-height: normal;
}
#nav a {
@ -94,6 +121,10 @@ hr {
/* Hauptteil einer Seite */
#toctitle {
color: #888;
}
#main {
margin-left: 25%;
padding: 0 1em;
@ -133,6 +164,22 @@ hr {
padding-right: 15px;
}
/* #selection - Formatiert die Buttons der Startseite */
#selection a {
text-decoration: none;
font-size: 110%;
}
#selection td {
vertical-align: middle;
padding: 0.6em 0.6em 0.9em 0;
}
#selection img {
margin: 0;
}
/* Zitate */
blockquote {
font-style:italic;
@ -161,8 +208,8 @@ caption {
#footer {
clear: left;
border-top: 1px solid #B7B7B7;
background: rgb(233,238,249);
border-top: 3px solid #B7B7B7;
background-color: #33436a;
margin-top: 30px;
padding: 15px 15px 0 15px;
color: #777777;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View file

@ -56,6 +56,17 @@ begin{rawhtml}
\begin_layout Standard
<div id="titlebar">
\end_layout
\begin_layout Standard
<div class="right">Die CryptoCD</div>
\end_layout
\begin_layout Standard
</div>
\end_layout
\begin_layout Standard
@ -71,7 +82,7 @@ end{rawhtml}
\end_layout
\begin_layout Standard
\begin_inset Include \input{menue.inc}
\begin_inset Include \input{/home/phil/daten/sao/svn/cryptocd/trunk/documents/menue/menue.inc}
preview false
\end_inset
@ -124,27 +135,139 @@ end{rawhtml}
\end_layout
\begin_layout Title
Die CryptoCD
\begin_layout Standard
\begin_inset ERT
status collapsed
\begin_layout Standard
\backslash
begin{rawhtml}
\end_layout
\begin_layout Standard
Die CryptoCD ist ein Projekt mit einem klaren Ziel: Verschlüsselung für
die Massen.
<table id="selection">
\end_layout
\begin_layout Standard
Die folgenden Beschreibungen werden dich in die Lage versetzen, durch Verschlüss
elung deine Privatsphäre zu schützen.
Auf der linken Seite siehst du ein Navigationsmenü, welches dich durch
die Materie begleitet.
Fang' einfach oben an und klick dich nach unten durch.
<tr>
\end_layout
\begin_layout Standard
Bist du die wichtigsten Texte durchgegangen, dann brauchst du nur noch deine
GesprächspartnerInnen dazu animieren, es dir gleich zu tun, und schon kann
es losgehen.
<td><a href="einfuehrung.html"><img src="einfuehrung.png" alt="Einf&uuml;hrung
" /></a></td>
\end_layout
\begin_layout Standard
<td><a href="einfuehrung.html">Einf&uuml;hrung</a><br/>
\end_layout
\begin_layout Standard
Die Einf&uuml;hrung erl&auml;utert, warum Verschl&uuml;sselung
wichtig ist und wie sie funktioniert.</td>
\end_layout
\begin_layout Standard
</tr>
\end_layout
\begin_layout Standard
<tr>
\end_layout
\begin_layout Standard
<td><a href="e-mail.html"><img src="email.png" alt="E-Mail" /></a></td>
\end_layout
\begin_layout Standard
<td><a href="e-mail.html">E-Mail</a><br/>
\end_layout
\begin_layout Standard
E-Mails verschl&uuml;sselt verschicken und empfangen.</td>
\end_layout
\begin_layout Standard
</tr>
\end_layout
\begin_layout Standard
<tr>
\end_layout
\begin_layout Standard
<td><a href="chat.html"><img src="chat.png" alt="Chat" /></a></td>
\end_layout
\begin_layout Standard
<td><a href="chat.html">Chat</a><br/>
\end_layout
\begin_layout Standard
Chat-Nachrichten verschl&uuml;sseln.</td>
\end_layout
\begin_layout Standard
</tr>
\end_layout
\begin_layout Standard
</table>
\end_layout
\begin_layout Standard
\backslash
end{rawhtml}
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Diese CD enthält eine Zusammenstellung von einfach formulierten Anleitungen
und Programmen, die dir das Verschlüsseln deiner Kommunikation ermöglichen.
Die CryptoCD ist
\begin_inset ERT
status collapsed
\begin_layout Standard
\backslash
htmladdnormallink{Freie Software}{about.html#lizenz}
\end_layout
\end_inset
.
Du kannst sie also an deine Gesprächspartner und -partnerinnen weitergeben
und sie dazu animieren ihre Kommunikation ebenfalls zu verschlüsseln.
\end_layout
\begin_layout Standard
Zum Starten klicke einfach eines der Themen oben oder im Menü an.
\end_layout
\begin_layout Standard

View file

@ -1,10 +1,11 @@
\begin{rawhtml}
<div id="nav">
<ul>
<li><a href="" title="">Einf&uuml;hrung ins Thema</li>
<li><a href="" title="">E-Mail verschl&uuml;sseln</a></li>
<li><a href="" title="">Chat-Nachrichten versch&uuml;sseln</a></li>
<li><a href="" title="">&Uuml;ber die CD</a></li>
</ul>
<div id="toctitle"><h2>Navigation</h2></div
<ul>
<li><a href="einfuehrung.html" title="Thematischer Einstieg">Einf&uuml;hrung ins Thema</li>
<li><a href="e-mail.html" title="E-Mail Verschl&uuml;sselung">E-Mails verschl&uuml;sseln</a></li>
<li><a href="chat.html" title="Chat Verschl&uuml;sselung">Chats versch&uuml;sseln</a></li>
<li><a href="about.html" title="Informationen zur CD">&Uuml;ber die CD</a></li>
</ul>
</div>
\end{rawhtml}

10
documents/menue/menue.inc Normal file
View file

@ -0,0 +1,10 @@
\begin{rawhtml}
<div id="nav">
<ul>
<li><a href="" title="">Einf&uuml;hrung ins Thema</li>
<li><a href="" title="">E-Mail verschl&uuml;sseln</a></li>
<li><a href="" title="">Chat-Nachrichten versch&uuml;sseln</a></li>
<li><a href="" title="">&Uuml;ber die CD</a></li>
</ul>
</div>
\end{rawhtml}