4. JS: Ausfälle ; DESIGN: Was fehlt hier?

JS: Ausfälle ; DESIGN: Was fehlt hier?

  • S

    Vorerst hier mal eine Testhomepage von mir: www.faulerhund.net/sidewinder/test

    1. Bei Browsern wie dem Opera gibt es Probleme in der Menüzeile. Allerdings weiß ich nicht ob das am JavaScript liegt welches ich dort benütze. Eine Zelle der Tabelle sieht so aus:

    <tr>
    <a href="./index.php?action=1">
    <td id="nav_home" ONMOUSE_OVER="window.document.all.nav_home.background='./pictures/tbbgover.jpg'" ONMOUSEOUT="window.document.all.nav_home.background='./pictures/body.jpg'" style="height:20px; width:156px; text-align:center; padding:0px">
     .:home:.
     </td>
     </a>
</tr>

    Liegt das am JS oder habe ich da etwas anderes falsch gemacht?

    2. Wenn man im IE ganz schnell nach oben und wieder nach unten im Menü fährt fällt das Menü plötzlich ganz aus. Es lässt sich nicht mehr benützen und der JS-Hover-Effekt fällt auch weg.

    Edit: Okay funktioniert im Internet doch, nur dauert das etwas lange zu laden, kann man diese Bilder nicht einmal am Anfang in den Cache laden? Wenn ja wie funktioniert das?

    BTW: Fällt jemanden noch ein wie man diesen Hover-Effekt mit CSS macht wäre mir das lieber als mein JS - geht dann auch in Opera & Co.

    3. Eine Design-Frage: Irgendwie sieht diese Homepage nicht besonders aus. Was könnte man eurer Meinung nach verändert, damit sie etwas grafisch anspruchsvoller wirkt?

    MfG SideWinder

    [ Dieser Beitrag wurde am 15.05.2003 um 15:42 Uhr von SideWinder editiert. ]

    0
  • S

    Zwischen ONMOUSEOVER ist ein Unterstriche - ansonsten lässt er mich das Posting nicht posten 😕

    MfG SideWinder

    0
  • S
    Mod

    sorry, aber warum JS für die navigation?
    was bringts, ausser probleme?

    mach n schönes CSS oder ein reines HTML Menü - die sind nicht nur kompatibler zu browsern sondrn auch noch viel schöner 🙂

    PS: im Opera kann man nicht mal auf die links klicken.

    PPS:
    document.all
    kann nicht jeder browser - nur der IE IIRC

    0
  • M

    also den hover - effekt kriegste auch mit css / mit tabellen hin. schau doch einfach mal auf www.selfhtml.org nach, da steht das alles.. code müsste ich dir jetz erst raussuchen...

    mfg

    0
  • S

    Okay, aber wie kann ich diesen Hover-Effekt mit CSS erzielen? Wollte eigentlich gar kein Java Script - wollte bloß dass die Zelle eine andere Hintergrundfarbe bekommt wenn man mit der Maus über ihr ist.

    Und mir wurde gesagt, das geht nur mit JS... aber ich schau mich mal auf www.selfhtml.org um, ob es nicht doch mit CSS funktioniert.

    MfG SideWinder

    0
  • C

    Also das mit CSS wurde ja schon gesagt.

    Zum Design:
    - Hintergrundbild raus (Wirkt anstregend)
    - Auf maximal 2 Schriften konzentrieren. (Copyright, Inhalt, Headline).

    Ansonsten isses sehr schlicht, was aber durchaus ok ist.
    Ohne viel Schnickschnak läuft es halt auf mehreren Browsern ohne Probleme. Ansonsten ist in der C't (8/2003, ab Seite 87) ein Artikel über Webdesign,
    was man wo einsetzen, Unterschiede zu Browsern etc. Ist ganz hilfreich.

    [ Dieser Beitrag wurde am 15.05.2003 um 17:18 Uhr von CarstenJ editiert. ]

    0
  • S

    Ja ich finde auch das es fast etwas zu schlicht ist. Naja, mal sehen. Ich bau jetzt erst einmal die NAV-Zeile um. Danach ändere ich die Hintergründe in eine schlichte farbe wie weiß und danach kümmere ich mich um Anderes 🙂

    Danke vorerst, ich melde mich dann wieder!

    MfG SideWinder

    0
  • M

    hastes mit der navi hinbekommen???

    wenn net such ich dir dat nochmal raus... bin aber erst in ner stunde bis 2 stunden wieder da

    mfg

    0
  • ?

    ich find die seite nicht gut. die schrift z.B. ist auf dem hintergrund schlecht lesbar

    0
  • S

    So also, das geht offenbar nur mit CSS wenn ich die TD-"Klasse" verändere, was wiederrum nicht per style="" funktioniert.

    Also habe ich ab jetzt eine externe *.css-Datei.

    Ist soetwas als Grundform schon gut, oder ist das grundlegend falsch? Und hat eine CSS-Datei keinen head oder soetwas? Fängt die gleich gnadenlos mit dem ersten Element an?

    body { background-image : url (./pictures/background.jpg);
       font-family : sans-serif;
       font-size : medium;
       font-style : normal;
       font-variant : normal;
       font-weight : normal;
       letter-spacing : normal;
       position : absolute;
       text-align : left;
       text-decoration : none;
       text-indent : 0px;
       text-transform : none;
       vertical-align : baseline;
       white-space : pre;
       word-spacing : normal;
}

#head { position : absolute;
        border-color : black;
        border-style : inset;
        border-width : 2px;
        top : 20px;
        left: 20px;
        height: 100px;
        width: 980px;
}

#body { position : absolute;
        border-color : black;
        border-style : none;
        border-width : 2px;
        top : 140px;
        left: 20px;
        height: 500px;
        width: 980px;
}

#nav { position : absolute;
       border-color : black;
       border-style : inset;
       border-width : 2px;
       top : 0px;
       left: 0px;
       height: 340px;
       width: 175px;
}

#login { position : absolute;
         border-color : black;
         border-style : inset;
         border-width : 2px;
         top : 360px;
         left: 0px;
         height: 140px;
         width: 175px;
}

#main { position : absolute;
        border-color : black;
        border-style : inset;
        border-width : 2px;
        top : 0px;
        left: 195px;
        height: 500px;
        width: 785px;
}

#copyright { position : absolute;
             top : 645px;
             left: 20px;
             height: 23px;
             width: 980px;
}

    Per id="bla" füge ich die Styles dann den einzelnen DIV zu. Die Body-Klasse soll mehr allgemein dienen, damit ich nicht immer alles angeben muss -> vererbt wird doch unter CSS oder?

    BTW: Kann ich nun main zB noch Unterklassen hinzufügen, wie zB main.ueberschrift und main.text oder muss ich da wieder eigene bauen?

    MfG SideWinder

    [ Dieser Beitrag wurde am 16.05.2003 um 16:27 Uhr von SideWinder editiert. ]

    0
  • F

    btw: meistens nimmt man nicht id und # sondern class und . (id muss ja eindeutig im Dokument sein)

    0
  • O

    hatte dir vor 500 Jahren mal dzu ein Beispielcode gepostet 🙂 Gibt es doch!

    BTW. deine aktuelle navi funzt auch im moz net

    bis dänn, O'Dog

    0
  • S

    @O'Dog: Jo, hatte ich ganz vergessen :). Aus der kann ich auch noch was rausholen.

    @flenders: Die id ist bei mir eindeutig. Frage ist das Tag <body> und die ID body eindeutig oder nicht?

    Also:

    body {} und
    #body {}

    Wo sind weitere Vorteile von CLASS?

    MfG SideWinder

    0
  • F

    du kannst eben mehrere Bereiche erstellen, die alle den selben Style verwenden, z.B. 20 verschiedene Textboxen alle mit class="textbox"
    Ich denke mit dem boy und #body sollte es keine Probleme geben, bin mir aber nicht sicher 🙄 (kannst aber doch auch einfach sicherheitshalben nen anderen Namen wählen)

    0
  • S

    Aha, also für TD, etc. dann lieber CLASS für DIV die alle einen einzelnen Style brauchen lieber ID 🙂

    MfG SideWinder

    0
  • S

    Also JS ist raus. Habe jetzt O'Dogs Code etwas umgebaut: http://www.faulerhund.net/sidewinder/test .

    Probleme

    Seht euch mal den Unterschied IE zu Opera an - was kann ich tun, damit das gleich aussieht? Bei www.linuxfaqs.de gibts auch keine Probleme - die haben aber so ziemlich genau den gleichen NAV-Code wie ich nun :(.

    Weitere Fragen:

    Ist der Hintergrund nun angenehmer?
    Was kann man sonst noch tun um das Design besser zu machen (Schriften werde ich noch ändern). Die c't gibts leider nicht mehr - ob man da was scannen könnte...

    MfG SideWinder

    [ Dieser Beitrag wurde am 17.05.2003 um 19:05 Uhr von SideWinder editiert. ]

    [ Dieser Beitrag wurde am 17.05.2003 um 19:07 Uhr von SideWinder editiert. ]

    0
  • O

    Jap, im Mozilla sieht deine Seite jetzt schön schlicht aus 😃

    Hier ist ein umfangreiches Tutorial zu CSS von der iX http://www.heise.de/ix/artikel/2003/03/050/

    So auf den ersten Blick würd' ich sagen das einer deiner Probleme die Vererbung von CSS innerhalb verschachtelter HTML-Tags ist.

    O'Dog

    0
  • S

    Aha, aber welche Tags werden da vererbt dass der Opera so einen Mist daraus macht und der IE das perfekt darstellen kann?

    ---

    Gibt es im Internet eigentlich auch Web-Design-Tutorials? In diesem Punkt habe ich nämlich dringendst Nachhilfe nötig :D.

    MfG SideWinder

    0
  • O

    Original erstellt von SideWinder:
    **Aha, aber welche Tags werden da vererbt dass der Opera so einen Mist daraus macht und der IE das perfekt darstellen kann?
    **

    Das liegt wohl daran das der IE das Falsch darstellt. Wenn du eine Standardkonforme Seite bauen willst ist es besser nicht zuerst im IE zu testen sondern Mozilla (Opera sollte es auch tun) und später nur die Bugs des IE zu berücksichtigen (eventuell ein paar Sachen rausnehmen). Der IE ist zu fehlertolerant.

    Im Moz hat es beispielsweise einiges gebracht den Style "white-space : pre;"
    aus dem Body herauszunehmen (da es im body definiert ist gilt dieser style auch für alle Tags innerhalb des bodies, wenn si denn nicht überschrieben wird). Wobei ich hier den Parameter "pre" nicht für sehr vorteilhaft halte, besser ist es Zeilenumbrüche mit "br" expliziet anzugeben.

    O'Dog

    0
  • S

    Hab jetzt noch einiges geändert, was haltet ihr nun davon? Ist das CSS nun okay?

    MfG SideWinder

    0
Anmelden zum Antworten