Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>Probleme mit der Navigation, kann jemand behilflich sein ?

Probleme mit der Navigation, kann jemand behilflich sein ?

Chacky
Chacky03.06.0813:03
Hallo, ich bin neu hier und hoffe doch in der richtigen Rubrik gelandet zu sein !
Ich habe meine HP etwas überarbeitet, arbeite aber zu gerne in Frames, ich weiß nicht mehr Zeitgemäß, aber dennoch für mein Thema Barierefreier.
Vorher hatte ich die Navigation in Flash und jetzt versucht sie umzuprogrammieren. Allerdings kommt das Untermenü schlecht rüber. Also die Schrift unten vom Untermenü ist ziemlich dicht am Rand ran und bei einigen Win-Usern nur 3/4 zu sehen. Ich primel schon seit Tagen und kriege das einfach nicht hin. Könnte mal jemand schauen, wie ich das gelöst bekomme. Es wäre total nett von Euch.

Liebe Grüße Chacky.



0

Kommentare

MacSebi
MacSebi03.06.0814:06
Wie kann Barrierefreiheit mit einem Thema zusammenhängen?

Ansonsten versuchs mal mit mehr padding/margin im css...
„German by nature - Kiwi by heart“
0
Chacky
Chacky03.06.0814:30
Hallo MacSebi !
Danke für Deine Antwort, aber ich bin leider nicht so sehr gewandt im HTML .... sorry....

wo und wie soll ich da mehr padding geben ?

<style type="text/css">
#topNavigation {
margin-left:10px;
float:left;
border-bottom: 1px solid #f1f1f1;
}
.bottomNavigation {
margin-left:10px;
float:left;
width:800px;

}

body {
background-image:url(bg.gif);
margin:0;
}
#clock {
font-family:Arial;
color:#ffffff;
margin-top:5px;
margin-right:15px;
font-size:10pt;
}
    ul {
        margin:0;
        padding:0;
    }
    li {
        margin:0;
        margin-right:10px;
        padding:2;
        list-style-type:none;
        float:left;
    }
    li a {
        color:#ffffff;
        text-decoration:none;
        font-size:11px;
        color:#ffffff;
        font-family:Geneva, sans-serif;
    }
    li:hover {
        background-color:#7093B5;
    }

</style>

Deine Hilfe wäre nett, Danke von Chacky, der schon bald verzweifelt und nicht mehr durch den Quelltext steigt.

0
Stefan S.
Stefan S.03.06.0814:47
MacSebi meint evt., Du sollst alle Elemente mit padding:0px und margin:0px versehen, die Du vorher nicht definiert hast.

Es kann auch ein Problem mit unterschiedlichen Zeilenhöhen/-Abstand sein.
Probier mal line-height:1.0em in der Navigation und Unternavigation
0
gibtsNicht03.06.0815:00
Bitte jetzt nicht persönlich nehmen, aber darf ich meine Meinung zum Quelltext Deiner Seiten geben...?

Zusammengefasst bin ich überrascht, dass die Browser da überhaupt was darstellen. Alle Unterseiten, die ich mir mal so im Quelltext angeschaut habe, haben fundamentale Fehler im Quelltext - mal davon abgesehen, dass der Quelltext an sich mit seinen vielen Tabellen und font-Anweisungen auch nicht "schön" ist.

Mal rausgegriffen zwei Beispiele:

Die Seite "Warum Vorurteile" beginnt wie folgt:

<head>
<html>
  <title>Vorurteile</title>
</head>
 <link rel="stylesheet" type="text/css" href="links.css">
</head>

Erstens beginnt die Seite mit head gefolgt von html (andersrum würde ein Schuh draus) und zweitens wird zum Ausgleich das eine head gleich zweimal geschlossen

Oder auch die ja nicht wirklich große Datei für den Footer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>feat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body
 <link rel="stylesheet" type="text/css" href="links.css">
</head>

Hier wiederum wird der head geschlossen, dann wird im geöffneten body (dem allerdings ein ">" fehlt) ein link zum Stylesheet gemacht (der aber in den head gehört) und danach der head ein zweites Mal geschlossen.

Wenn Du magst bastle ich Dir für den footer (aber nur für den) mal ein Beispiel, wie sowas aussehen sollte - bevor das HTML an sich nicht stimmt ist das Design-Ergebnis eher dem Zufall überlassen

0
Chacky
Chacky03.06.0816:43
Hi,
Bitte jetzt nicht persönlich nehmen, aber darf ich meine Meinung zum Quelltext Deiner Seiten geben...?
Nein ich nehme das nicht persönlich und weiss, dass noch viele Fehler drinne sind, denn die HTML-Seiten sind ja auch noch die alten und die wollte ich wenn Zeit ist, mal richtig überarbeiten. Aber leider bin ich der Nichtprofie !

Mir ging es nur um die Navigation.
haben fundamentale Fehler im Quelltext - mal davon abgesehen, dass der Quelltext an sich mit seinen vielen Tabellen und font-Anweisungen auch nicht "schön" ist.
Die Tabellen sollten schon so bleiben (die Außentabellen). So liegen die Seiten richtig fest, allerdings werden auch da noch Fehler ausgebügelt. Und so wie die 2 Außentabellen des Textfeldes sind, dannach, also mit der Breite, habe ich auch die neue Navigation angepasst. Und gerade darum ging es mir : das, dass Untermenü nicht sauber dargestellt wird.
Wenn Du magst bastle ich Dir für den footer (aber nur für den) mal ein Beispiel, wie sowas aussehen sollte - bevor das HTML an sich nicht stimmt ist das Design-Ergebnis eher dem Zufall überlassen.

Das wäre total nett von dir, nehme das Angebot gerne an. Somit kann ich dann sehen, ob ich keine Fehler in die anderen Seiten reinhaue.

[code="Stefan"]Du sollst alle Elemente mit padding:0px und margin:0px versehen, die Du vorher nicht definiert hast.[/code]
Das habe ich probiert und da ist das Untermenü noch weiter runter gerutscht, mag sein das es doch an der Zeilen höhe liegt, ich probiere es demnächst auf nem Testserver.
Jetzt habe ich erst einmal die Flash-navigation wieder reingeladen, damit die Forenuser wieder richtigen Empfang haben. Waren ja nur einige 4 Dosenuser, davon 2 mit Vista .. sorry...

Eigentlich habe ich immer hin und her überlegt, ob ich die Seite mal ganz anders gestalte, aber noch nicht so die richtige Idee gehabt und irgendwie hänge ich auch gerade an der Farbkombi und mit Frames oder iframes damit komme ich am besten klar. Zudem bräuchte ich viel Zeit, da dort ne Menge Inputt drin steht.
Demzufolge wollte ich erst nur die Navi, verändern und auch etwas erweitern.

Gruß Chacky.



0
gibtsNicht04.06.0809:33
Versprochen ist versprochen - hier HTML und CSS für Deine Fußzeile. Ist zwar nicht ganz 100% so, wie ich es machen würde (feste Schriftgrößen in Pixel und nur XHTML Transitional statt Strict) - aber in der Form könnte es auch in Deinem bestehenden Frameset eingebaut werden. Inhalt der HTML-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; iso-8859-1" />
    <title>Fusszeile</title>
    <meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"' />
    <meta name="language" content="de" />
    <link rel="stylesheet" type="text/css" href="footer.css" media="screen,projection" title="Stylesheet" />
  </head>
  <body>
    <p id="Impressum">
      <a href="imp_001.html" target="mainFrame">Impressum</a>
    </p>
    <p id="Copyright">
      &copy; Selbsthilfegruppe Epilepsie Pritzwalk 2008
    </p>
  </body>
</html>

Wesentliche Änderungen gegenüber Deinem HTML:
- Seite ist valider HTML-Code - kann man leicht für jede seiner Seiten testen unter http://validator.w3.org/
- Die Seite selbst enthält keinerlei Design-Beschreibungen mehr (keine Font-Tags, keine Tabelle zum positionieren oder ähnliches). Stattdessen geht es nach dem ganzen (wichtigen) Header nur um den Inhalt.
- der Inhalt besteht aus zwei verschiedenen Dingen (Impressum und Copyright) - daher werden diese beiden auch logisch in zwei Absätze getrennt

Und dazu passend die footer.css:

body  {
  background-color:#7da4ca;
  color:#fff;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
}

p {
  padding:0;
  height:18px;
  margin-top:1px;
  margin-bottom:1px;
  margin-left:1em;
  margin-right:1em;
  font-size:12px;
  line-height:16px;
  color:#fff;
}

p#Impressum {
  float:left;
}

p#Copyright {
  text-align:right;
}

a:link, a:visited, a:active {
  font-size: 98%;
  color:#000
}

a:hover {
  text-decoration:none;
  color:#fff;
}

Nur hier wird bestimmt, wie das Design aussehen soll. Wesentlich hierbei ist insb.
- keine Hintergrundgrafik mehr - die war eh nur einfarbig, warum also ein Bild verwenden?
- mit p#Impressum und p#Copyright spreche ich direkt die beiden Absätze an - float:left; bewirkt, dass der folgende Absatz neben und nicht unter das Impressum kommt. Im Copyright dann machen wir den Text noch rechtsbündig
- Alles positionieren erfolgt über die margin- und padding-Teile

Generell sind der HTML-Validator und de.selfhtml.org Deine besten Freunde
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.