HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Problem mit der Navigation nach CSS Anwendung.

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Problem mit der Navigation nach CSS Anwendung.

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Doppelwhopper55
Häufiger Poster


Anmeldungsdatum: 29.07.2008
Beiträge: 36

BeitragVerfasst am: 31.07.2009 14:17:06    Titel: Problem mit der Navigation nach CSS Anwendung. Antworten mit Zitat

Hallöchen an die Profis

habe folgendes Problem.
Wenn ich folgende CSS Anwendung in meine Seite einbaue ist meine Navigation futsch.
Wohl bemerkt ist die Navigation Bestandteil des Styles. sodass bei jeder neuen Seite die Navigation automatisch vorhanden ist.

Habe schon mächtig rumgebastelt und probiert, aber ich kann den Fehler nicht finden.

Hier der Code:

Code:
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:830px;height:205px;
background-color:#efefef;
}
.div1

{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}


</style>
<title>Aktuelles</title>
<center></head>
<body>
<div class="div1">
<center><table border="0" cellspacing="0"cellpadding="0">
<tr>
<td><img style="border:0px;" src="http://file1.npage.de/001306/24/bilder/pict0001-ganz-klein.jpg" /></td>
<td><center><font color=#C01C25><h2>Spidi-Racewear Lederkombi</br> 2tlg. Grösse 52</h2>
<a href="http://doppelwhopper.npage.de/spidi-kombi_97986370.html" target="_blank">Hier geht's zum kompletten Angebot! </a></li></font></center></td>
<td><img style="border:0px;" src="http://file1.npage.de/001306/24/bilder/pict0003-ganz-klein.jpg" /></td>
</tr>
</table></center>
</div>


Das Problem ist dass der Hintergrund nach oben über den Rahmen hinaus geht.
Die Seite www.doppelwhopper.npage.de

P.S. Hab das jetzt erstmal prov. mit Html geregelt.
Würde aber gern diesen Code also Info.Boxen verwenden.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221

BeitragVerfasst am: 03.08.2009 08:49:54    Titel: Antworten mit Zitat

Blind geraten: mit dem Style
Code:
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:830px;height:205px;
background-color:#efefef;
}


sprichst du ja jedwedes DIV auf der gesamten Seite an. Nicht nur das mit der Klasse .div. Da deine Navi auch in einem DIV steckt, könnte ich mir vorstellen, dass daran liegen könnte.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Doppelwhopper55
Häufiger Poster


Anmeldungsdatum: 29.07.2008
Beiträge: 36

BeitragVerfasst am: 04.08.2009 18:46:36    Titel: Antworten mit Zitat

Hallo Frosty,

da bin ich dann wohl einem Verständnis Fehler auf dem Leim gegangen. Ich dachte das der Bereich der Navi dann für anderes dicht ist und nur der "übrige" Bereich belegt wird. Zumal ich davon ausging das die Größe über die Pixel bestimmt sind.

Was kann ich denn an dem Code ändern? Hatte schon versucht ihn in eine Datenzelle zu stecken....geht aber auch nicht:-(
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221

BeitragVerfasst am: 06.08.2009 08:21:02    Titel: Antworten mit Zitat

Versteh nicht so recht. Wenn du nicht möchtest, dass das DIV mit der Navigation von deinem div-style angesprochen wird, musst du es aussschließen.

statt div { ...}

dann .div {..}

noch besser .irgendeinenklassennamen {...}
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Doppelwhopper55
Häufiger Poster


Anmeldungsdatum: 29.07.2008
Beiträge: 36

BeitragVerfasst am: 18.08.2009 17:52:45    Titel: Antworten mit Zitat

Hallo Frosty,

zunächst denke ich ernsthaft darüber nach meinen Nick in Frusty zu ändern.

Habe jetzt tagelang herum experimentiert um zu einem Ergebnis zu kommen, zwar bin ich ein Stück weiter, aber dennoch ratlos. Stopfe ich eine Lücke tut sich die nächste auf:-(

Hier jetzt erstmal der Code von meinem gesamten aktuellen Style inklusive Navigation:

Code:
<html>
<head></head>
<body>
<html>
<head>
<meta name="description" content="Ein Kessel Buntes">
<meta name="author" content="Doppelwhopper">
<meta name="keywords" content="Doppelwhopper">
<meta name="robots" content="index, follow">


</head>
<style type="text/css">
body {background-image: url(http://file1.npage.de/001306/24/bilder/back000.gif);
}

}
.Stil2 {
   
background-image: url(http://file1.npage.de/001306/24/bilder/info239c.jpg);
background-repeat: repeat-x;
   font-family: "comic sans ms",  Arial, Helvetica, sans-serif;
   font-size: 20px; font-weight:bold;
   color: #AF220D;
   padding-top: 15px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;   
}
.Stil3 {
   font-family: "comic sans ms", Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: #FDFDF9;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
}

</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>



<style type="text/css">
 body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #4978FC;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
        border: 0px solid black;
    background-image: url(http://file1.npage.de/001306/24/bilder/back000.gif);
  }
  * 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;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; 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.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom: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;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    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 {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  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;
  }

 div-info

{
font-size:16px;color:#BE162B;font-family:Arial;
position:absolute;width:300px;height:250px;
background-color:#efefef;
}
.div1

{
border:3px solid #ff0000;
left:300px;top:150px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

.div2

{
border:3px solid #ff0000;
left:300px;top:450px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

div-info2

{
font-size:16px;color:#BE162B;font-family:Arial;
position:absolute;width:150px;height:550px;
background-color:#efefef;
}

.div3

{
border:3px solid #ff0000;
left:800px;top:150px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}




</style>
</head>

<body bgcolor="#4978FC">


<center>
  <div id="Rahmen"><ul id="Navigation">
    <li><a href="http://doppelwhopper.npage.de/willkommen_18273900.html"">Home</a></li>

    <li><a href="#Beispiel">Flohmarkt</a>
      <ul>

      <li><a href="http://myworld.ebay.de/doppelwhopper55/" target="_blank">Mein Ebay</a></li>
      <li><a href="   http://doppelwhopper.npage.de/aktuelles_44130573.html">Aktuelles</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Hobbys</a>
   <ul>
        <li><a href="http://doppelwhopper.npage.de/computer_44002657.html">Computer</a></li>
        <li><a href="http://doppelwhopper.npage.de/motorraeder_67345464.html">Motorräder</a></li>
            </ul>
     </li>
    <li><a href="#Beispiel">Politisches</a>
   <ul>
        <li><a href="   http://doppelwhopper.npage.de/krankenkassen_40255727.html">Krankenkassen</a></li>
       
      </ul>
     </li>

    <li><a href="#Beispiel">Kontakt</a>
    <ul>
        <li><a href="http://doppelwhopper.npage.de/impressum_26773186.html">Impressum</a></li>
        <li><a href="http://doppelwhopper.npage.de/guestbook.html">Gästebuch</a></li>
      <li><a href="http://doppelwhopper.npage.de/partner-links_89261889.html">Partner-Links</a></li>
        <li><a href="mailto:doppelwhopper55@gmx.de?subject=">Kontakt</a></li>
      </ul>
     </li>
     </ul><div></div></div></center>
     </body>



und hier die Ausführungs Tag der "infobox"


Code:

<div-info class="div1"><center>Test</center></div-info>
<div-info class="div2"><center>Test2</center></div-info>
<div-info2 class="div3"><center>Test3</center></div-info2>


Bis auf die unschöne Tatsache das sich die Navigation hinter der "Infobox" ausklappt funktioniert das ganze im Firefox. Der IE zeigt lediglich unterhalb der Navi den Textinhalt der "Infobox" an.
Okay das IE die Rundungen ohnehin eckig zeigt wäre ja noch okay.

Siehe Testseite


http://doppelwhopper.npage.de/zum_testen_74683227.html

Also hab ich das ganze Style mal mit einem Html-Validator gecheckt und bereinigt. Dabei blieb dann folgendes über:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

<head>
<meta name="description" content="Ein Kessel Buntes">
<meta name="author" content="Doppelwhopper">
<meta name="keywords" content="Doppelwhopper">
<meta name="robots" content="index, follow">

<title>Doppelwhoppers surf in</title>


<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>



<style type="text/css">
 body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-image: url(http://file1.npage.de/001306/24/bilder/back000.gif);
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
        border: 0px solid black;
    background-image: url(http://file1.npage.de/001306/24/bilder/back000.gif);
  }
  * 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;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; 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.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom: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;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    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 {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  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;
  }

 
  div-info

{
font-size:16px;color:#BE162B;font-family:Arial;
position:absolute;width:300px;height:250px;
background-color:#efefef;
}
.div1

{
border:3px solid #ff0000;
left:300px;top:150px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

.div2

{
border:3px solid #ff0000;
left:300px;top:450px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

div-info2

{
font-size:16px;color:#BE162B;font-family:Arial;
position:absolute;width:150px;height:550px;
background-color:#efefef;
}

.div3

{
border:3px solid #ff0000;
left:800px;top:150px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}



</style>
</head>



<center>
  <div id="Rahmen"><ul id="Navigation">
    <li><a href="http://doppelwhopper.npage.de/willkommen_18273900.html"">Home</a></li>

    <li><a>Flohmarkt</a>
      <ul>

      <li><a href="http://myworld.ebay.de/doppelwhopper55/" target="_blank">Mein Ebay</a></li>
      <li><a href="http://doppelwhopper.npage.de/aktuelles_44130573.html">Aktuelles</a></li>
      </ul>
    </li>

    <li><a>Hobbys</a>
   <ul>
        <li><a href="http://doppelwhopper.npage.de/computer_44002657.html">Computer</a></li>
        <li><a href="http://doppelwhopper.npage.de/motorraeder_67345464.html">Motorr&auml;der</a></li>
            </ul>
     </li>
    <li><a>Politisches</a>
   <ul>
        <li><a href="   http://doppelwhopper.npage.de/krankenkassen_40255727.html">Krankenkassen</a></li>
       
      </ul>
     </li>

    <li><a>Kontakt</a>
    <ul>
        <li><a href="http://doppelwhopper.npage.de/impressum_26773186.html">Impressum</a></li>
        <li><a href="http://doppelwhopper.npage.de/guestbook.html">G&auml;stebuch</a></li>
      <li><a href="http://doppelwhopper.npage.de/partner-links_89261889.html">Partner Links</a></li>
        <li><a href="mailto:doppelwhopper55@gmx.de?subject=">Kontakt</a></li>
      </ul>
     </li>
     </ul></div></center>
 
   
   


Den Tag für die Ausführung wie oben in der Testseite.

Ergebnis: wenn ich das "bereinigte" Style verwende:
Unverändert, allerdings sind dann meine bisherigen Seiten z.T. bis zur Unkenntlichkeit entstellt

Ich wüsste nicht was ich jetzt noch machen könnte, da wohl nur einem Profi die Fehler auffallen können.

Hat noch jemand einen Tip oder sollte ich mich doch eher dem Briefmarken sammeln widmen...lol;-)

Edit: Interessant noch dass das Background gif im FF starr bleibt.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221

BeitragVerfasst am: 19.08.2009 15:40:42    Titel: Antworten mit Zitat

Hai, also ich hab irgendwie schon nach 3 codezeilen die lust verloren, mich da durchzuwursteln - sorry. Aber ich kann vertehen, weshalb du verzweifelt bist.

Dir fehlen zuerst einmal die existenziellen <html>- und <body>-Tags. Bau die mal mit ein. Und dann kann ich dir nur wärmstens dieses CSS-Menü empfehlen. 50% weniger Quellcode und du hast sogar ein menü über 3 ebenen.

http://www.drweb.de/magazin/das-perfekte-menu-klappmenu-navigieren-in-dimensionen/
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Doppelwhopper55
Häufiger Poster


Anmeldungsdatum: 29.07.2008
Beiträge: 36

BeitragVerfasst am: 25.08.2009 18:43:34    Titel: Antworten mit Zitat

Hallo Frosty,

lol.....die Html und Body Tags hat der Validator rausgeschmissen!?! Hatte mich darüber auch gewundert.
Hab mir deine Empfehlung mal angeschaut, ich denke auch dass ein Wechsel sinnvoll ist. Hatte mit dem Javascript ohnehin von Beginn an nur meine Probs.

Vielen Dank für deine Mühe:-)
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Doppelwhopper55
Häufiger Poster


Anmeldungsdatum: 29.07.2008
Beiträge: 36

BeitragVerfasst am: 04.09.2009 17:48:09    Titel: Antworten mit Zitat

Also. das von Frosty empfohlene Klappmenü kann ich für meine Zwecke nicht verwenden da mein Freehoster die für den IE notwendige .htc Datei nicht zulässt.

Hab mich nun dann entschlossen auf die schönen runden Ecken zu verzichten ( IE kann sie eh nicht anzeigen) und habe mit gewöhnlichen HTML-Tabellen gearbeitet.

Trotzdem Danke für die Hilfe:-)
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.