Navigation aus Images erstellen?

[kasmo]

Hi zusammen,
habe noch eine Frage und zwar habe ich wie vorher auch schon viel im Internet gesucht, aber ich habe keine Antwort gefunden, deswegen frag ich hier mal spezifisch.

Und zwar habe ich hier folgende Bilder die zusammengesetzt werden sollen als Navigation die zentriert über mein Background stehen sollen.



Uploaded with ImageShack.us

Meine Webseite ist zentriert mit "margin: 0 auto;"...

Ich habe ein bisschen rumprobiert aber ich komme zu keinem Ergebnis, diese zu positionieren =(

Könnt ihr mir ne Hilfestellung geben oder einen Lösungsansatz?

Gruß

(Background CSS)

body{
  background-image: url("html/background.png");
 background-repeat: no-repeat;
 background-position: center top;
 background-color: #88a0bf;
 z-index: 1;
 width: 1024px;
 height: 768px;
 margin: 0 auto;

}

 

[lowsaxonian]

Moin,

das dürfte vermutlich einen Denkansatz geben, wie es funktionieren könnte: Navigation mit Images.
Ansonsten hat Tante Google ein erkleckliches Sümmchen an Treffern geliefert: Google-Suche.

 

[threadi]

Anders ausgedrückt: du willst eigentlich ein horizontales Menü zentrieren. Dazu gibt es viele Webseiten die es erklären:
Cascading Style Sheets { Tutorials : Zentrieren eines Block-Level-Elements }
Listenmenüs einzeilig horizontal zentrieren - Blog von Tian - SEO Webmaster Tian Fröhlich

 

[kasmo]

ich habe jetzt durch eure Antworten was gefunden (danke schonmal) =)

WIe findet ihr diesen Lösungweg? Ist das akzeptabel oder gibts da "Probleme" wie bei Tabellen?

HTML

<ul id="hauptnavi">
    <li>
        <a href="#"><img width="92" border="0" height="34" src="html/Bilder/index_01.png"/></a>
    </li>
    <li>
        <a href="#"><img border="0" height="34" width="3" src="html/Bilder/index_02.png"</a>
    </li>
    <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_03.png"</a>
    </li>

 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_04.png"</a>
    </li>

 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_05.png"</a>
    </li>
 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_06.png"</a>
    </li>
 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_07.png"</a>
    </li>
 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_08.png"</a>
    </li>
 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_09.png"</a>
    </li>
 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_10.png"</a>
    </li>
 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_11.png"</a>
    </li>
 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_12.png"</a>
    </li>
 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_13.png"</a>
    </li>
 <li>
        <a href="#"><img width="3" height="34" border="0" src="html/Bilder/index_14.png"</a>
    </li>
 <li>
        <a href="#"><img width="92" height="34" border="0" src="html/Bilder/index_15.png"</a>
    </li>
</ul>

CSS

a { text-decoration:none; }
#hauptnavi { width: 768px; margin: -440px auto; margin-left:60px; background-position: top;  list-style:none; z-index: 2;}
#hauptnavi li { float:left; height:39px; line-height:39px; margin-right:0px; border: 0;  }

sieht jetzt so aus (ist nur proforma, also genauen pixel usw mach ich noch)


Uploaded with ImageShack.us

 

[threadi]

Optimal, wenn es auch deinem Designwunsch entspricht :-)

 

[kasmo]

wow =)
Cool.
Da bin ich ja jetzt happy =)

Danke euch ;)

 

[kasmo]

Noch kurz eine Frage, wie soll ich die Texte im Content coden?
Als iframe oder wie mache ich das?

 

[threadi]

Nicht als iframe. Ganz normal mit HTML. Ich glaube aber Du meinst einen begrenzten Raum für den Content. Den kann man ebenfals mit CSS "simulieren". Beispiel:

#content {
 height: 200px;
 overflow-y: scroll;
 width: 300px;
}

Das würde eine Box mit festen Maßen erzeugen die einen vertikalen Scrollbalken erhält. Den könnte man auch auf "auto" stellen, wenn man den nicht immer sehen will.

 

[kasmo]

danke für deine Antwort.
Sprich wenn ich jetzt oben auf Leistungen klick, dann öffnet sich die
Leistungen.htm im Content mit diesem HTML-Code?

<html>
<body>
<div id="content"> Bla bla bla bla bla</div>

??

 

[threadi]

Nein. Du musst natürlich für jeden Inhalt eine eigene HTML-Seite erstellen in der oben wie immer das Menü und darunter der Content steht. Nur den Content-Bereich änderst Du dann nach belieben. Aber immer so, dass insgesamt eine valide HTML-Seite rauskommt.

Wenn Du eine Webprogrammiersprache wie php verwendest, hättest Du den Vorteil das Menü nicht auf jeder Seite einzeln einbinden und bei Änderungen bearbeiten zu müssen. Da genügt es das Menü in einer Daten zu hinterlegen und diese zu "includen".

 

[kasmo]

ah, also im Prinzip immer die z.b index.htm kopieren und dann immer nur die Verlinkung ändern und den Content?
Hm klingt logisch =)

Ja in PHP will ich mich einarbeiten wenn ich HTML und CSS einigermaßen beherrsche.