|
|
| Line 1: |
Line 1: |
| - | [[Image:schloss_altstadt.jpg|520px|left]]<br>[[Image:IGEM_Team_Heidelberg_08.jpg|375px|right]]
| |
| | | | |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| - | <br>
| |
| | | | |
| | <html> | | <html> |
| - | <style type="text/css">
| |
| - | #nav, #nav ul {
| |
| - |
| |
| - | position:relative
| |
| - |
| |
| - | margin: 0px 0px 0px 0px; /* purpose: allow centering ul table */
| |
| - | padding: 0px 0px 0px 0px; /* es scheint, als liegen die eigentlichen border der tabelle weiter außen, und
| |
| - | angezeigt wird nur der zellhintergrund in schwarz */
| |
| - |
| |
| - |
| |
| - | display:table
| |
| - | /* purpose: ul doesn't stretch width 100% */
| |
| - |
| |
| - |
| |
| - | }
| |
| - |
| |
| - | #nav li {
| |
| - | display: table-cell; /* purpose: li behaves like table-cell. legt also die zeilen nebeneinander, mit
| |
| - | block wären sie untereinander */
| |
| - | position: relative; /* purpose: non-overlap li elements in ul */
| |
| - | list-style: none; /* purpose: remove default html list-style */
| |
| - |
| |
| - | }
| |
| - |
| |
| - | #nav li a {
| |
| - | display: block; /* purpose: non-overlap div on a */
| |
| - | margin: 0 0 0 0; /* purpose: spacing main menu items */
| |
| - | padding: 4px 21px ;
| |
| - | border:3px solid #000000;
| |
| - | background-color: black;
| |
| - | color: #00b0e6;
| |
| - | text-align: center;
| |
| - | text-decoration: none; /* purpose: remove underline from a */
| |
| - | font: bold 14.4px arial;
| |
| - | }
| |
| - |
| |
| - | #nav li a:hover {
| |
| - | background-color: black;
| |
| - | color: #f29400;
| |
| - | }
| |
| - |
| |
| - | #nav div {
| |
| - | position: absolute; /* Anordnung der Zellen, wenn relativ, dann alle übereinander. purpose: li of
| |
| - | div doesn't spread out */
| |
| - | display: none;
| |
| - | width: 7em; /* breite der ausklappboxen, paris hat sie auch nicht angepasst, man könnte
| |
| - | sie für jede seite extra anpassen...*/
| |
| - | opacity: 0.8;
| |
| - | filter: alpha(opacity=80);
| |
| - | background: black;
| |
| - | border:1px solid #000000;
| |
| - |
| |
| - | /* wenn man hier border und farbe eingibt, kann man einen rand um die ausklappenden kästen machen, der ist allerdings falsch formatiert*/
| |
| - |
| |
| - | }
| |
| - |
| |
| - | #nav span a, #nav div a { /* dieser teil macht die ausklappende leiste*/
| |
| - | position: relative; /* wichtig: wenn der Teil fehlt, dann wird nur ein link pro ausklapp gezeigt*/
| |
| - | display: block; /* purpose: a's in div have same width */
| |
| - | margin: 0;
| |
| - | padding: 5px 10px;
| |
| - | text-align: left;
| |
| - | font: 13px arial;
| |
| - | }
| |
| - |
| |
| - | #nav span a:hover, #nav div a:hover { /* dieser teil macht das hovern der ausklappenden leiste*/
| |
| - | color: #f29400;
| |
| - | }
| |
| - |
| |
| - | #nav span div {
| |
| - | position: relative;
| |
| - | margin: 0;
| |
| - | border: none; /* purpose: reset border to none */
| |
| - | border-top: 1px solid #5970B2; /* purpose: add a seperator */
| |
| - | border-bottom: 1px solid #5970B2; /* purpose: add a seperator */
| |
| - | opacity: 1.0; /* purpose: opacity already 0.8 by #nav div */
| |
| - | filter: alpha(opacity=100); /* purpose: opacity already 80 by #nav div */
| |
| - | }
| |
| - |
| |
| - | #nav span div a {
| |
| - | text-indent: 10px;
| |
| - | }
| |
| - |
| |
| - | #nav span div span div a {
| |
| - | text-indent: 20px;
| |
| - | }
| |
| - |
| |
| - | #nav .expand {
| |
| - | background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png');
| |
| - | background-repeat: no-repeat;
| |
| - | background-position: 95% 50%;
| |
| - | }
| |
| - |
| |
| - | #nav .collapse {
| |
| - | background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png');
| |
| - | background-repeat: no-repeat;
| |
| - | background-position: 95% 50%;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - |
| |
| - | <script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script>
| |
| - | <script type="text/javascript">
| |
| - |
| |
| - |
| |
| - |
| |
| - | function ddmsie() {
| |
| - | $("#nav ul").css('display', 'inline-block');
| |
| - | $("#nav li").css('display', 'inline');
| |
| - | $("#nav a").css('display', 'inline-block');
| |
| - | $("#nav a").hover(function () {$(this).css('background-color', '#d4e2ef')},
| |
| - | function () {$(this).css('background-color', '#649cd7')});
| |
| - | $("#nav div a").css('display', 'block');
| |
| - | $("#nav div").css('left', '0');
| |
| - | $("#nav div").css('top', '100%');
| |
| - | $("#nav span div").css('top', '0');
| |
| - | }
| |
| - |
| |
| - | function ddmozilla() {
| |
| - |
| |
| - | }
| |
| - |
| |
| - | function ddnav() {
| |
| - | $("#nav li").hover(
| |
| - | function () {
| |
| - | $(this).find("div:first").css('display', 'inline');},
| |
| - | function () {
| |
| - | $(this).find("div:first").css('display', 'none');}
| |
| - | );
| |
| - |
| |
| - | $("#nav span > a").toggle(
| |
| - | function () {
| |
| - | $(this).removeClass("#nav expand").addClass("#nav collapse");
| |
| - | $(this).css('background-color', '#99AAFF');
| |
| - | $(this).parent().find("div:first").css('display', 'block');},
| |
| - | function () {
| |
| - | $(this).removeClass("#nav collapse").addClass("#nav expand");
| |
| - | $(this).hover(
| |
| - | function () {
| |
| - | $(this).css('background-color', '#d4e2ef');},
| |
| - | function () {
| |
| - | $(this).css('background-color', '#649cd7');}
| |
| - | );
| |
| - | $(this).parent().find("div:first").css('display', 'none');
| |
| - | }
| |
| - | ).addClass("#nav expand");
| |
| - | }
| |
| - |
| |
| - | $(function () {
| |
| - | if(jQuery.browser.msie) ddmsie();
| |
| - | if(jQuery.browser.mozilla) ddmozilla();
| |
| - | ddnav();
| |
| - | });
| |
| - | </script>
| |
| | | | |
| | + | <!-- |
| | <div align="center" id="nav"> | | <div align="center" id="nav"> |
| | <ul> | | <ul> |
| Line 224: |
Line 57: |
| | </ul> | | </ul> |
| | </div> | | </div> |
| | + | --> |
| | </html> | | </html> |
| | | | |
| - | <br>
| |
| - | <br>
| |
| | | | |
| | <html> | | <html> |
"
