Changeset 397 in t29-www


Ignore:
Timestamp:
May 14, 2013, 11:13:36 AM (6 years ago)
Author:
sven
Message:

Termine-Bereich auf Startseite designt, und zwar nach Vorlage der W3C-Website.
Archivbereich exemplarisch ausklappbar gestaltet.

Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed
  • de/index.php

    r395 r397  
    77?>
    88
    9     <div class="cols">
     9    <div class="cols clear-after">
    1010       <div class="leftcol startseiten-design">
    1111         <div class="besonderes">
     
    8181                </div>
    8282               
    83       </div><!--rightcol-->
    84                        
    85                         </div><!-- cols -->
    86                         <div class="clear"></div>
    87                        
    88                        
    89                 <h2>Termine</h2>       
    90                
    91                  <div class="cols">
    92        <div class="leftcol startseiten-design">
    93        
    94                        
    95                         <b>Computer-History</b><br>
    96                         (Gruppe Weber)<br>
    97                         <b>Termin:</b> Montag, 3. Juni um 15 Uhr
    98                         <hr>
    99                         <b>Computer-History</b><br>
    100                         (Gruppe Kliche)<br>
    101                         <b>Termin:</b> Mittwoch, 19. Juni um 18 Uhr
    102                         <hr>
    103                         <b>Die Geschichte der Kommunikation</b><br>
    104                         (Guppe Stehling)<br>
    105                         <b>Termin:</b> Samstag, 22. Juni um 15 Uhr
    106                         <hr>
    107                         <b>Die lebendige Geschichte des Computers</b><br>
    108                         Eine vom Hessischen Kultusministerium akkreditierte Fortbildungsveranstaltung (<a href="https://akkreditierung.hessen.de/web/guest/catalog/detail?tspi=132543_">  Nr. 01375122 </a>).<br>
    109                         <b>Termin:</b> Mittwoch, 26. Juni 14:30 Uhr. Anmeldung erforderlich.
    110                         <hr>
    111                        
    112                         Im Rahmen der <b>"Tage der Industriekultur Rhein-Main"</b> bieten wir folgende Veranstaltungen an (jeweils ca. 90 Miunten, freier Eintritt, Voranmeldung ist erforderlich, siehe Rubrik "Kontakt"):<br><br>
    113         <b>1. "Die Geschichte der Kommunikation"</b><br>
    114         Eine lebendige Führung mit vielen Live-Demonstrationen und Experimenten. Auch für Kids ab ca. 10 Jahre bestens geeignet. <br>
    115         <b>Termin:</b> Mittwoch, den 14. August 2013 um 19 Uhr
    116         <hr>
    117        
    118                        
    119     </div><!--leftcol-->
    120         <div class="rightcol startseiten-design">
    121        
    122         <b>2. "Beeinflusst Sprache unser Denken?"</b><br>
    123 Kann man über Probleme nachdenken, sie
    124 gar lösen, ohne dies in Form einer Sprache formulieren zu können? Kann es
    125 sein, dass unterschiedliche Sprachen einem unterschiedliche Einblicke in ein           
    126 Problem gewähren? Diese und weitere Fragen werden in einem Vortrag aus der Sicht eines
    127 Mathematikers/Informatikers, (Prof. Dr. B. Ulmann)  sowie eines Philosophen (P. Hedfeld) behandelt, wobei der Bogen von abstrakten Dingen bis hin zu Donald Duck Comics gespannt wird. Geeignet ab ca. 16 Jahre.<br>
    128 <b>Termin:</b> Samstag, den 17. August um 19 Uhr
    129 <hr>
    130 <b>3. "Computer-History"</b><br>
    131 Unsere klassische Führung als Zeitreise durch die Computerwelten sowie die Entstehung von EDV und IT mit vielen einmaligen funktionsfähigen Urzeit-Rechnern. Auch für interessierte Kids ab ca. 9 Jahre bestens geeignet.<br>
    132 <b>Termin:</b> Sonntag, den 18. August um 14 Uhr
    133 <hr>
    134 
    135 <div style="opacity: 0.6">
    136 <b>Archiv:</b><br><br>
    137 Unser IBM 026-Card-Punch ist in einem Konzert in Köln zu "hören!" Siehe<br>
    138                         <a href="http://www.punchcardmusic.de/"><b> punchcard music</b></a> <br>
    139                         ein Auftragswerk von ACHT BRÜCKEN | Musik für Köln<br>
    140                         <b>Termin:</b> Freitag, den 10. Mai um 20:30 Uhr
    141 </div>
    142 
    14383        </div><!--rightcol-->
    14484        </div><!-- cols -->
    14585       
    146        
     86<!-- Zweiter Teil der Startseite: Termine -->
     87
     88<div id="termine" class="termine">
     89<h2>Termine und Führungen</h2>
     90
     91<div class="cols clear-after"><!-- Zweispaltige Ansicht -->
     92               
     93<div class="leftcol">
     94        <h3>Führungen</h3>
     95
     96        <div class="box termin clear-after">
     97                <p class="date left"><em>2013</em> 03. Juni</em></p>
     98                <h4>Computer History</h4>
     99               
     100                Gruppe Weber
     101               
     102                <dl class="daten">
     103                        <dt>Termin</dt>
     104                        <dd class="termin">Montag, 3. Juni um 15 Uhr</dd>
     105                        <!-- Beispiel:
     106                        <dt>Anmeldung</dt>
     107                        <dd><a href="/de/impressum">wird erbeten</a></dd>
     108                        -->
     109                </dl>
     110        </div>
     111       
     112       
     113        <div class="box termin clear-after">
     114                <p class="date left"><em>2013</em> 19. Juni</em></p>
     115                <h4>Computer History</h4>
     116               
     117                Gruppe Kliche
     118               
     119                <dl class="daten">
     120                        <dt>Termin</dt>
     121                        <dd class="termin">Mittwoch, 19. Juni um 18 Uhr</dd>
     122                </dl>
     123        </div>
     124       
     125        <div class="box termin clear-after">
     126                <p class="date left"><em>2013</em> 22. Juni</em></p>
     127                <h4>Die Geschichte der Kommunikation</h4>
     128               
     129                Gruppe Stehling
     130               
     131                <dl class="daten">
     132                        <dt>Termin</dt>
     133                        <dd class="termin">Samstag, 22. Juni um 15 Uhr</dd>
     134                </dl>
     135        </div>
     136
     137        <h3>Fortbildungen</h3>
     138       
     139        <div class="box termin clear-after">
     140                <p class="date rot left"><em>2013</em> 26. Juni</em></p>
     141                <h4>Die lebendige Geschichte des Computers</h4>
     142               
     143                Eine vom Hessischen Kultusministerium akkreditierte Fortbildungsveranstaltung (<a href="https://akkreditierung.hessen.de/web/guest/catalog/detail?tspi=132543_">Nr. 01375122</a>).
     144               
     145                <dl class="daten">
     146                        <dt>Termin</dt>
     147                        <dd class="termin">Mittwoch, 26. Juni 14:30 Uhr.</dd>
     148                        <dt>Anmeldung</dt>
     149                        <dd><a href="https://akkreditierung.hessen.de/web/guest/catalog/registration?tspm=&tspi=132543&vsid=96223B5EA7C5D991D0CB30E7923598E5_17">erforderlich, Anmeldeschluss 21.06.13</a></dd>
     150                </dl>
     151        </div>
     152                       
     153                       
     154
     155<!-- Spaltenwechsel --> </div><div class="rightcol"> <!-- Spaltenwechsel -->
     156       
     157        <h3>Tage der Industriekultur Rhein-Main</h3>
     158        <p>Im Rahmen der <a href="http://www.route-der-industriekultur-rhein-main.de/">Tage der Industriekultur Rhein-Main</a> bieten wir folgende Veranstaltungen an (jeweils ca. 90 Miunten, freier Eintritt, Voranmeldung ist erforderlich, siehe <a href="/de/impressum">Kontakt</a>):<br><br>
     159       
     160
     161        <div class="box termin clear-after">
     162                <p class="date left"><em>2013</em> 14. Aug</p>
     163
     164                <h4>1. Die Geschichte der Kommunikation</h4>
     165               
     166                Eine lebendige Führung mit vielen Live-Demonstrationen und Experimenten. Auch für Kids ab ca. 10 Jahre bestens geeignet.
     167
     168                <dl class="daten">
     169                        <dt>Termin</dt>
     170                        <dd class="termin">Mittwoch, den 14. August 2013 um 19 Uhr</dd>
     171                </dl>
     172        </div>
     173                       
     174                       
     175        <div class="box termin clear-after">
     176                <p class="date left"><em>2013</em> 17. Aug</p>
     177
     178                <h4>2. Beeinflusst Sprache unser Denken?</h4>
     179
     180                Kann man über Probleme nachdenken, sie
     181gar lösen, ohne dies in Form einer Sprache formulieren zu können? Kann es
     182sein, dass unterschiedliche Sprachen einem unterschiedliche Einblicke in ein
     183Problem gewähren? Diese und weitere Fragen werden in einem Vortrag aus der Sicht eines
     184Mathematikers/Informatikers (<a href="http://www.vaxman.de/about_me/about.html">Prof. Dr. B. Ulmann</a>),  sowie eines Philosophen (P. Hedfeld) behandelt, wobei der Bogen von abstrakten Dingen bis hin zu Donald Duck Comics gespannt wird. Geeignet ab ca. 16 Jahre.<br>
     185
     186                <dl class="daten">
     187                        <dt>Termin</dt>
     188                        <dd class="termin">Samstag, den 17. August um 19 Uhr</dd>
     189                </dl>
     190        </div>
     191
     192        <div class="box termin clear-after">
     193                <p class="date left"><em>2013</em> 18. Aug</p>
     194                <h4>3. Computer History</h4>
     195                Unsere klassische Führung als Zeitreise durch die Computerwelten sowie die Entstehung von EDV und IT mit vielen einmaligen funktionsfähigen Urzeit-Rechnern. Auch für interessierte Kids ab ca. 9 Jahre bestens geeignet.<br>
     196               
     197                <dl class="daten">
     198                        <dt>Termin</dt>
     199                        <dd class="termin">Sonntag, den 18. August um 14 Uhr</dd>
     200                </dl>
     201        </div>
     202       
     203       
     204</div><!--rightcol-->
     205</div><!-- Ende der Zweispaltigkeit -->
     206
     207<div class="center" style="opacity: 0.7">
     208        <a href="#archiv" onclick="$('#termine .archiv').slideDown(); $(this).slideUp();" class="go">Vergangene Termine anzeigen</a>
     209</div>
     210
     211<div class="archiv clear" style="display: none;">
     212<h2>Termin-Archiv</h2>
     213
     214        <div class="box termin clear-after">
     215                <p class="date rot left"><em>2013</em> 10.<br> Mai</p>
     216                <h4>Punchcard music</h4>
     217               
     218                Unser <a href="/de/rechnertechnik/lochkarten-edv#026">IBM 026-Card-Punch</a> ist in einem
     219                Konzert in Köln zu "hören!" Siehe <a class="go" href="http://www.punchcardmusic.de/"><b>punchcard music</b></a>
     220                <br>
     221                ein Auftragswerk von <a href="http://www.achtbruecken.de/">ACHT BRÜCKEN | Musik für Köln</a>
     222               
     223                <dl class="daten">
     224                        <dt>Termin</dt>
     225                        <dd class="termin">Freitag, den 10. Mai um 20:30 Uhr</dd>
     226                        <dt>Ort</dt>
     227                        <dd><a href="http://www.achtbruecken.de/programm/110853/">Kunst-Station Sankt Peter, Köln</a>
     228                </dl>
     229
     230        </div>
     231
     232
     233</div><!-- Ende Archiv -->
     234</div><!-- Ende Termine -->
     235       
  • shared/css-v6/pagestyles/startseite.css

    r299 r397  
    1212
    1313
    14 #content div {
     14#content div.startseiten-design div {
    1515    padding: 1em;
    1616    margin: 0;
     
    5252    font-weight: bold;
    5353}
     54
     55
     56/* Termine-Bereich, ab 14.05.2013 */
     57
     58#termine {
     59        /* Experiment: Helle Hintergrundbox */
     60        background-color: #EDF0F2;
     61        margin: 20px -40px -60px;
     62        padding: 30px 40px 60px;
     63}
     64
     65#termine h2 {
     66        text-align: center;
     67        margin-bottom: 1.4em;
     68}
     69
     70#termine div.termin.box {
     71        margin-top: 1em;
     72        margin-bottom: 1em;
     73}
     74
     75#termine div.termin, #termine div.termin p {
     76        /* zu schmale spalte fuer blocktext */
     77        text-align: left;
     78}
     79
     80#termine div.termin h4 /* id zur Bedeutungssteigerung */ {
     81    font-weight: bold;
     82    font-size: 100%;
     83    margin: 0;
     84    font-family: inherit; /* 04.01.10: Neue Header-Styles */
     85    border: none;         /*           neutralisieren     */
     86    color: #1A5160; /* gleiche Farbe wie Navilinks rechts */
     87}
     88
     89/* Details */
     90#termine dl.daten {
     91        font-size: 80%;
     92}
     93
     94#termine dl.daten dt {
     95        float: left; clear: left;
     96        width: 70px;
     97        text-align: left; font-weight: normal; color: #333333;
     98        margin-top: 0;
     99}
     100
     101#termine dl.daten dd {
     102        margin: 0 0 0 80px;
     103        padding: 0 0 0.5em 0;
     104        text-align: left;
     105}
     106
     107
     108/*#termine dl.daten.right {
     109        float: right;
     110        margin: 0 0 30px 30px;
     111        background-color: #eee;
     112        padding: 20px;
     113        width: 14em;
     114}*/
     115
     116/* Date Icon */
     117#termine div.termin {
     118        /* fuer p.date */
     119        margin-left: 52px;
     120}
     121
     122#termine div.termin p.date {
     123        margin: 0; padding: 0;
     124        background: url(/shared/img-v6/date.sprite.png);
     125        background-repeat: no-repeat;
     126        height: 45px;
     127        text-align: center;
     128        width: 42px;
     129        font: 11px/11px "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
     130        color: #333333;
     131        text-transform: uppercase;
     132        font-weight: bold;
     133}
     134
     135#termine div.termin p.date.rot {
     136        background-position: 0 -49px;
     137}
     138
     139p.date em {
     140        /* Jahr/Text im gruenen bzw. roten Bereich oben */
     141        color: white;
     142        font-style: normal;
     143        display: block;
     144        line-height: 15px;
     145        margin-bottom: 3px;
     146}
     147
     148#termine div.termin p.date.left {
     149        float: left;
     150        margin-right: 10px;
     151        margin-left: -52px;
     152}
  • shared/css-v6/pagestyles/termine.css

    r388 r397  
     1/* Improvisierte Styles fuer die uebergangsweise termine.php-Seite, die im Mai 2013 ausprobiert wurde */
     2
    13
    24/* Ueberschrift */
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License