Site auteilen in CSS und HTML von NoWissen, 25.08.2013 19:17

Site auteilen in CSS und HTML

NoWissen 25.08.2013 19:17

Hallo,

jetzt nochmal ausführlich!

das ist unvollständiger html code

den HTML Code habe ich nur teilweise gezeigt da die entscheidenden Punkte im oberen Teil des Listings sind.D.h. die Einbindung von navi.css bzw. navi.js

wir können die externen Resourcen nicht sehen

die externen Resourcen habe ich nicht dazu gegeben weil ich diese 1:1 von selfhtl übernommen hatte und lediglich Anpassungen in Rahmen-/Buttongröße und in der Beschriftung vorgenommen habe. War auch davon ausgegangen dass dies auch dort eingesehen wird. Aber zur Vollständigkeit hier jetzt mal als erstes ein Ausschnitt einer Site mit Gesamtlisting wie von mir übernommen und für mich angepasst.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Stichwortverzeichnis</title>  
<meta name="author" content="Dieter">  
<meta name="editor" content="html-editor phase 5">  
  
  
<style type="text/css">  
  
 body { background-color:#C6D6E6; }  
 a:link { text-decoration:none; font-weight:bold; color:#E00000; }  
 /* a:visited { text-decoration:none; font-weight:bold; color:#800000; }  
 a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }  
 a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; } */  
h1 {  
 font-size: larger;  
}  
  
  body {  
    font: normal 100.01% Helvetica, Arial, sans-serif;  
    color: black;  
  }  
  
    div#Rahmen {  
    width: auto;  
    padding: 0;  
  }  
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */  
    width: 48.7em;  
    w\idth: 47.1em;  
  }  
  div#Rahmen div {  
    clear: left;  
  }  
  ul#Navigation {  
    margin: 0; padding: 0;  
    text-align: center;  
  }  
  
  ul#Navigation li {  
    list-style: none;  
    float: left;  
    width: 2.58em;  
    position: relative;  
    margin: 0.2em; padding: 0;  
  }  
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */  
    margin-bottom: -0.4em;  
  }  
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
    margin-bottom: -0.1em;  
  }  
  
  ul#Navigation li ul {  
    margin: 0; padding: 0;  
    position: absolute;  
    top: 1.7em; left: 0.6em;  
    display: none;  /* Unternavigation ausblenden */  
  }  
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  ul#Navigation li:hover ul {  
    display: block;  /* Unternavigation in modernen Browsern einblenden */  
  }  
  
  ul#Navigation li ul li {  
    float: none;  
    display: block;  
    margin-bottom: 0.2em;  
  }  
  
  ul#Navigation a, ul#Navigation span {  
    display: block;  
    padding: 0.2em 0.5em;  
    text-decoration: none; font-weight: bold;  
    border: 1px solid black;  
    border-left-color: white; border-top-color: white;  
    color: maroon; background-color: #ccc;  
  }  
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */  
    width: 100%;  
    w\idth: 6.4em;  
  }  
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {  
    border-color: white;  
    border-left-color: black; border-top-color: black;  
    color: white; background-color: gray;  
  }  
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */  
    color: maroon; background-color: silver;  
  }  
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */  
    background-color: maroon;  
  }  
  
</style>  
  
<script type="text/javascript">  
if(window.navigator.systemLanguage && !window.navigator.language) {  
  function hoverIE() {  
    var LI = document.getElementById("Navigation").firstChild;  
    do {  
      if (sucheUL(LI.firstChild)) {  
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;  
      }  
      LI = LI.nextSibling;  
    }  
    while(LI);  
  }  
  
  function sucheUL(UL) {  
    do {  
      if(UL) UL = UL.nextSibling;  
      if(UL && UL.nodeName == "UL") return UL;  
    }  
    while(UL);  
    return false;  
  }  
  
  function einblenden() {  
    var UL = sucheUL(this.firstChild);  
    UL.style.display = "block"; UL.style.backgroundColor = "silver";  
  }  
  function ausblenden() {  
    sucheUL(this.firstChild).style.display = "none";  
  }  
  
  window.onload=hoverIE;  
}  
</script>  
  
</head>  
<body>  
  
  <h1>Internet und Stichwortverzeichniss</h1>  
  
  <div id="Rahmen"><ul id="Navigation">  
  
  
  
    <li><a href="intern_vz_a.html">A</a></li>  
  
    <li><a href="intern_vz_b.html">B</a>  
      <ul>  
        <li><a href="#Beispiel">Ba</a></li>  
        <li><a href="#Beispiel">Be</a></li>  
      </ul>  
    </li>  
  
    <li><a href="intern_vz_c.html">C</a></li>  
  
    <li><a href="intern_vz_d.html">D</a>  
      <ul>  
        <li><a href="#Beispiel">Da</a></li>  
  
        <li><a href="#Beispiel">Db</a></li>  
      </ul>  
    </li>  
  
    <li><a href="intern_vz_e.html">E</a></li>  
  
    <li><a href="intern_vz_f.html">F</a></li>  
  
    <li><a href="intern_vz_g.html">G</a></li>  
  
    <li><a href="intern_vz_h.html">H</a></li>  
  
    <li><a href="intern_vz_i.html">I</a></li>  
  
    <li><a href="intern_vz_j.html">J</a></li>  
  
    <li><a href="intern_vz_k.html">K</a></li>  
  
    <li><a href="intern_vz_l.html">L</a></li>  
  
    <li><a href="intern_vz_m.html">M</a></li>  
  
    <li><a href="intern_vz_n.html">N</a></li>  
  
    <li><a href="intern_vz_o.html">O</a></li>  
  
    <li><a href="intern_vz_p.html">P</a></li>  
  
    <li><a href="intern_vz_q.html">Q</a></li>  
  
    <li><a href="intern_vz_r.html">R</a></li>  
  
    <li><a href="intern_vz_s.html">S</a></li>  
  
    <li><a href="intern_vz_t.html">T</a></li>  
  
    <li><a href="intern_vz_u.html">U</a></li>  
  
    <li><a href="intern_vz_v.html">V</a></li>  
  
    <li><a href="intern_vz_w.html">W</a></li>  
  
    <li><a href="intern_vz_x.html">X</a></li>  
  
    <li><a href="intern_vz_y.html">Y</a></li>  
  
    <li><a href="intern_vz_z.html">Z</a></li>  
  
  </ul><div></div></div>  
  
  
<!-- erste Zeile einer Site der Page-->  
  
<ul style="list-style-image:url('gif/balls/b_blue.gif')" id="aachen">  
<li><p><b><font size="+1"><a title="Stadt" href="http://www.aach.de/" target="_blank">Aach</a></font></b></p></li>  
</ul>

</body>
</html>

Da dieses Listing so funktioniert und das Nachladen des HTML-Anteils nicht so funktioniert wie ich es mir vorstellte, habe ich eben versucht wie folgt zu verfahren (siehe auch):

</head>

<body>

<h1>Überschrift</h1>

Links zur Sitenavigation (z.B. <li><a href="intern_vz_a.html">A</a></li> usw. )

</ul><div></div></div>

**Ab hier steht dann der Site-Text**

</body>
</html>

die Scripteinbindung von navi.js ist auskommentiert

ist ein Fehler entstanden durch ewiges Experimentieren. Außerdem wird das Javascript auch nur bei verwenden des IE5 oder 6 benötigt - ändert im Grunde nichts an der Funktion.

Du verwendest inline Styleangaben

was ist daran falsch?

wäre es super, wenn Du uns die Sache online in Aktion zeigen könntest.

Leider nicht möglich da keine öffentliche HP

Vielen Dank für ein Onlinebeispiel und die Antwort, wie Du "dynmische" Navigation gedenkst aufzufassen / umzusetzen (siehe vorheriger Beitrag).

Grundsätzlich habe ich den Titel für die Navigation von SELFHTML übernommen wegen der Eindeutigkeit beim nachlesen auf der angegebenen Site. Dynamisch weil eine weitere Ebene eingeblendet und Benutzt werden kann.

Danke und Grüße zurück

NoWissen

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

NoWissen: Site auteilen in CSS und HTML

Beitrag lesen

Site auteilen in CSS und HTML

Site auteilen in CSS und HTML