✔ Horizontales Menü aus mehreren Grafiken

Status
Nicht offen für weitere Antworten.
A

andromeda-wega

Grünschnabel
Hallo,
ich brauche Hilfe bei einem horizontalen Menü, welches sich aus mehreren Grafiken, welche horizontal verbunden werden sollen, aufbaut.
Die Grafiken sind:
  • die Menü-Leiste, welche links und rechts die eigentliche Navigation mit der Seite verbinden, diese soll relativ zum Anzeigefenster gestreckt werden (1px-breite Grafik)
  • der rechte Teil der Navigation, welcher als Übergang eingesetzt werden soll
  • der entsprechende linke Teil
  • der Hintergrund für die Links, diese soll auch gestreckt werden (1px-breite Grafik)
Das ganze soll schematisch so aussehen, wobei die Links dann auf der Menü-Leiste erscheinen sollen:
Code: 
    gestreckt                       gestreckt                        gestreckt
<====Leiste====>[Übergang-links]<===Menü-Leiste===>[Übergang-rechts]<===Leiste===>
                                      Links
Habe das ganze schon ausprobiert, konnte es so aber nie wirklich erreichen.
Hier der HTML-Code auf das wesentliche reduziert:
HTML: 
<html>
  <head>
    <style type="text/css">
      #menu {
        width: 100%;
      }

      #bar-left {
        width: 40%;
      }

      #bar-right {
        width: 30%;
      }

      #menu-left {
      }

      #menu-right {
      }

      #menu-bar {
        background-image: url("menu.png");
        width:                    30%;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <img id="bar-left"  src="bar.png" />
      <img id="menu-left" src="menu-left.png" />
      </div>
      <div id="menu-bar">
        Link|Link|Link
      </div>
      <img id="menu-right" src="menu-right.png" />
      <img id="bar-right"  src="bar.png" />
    </div>
  </body>
</html>
Problem: Ich kriege die Grafiken nicht richtig positioniert, ich hab es mit floats versucht, dann mit absoluter Position und Angabe der Position von oben und links bzw. rechts, es hat nie geklappt.
Hoffe hier weiß jemand Rat, will nicht am Ende noch auf Tabellen zurück greifen müssen. ;)
Danke schonmal im vorraus.
 
Zuletzt bearbeitet:
Hi,

kannst du die Seite evtl. mal hochladen, oder das Grafik-Set hier als ZIP-Datei zur Verfügung stellen, damit man auch einen Eindruck davon gewinnen kann, wie das Menü im Detail auszusehen hat?

Ansonsten solltest du es mal über den Weg versuchen, die Grafiken nicht als Grafikelement img im HTML-Code einzubinden, sondern sie im Stylesheet als Hintergrundbild für einzelne Blockelemente, wie z.B. DIVs, zu definieren, und sie mitels background-repeat in der gewünschten Richtung zu wiederholen.
 
Servus,

du könntest es so versuchen:
HTML: 
.menubg {
 background-image: url(../deinegrafik.gif);
 background-repeat: repeat-x;
 height: 20px;
 text-align: center; /* zentrierte Ausrichtung innenliegender Elemente */
}
.menuspacer1 {
 background-image: url(../deinegrafik2.gif);
 background-repeat: no-repeat;
 width: 20px;
 height: 20px;
 float: left;
}
.menuspacer2 {
 background-image: url(../deinegrafik3.gif);
 background-repeat: no-repeat;
 width: 20px;
 height: 20px;
 float: left;
}
.menu {
 width: 600px; /* je nach dem wie breit es sein soll */
 height: 20px;
 background-image: url(../deinegrafik4.gif);
 background-repeat: repeat-x;
 float: left;
}

<div class="menubg">
 <div class="menuspacer1"></div>
 <div class="menu"></div>
 <div class="menuspacer2"></div>
</div>

Das müsste dann so funktionieren wie von dir gewünscht.

mfg
 
Danke für eure Hilfe! :)
Hab es zwar mittlerweile mit "float: left" der Images hingekriegt, aber diese Lösung ist wohl nicht nur semantisch besser, sie hat auch den Vorteil, dass durch das Setzen einer Hintergrundgrafik für die gesamte Leiste beim Konqueror keine Fehler beim Strecken der Grafiken entstehen bzw. auffallen. Diese entstanden nämlich bei meiner alten Lösung. Außerdem kann man so die Leiste besser in der Weite und Position einstellen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück