[Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

penguinpower · 05.06.2011

Hallo zusammen

Ich habe mich durch folgendes Tut (Tutorial Navigation mit Grafiken) gearbeitet und es funktioniert auch alles soweit (Links und hover)... Mein Problem ist, dass es unter meiner Auflösung ( 1024 x 768 ) super funktioniert, allerdings unter der Auflösung von meinem Dad ( 1366 x 768 ) zwar immer noch funktioniert, aber die hover-Buttons alle ziemlich weit nach links versetzt sind. D.h. ich müsste es für verschiedene Auflösungen anpassen. Problem allerdings ist, dass ich

damit auch nicht jede Auflösung abdecken würde
es nicht sehr benutzerfreundlich ist, wenn man beim Aufruf der Website erst einmal die Auflösung herausfinden müsste und dann den entsprechenden Punkt in einer Liste auswählen müsste.

Kann man das nicht irgendwie eleganter lösen? Ich habe es auch schon mit prozentualen Angaben versucht, was allerdings total in die Hose ging (Links und hover funktionierten nicht mehr). Wäre es vielleicht sogar sinnvoller, die Buttons auszuschneiden oder die Navi zu slicen? Genau das wollte ich ja eigentlich umgehen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Hauptseite</title>
<!-- CSS fuer Styles -->
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css"></style>    
</head>
<!-- Navigation Start -->
<div align="center" class="navigation">
<img src="header.png" alt="Navigation" width="1024" height="190">
  <ul id="navigation">
      <li><a href="index.html" title="Hauptseite" class="li-hauptseite">Hauptseite</a></li>
      <li><a href="seite1.html" title="Seite 1" class="li-seite1">Seite 1</a></li>
      <li><a href="seite2.html" title="Seite 2" class="li-seite2">Seite 2</a></li>
      <li><a href="seite3.html" title="Seite 3" class="li-seite3">Seite 3</a></li>
     <li><a href="seite4.html" title="Seite 4" class="li-seite4">Seite 4</a></li>    
  </ul>
</div>
</body>
</html>

CSS:

Code:

div#navigation{
width:1024;
margin:0 auto;
}


ul#navigation{
    display:block;
    height:190px;
    margin:-134px 0 0 244px;
    position:absolute;
    width:1000px;
}

ul#navigation li{
    border:none;
    display:block;
    float:left;
    text-decoration:none;
    text-indent:-9999px;
}

ul#navigation li a{
    border:none;
    display:block;
    float:left;
    height:45px;
    text-decoration:none;
    text-indent:-9999px;
}

ul#navigation li a:hover{
    border:none;
    display:block;
    height:45px;
    text-decoration:none;
    text-indent:-9999px;
}

ul#navigation li a.li-hauptseite{
    height:90px;
    margin:0px 0 0 0px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-hauptseite:hover,
ul#navigation li.li-hauptseite-active {
    background:transparent url('navigation.png') no-repeat scroll 0px 0px;
    height:90px;
    margin:-10px 0 0 0;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite1{
    height:90px;
    margin:0px 0 0 170px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite1:hover,
ul#navigation li.li-seite1-active {
    background:transparent url('navigation.png') no-repeat scroll -150px 0px;
    height:90px;
    margin:-10px 0 0 150px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite2{
    height:90px;
    margin:0px 0 0 340px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite2:hover,
ul#navigation li.li-seite2-active {
    background:transparent url('navigation.png') no-repeat scroll -300px 0px;
    height:90px;
    margin:-10px 0 0 300px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite3{
    height:90px;
    margin:0px 0 0 510px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite3:hover,
ul#navigation li.li-seite3-active {
    background:transparent url('navigation.png') no-repeat scroll -450px 0px;
    height:90px;
    margin:-10px 0 0 450px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite4{
    height:90px;
    margin:0px 0 0 680px;
    position:absolute;
    width:140px;
}

ul#navigation li a.li-seite4:hover,
ul#navigation li.li-seite4-active {
    background:transparent url('navigation.png') no-repeat scroll -600px 0px;
    height:90px;
    margin:-10px 0 0 600px;
    position:absolute;
    width:140px;
}

Nicht wundern wegen Seite1, Seite2 usw. Mir ist Moment das Design/Layout wichtiger als die Namen der Menüpunkte :uhm: Btw ich hatte schon mal HTML/CSS-Erfahrung, habe es aber für mehrere Jahre links liegen lassen. Deswegen bitte nicht meckern von wegen "hätte man noch besser lösen können".

Liebe Grüße,
~ pengu

cebito · 05.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

Bevor ich jetzt hier anfange zu suchen...

Code:
Code:

div#navigation{ width:1024; margin:0 auto; }

...schreib doch da mal bitte dazu, auf welche Maßeinheit sich die 1024 beziehen soll. px, %, pt oder vielleicht km?

penguinpower · 08.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

bump
Gibt's denn gar keine Lösung?

Alle Einheiten in px.

Myhar · 08.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

Hast du den von cebito angemerkten Fehler schon ausgebessert?
Und ich würde vielleicht einmal anfangen, die Menüpunkte relativ zueinander positionieren, dann ist es relativ egal, welche Auflösung ein user hat :-D
Ansonsten wäre eine online Testseite nett, damit man sich das nicht selber zusammenbauen muss.

L. G.

penguinpower · 10.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

So, nach einiger Zeit melde ich mich mal wieder. Hatte den gefundenen Fehler von cebito schon ausgebessert und jetzt habe ich mich an einem position:relative probiert. Immer noch das selbe Ergebnis :\

Hier die Testseite:

Hoffe, ihr könnt das Problem erkennen.

hubspe · 14.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

Moin,

persönlich halte ich die Art des Heransgehens an das Problem leider für ein komplettes Gewürge. Das Tut ist in der Hinsicht auch nicht gerade hilfreich.

Warum man da ein großes img nimmt und wild rumpositioniert erschließt sich mir nicht, wobei relative Verschiebungen i.d.R. nur Verschlimmbesserungen der eh schon schlimmen absoluten Positionierungen sind.

Mach doch erst mal ne sinnvolle Struktur mit einem alles umschl. div#wrapper, der zur horizontalen Zentrierung genutzt wird und alles andere drinhockt.
Die navi ist im header, also definiere einen solchen und gib dem Höhe/Breite und den blauen HG (oder das rein Blaue als HG-Bild).
Die navi positionierst du, indem du die ul rechts floatest und li links (damit sich die Reihenfolge der Links nicht umkehrt wenn du nur li rechts floatest.
Über margin-top wird das Menü an die richtige Stelle geschoben.

Wenn ich das richtig sehe ist bei dir der Text mit im Bild.
Sinnvollerweis braucht man da noch ein zusätzliches Element (ein leeres span, was die HG-Grafik bekommt).

Schau dir mal hier an, wie man sowas sinnvoll umsetzt. position:absolute brauchst du da nur, um die Grafik über den Linktext zu schieben.
Die Auflösung ist dabei völlig wurscht, funktioniert überall problemlos

Targo64 · 15.06.2011

AW: [Navigation mit Grafiken] Nur auf EINE Auflösung beschränkt?

Habe jetzt nicht die Erklärung für dein Problem, aber versuch mal deinen DIV Container Navigation zu ändern ( align="center" ) raus dann sollte es klappen.

HTML:

<div class="navigation">
<img src="http://penguinpower.k.gp/header.png" alt="Navigation" width="1024" height="190">
  <ul id="navigation">
      <li><a href="index.html" title="Hauptseite" class="li-hauptseite">Hauptseite</a></li>
      <li><a href="seite1.html" title="Seite 1" class="li-seite1">Seite 1</a></li>
      <li><a href="seite2.html" title="Seite 2" class="li-seite2">Seite 2</a></li>
      <li><a href="seite3.html" title="Seite 3" class="li-seite3">Seite 3</a></li>
     <li><a href="seite4.html" title="Seite 4" class="li-seite4">Seite 4</a></li>    
  </ul>
</div>