gestrichelte Linien, divs und co

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • gestrichelte Linien, divs und co

    Hallo,

    ich habe mal wieder eine Frage. Ich habe per CSS folgendes realisiert:
    man fährt über einen Link und irgendwo wird ein Bild eingeblendet.

    Dabei habe ich zwei Probleme.
    1. Problem:
    Es funktioniert in IE und FF, aber wenn man drauf klickt, erscheint im Firefox so eine gestrichelte Linie um den ganzen div-container. Hier sieht man das:
    [Blockierte Grafik: http://img201.imageshack.us/img201/5386/prob9vh.th.png]

    das ist der code dazu:

    Quellcode

    1. <a href="?p=anfang" id="anfang"><div><img src="bilder/anfang.png" /></div>anfang</a>


    1. Problem:
    Wenn ich es anders programmiere, funktioniert es im Firefox so wie ich will (die gestrichelte Linie kommt nur noch um den Text), im INternetExplorer allerdins funktioniert der Hover-Effekt gar nciht mehr.

    code:

    Quellcode

    1. <div id="anfang"><a href="?p=anfang"><div><img src="bilder/anfang.png" /></div>anfang</a></div>


    das dazugehörige CSS-Dokument (auszugsweise):

    Quellcode

    1. #anfang {
    2. position:absolute;
    3. top:25px;
    4. left:220px;
    5. }
    7. #anfang img {
    8. border:0px solid #000000;
    9. }
    11. #anfang div {
    12. display:none;
    13. }
    15. #anfang:hover div {
    16. display:block;
    17. position:absolute;
    18. top:182px;
    19. left:354px;
    20. }
    Alles anzeigen


    Ich will einfach nur, dass man bei nem Klick die gestrichelte Linie nicht sieht. Wenns nicht geht, ist es auch nciht so schlimm, aber vielleicht kennt ja jemand eine Lösung.

    Danke im Voraus

    cya

  • block element wie das DIV sind im <a> Tag gar nicht erlaubt. Ich glaube der Validator würde da Fehler melden.
    Zumindest ist der Rahmen berechtigt, da das ganze div dere link ist.

    Ich kenne deine Slices zwar nicht, aber wie wärs denn mit

    Quellcode

    1. <a href="?p=anfang" id="anfang">anfang</a>


    Quellcode

    1. #anfang {
    2. display:block;
    3. background-image:url('bilder/anfang.png');
    4. background-position:top left;
    5. background-repeat:no-repeat;
    6. padding:10px;
    7. padding-left:100px;
    8. }

  • Thema hat sich wohl erledigt. Ich habe eine Möglichkeit gefunden.

    Man nehme das CSS-Attribut "outline" und setze es auf none. Jetzt dachte ich, dass die Navigierbarkeit per Tastatur verloren gehen würde.
    Nach ein bisschen suchen und lesen fand ich aber, dass man mithilfe von focus das Navigieren wieder herstellen kann.

    also meine Ergänzung:

    Quellcode

    1. #anfang {
    2. position:absolute;
    3. top:25px;
    4. left:220px;
    5. outline:none;
    6. }
    8. #anfang img {
    9. border:0px solid #000000;
    10. }
    12. #anfang div {
    13. display:none;
    14. }
    16. #anfang:focus {
    17. font-weight:bold; /* oder halt was anderes */
    18. }
    20. #anfang:hover div {
    21. display:block;
    22. position:absolute;
    23. top:182px;
    24. left:354px;
    25. }
    Alles anzeigen


    Wenn trotzdem jemand ne andere Möglichkeit kennt (außer den Hover mit JavaScript zu machen), dann kann er mir ja helfen.

    Vielleicht hilft das hier jemand anderem...

    cya

  • @ donut:

    das hat nix mit slices zu tun, ich habe das Hintergrundbild komplett in den body gelegt.
    Dann packe ich dadrauf div's die absolute sind und die Bereiche definieren. Den Effekt, dass ein Bild beim drüberfahren angezeigt wird, hatte ich vorher mit JavaScript.

    Nun gehts mit CSS:

    Hier die Seite:

    www.nachneun.de/abiv3/

    Und den Validator werde ich gleich mal anstrengen, mal schauen was der mir erlaubt und was nicht...

    //EDIT: Validator gefragt, er sagt genau das, was du dir schon gedacht hast.
    Meine Frage: Ich habe die div-container gegen <span>-Elemente ersetzt. Ist das ne gute Wahl?


    cya