Dropdown-Menü mit eigener Grafik

[ByteBanditin]

Hallo,

mein Freund und ich versuchen grad eine Homepage zu basteln, ich bin da mehr für die Grafik zuständig und er fürs Programmieren.

Trotzdem stelle ich hier nun eine Frage die die darstellung betrifft weil er meint das geht nicht so wie ich es mir denke und ich denke es muss auch so gehn. Aber nun zu dem Problem:

Wir möchten ein DropdownMenu haben mit eigner Grafik und eigener Schrift, als Beispiel :



Er sagt ich müsse das untere Menue in einzelne Kästchen zerschneiden, da sonst es nicht möglich ist festzulegen ist welchen Menüepunkt man anklickt, da ich ja eine eigene Schrift auch haben möchte und keine Standartschrift.
Ist das wirklich so oder kann man es iwie Programiertechnisch /Grafikmässig anders umsetzen?

Falls dies im falschen Forum gepostet ist, sorry aber ich kenn mich wie gesagt damit gar nicht aus, aber schonmal danke für alle Antworten.

Gruss

ByteBanditin

 

[sokie]

AW: Dropdown-Menü mit eigener Grafik

Das ist theoretisch auch möglich ohne die punkte in einzelne Grafiken zu slicen. Normalerweise hat man in so einem fall doch eher für die einzelnen Punkte auch die jeweilige Grafik einzeln.
@msblacky : Webseitenprogrammierung ist keine Frage des 'Programms'

 

[ByteBanditin]

AW: Dropdown-Menü mit eigener Grafik

Hallo,

also möglich wäre es, aber dazu muss man auch mal wissen mit welchem Programm ihr das umsetzen wollt, html und css Wissen sollte vorhanden sein. Code wäre auch nicht schlecht mal zu sehen.

msblacky

Html und Css wissen ist bei ihm vorhanden.
Programm benutz er gar keins.

Zum Code... die Struktur soll sein :

[SIZE=2][COLOR=#400040][SIZE=2][COLOR=#400040]
<div id='menu1'>
<div id='menu-content'>

<div> <a href='index.php'> <img src='buttons/home_off.png'> </a>

<div class='umenu'>
<div><a href=''> Test1 </a></div>
<div><a href=''> Test2 </a></div>
</div>
</div>

<div> <a href=''> <img src='buttons/informationen_off.png'> </a>
<div class='umenu'>
<div><a href=''> Test1 </a></div>
<div><a href=''> Test2 </a></div>
</div> 
</div>
[... nur strukturbeispiel .. div blöcke nicht geschlossen]
- - - -
css > code 
- - - - 
div#menu-content { height:24px; color:#000; font-size:12px; font-family:Arial;}
div#menu-content a { display:inline; height:24px; vertical-align:middle; line-height:24px; color:#000; }
div#menu-content a:hover { color:#00f; font-weight:bold; }
div#menu-content div:hover { color:#00f; }
div#menu-content div { left:4px; width:150px; position:relative;display:inline; margin-left:-4px;}
div#menu-content div div.umenu div { width:150px; }
div#menu-content div div.umenu div.uumenu div { width:150px; }
/*erste Unterebene */
div#menu-content div:hover div.umenu { display:block; }
div#menu-content div div.umenu { display:none; width:150px; position:absolute; top:11px; left:3px; background:#f4b9c2; z-index:8; }
div#menu-content div div.umenu a { display:block; height:32px; line-height:32px; margin-top:0px; margin-left:-4px;}
[/COLOR][/SIZE][/COLOR][/SIZE]

und anfügen dass statt der test1 und co halt ein komplettes bild den container befüllen es sollen dann aber mit dem kompletten Bild einzelne bereiche anklickbar sein.

Gruss

ByteBanditin

 

[ekiam14]

AW: Dropdown-Menü mit eigener Grafik

Hallo,

schau mal hier
Tips und Tricks

ist zwar ein Text-Menu, kann aber im CSS leicht mit grafiken angepaßt werden.

Gruß
ekiam14

 

[ByteBanditin]

AW: Dropdown-Menü mit eigener Grafik

Hallo,

schau mal hier
Tips und Tricks

ist zwar ein Text-Menu, kann aber im CSS leicht mit grafiken angepaßt werden.

Gruß
ekiam14

Danke den Link kenn ich / wir schon Problem ist das es da ein 0815 Schrift ist die nicht in der Grafik drin ist. So bekommen wir es ja auch hin. Problem ist halt eine Grafik wie oben im ersten Post zu benutzen, ohne sie zerschneiden zu müssen, mit eigener Schrift und ohne javascript.

 

[Jana]

AW: Dropdown-Menü mit eigener Grafik

Ihr habt da eindeutig viel zu viele Divs. Mit Divs immer sparsam umgehen!
Für Navigationen werden ungeordnete Listen verwendet, wo die Menüpunkte in Listenpunkten dargestellt werden. Dann könnt ihr dem <ul> Tag eine fest Höhe und Breite, sowie eine Hintergrundgrafik vergeben und schon hättest du deinen individuellen Grafikhintergrund.

Falls die Schriftart der Links nicht in jedem System vorinstalliert ist, kannst du sie als PNG-Grafiken speichern und diese wiederum den a-Tags als Hintergrund definieren.


So wäre es richtig:

<ul id="menu-content">
    <li><a href="index.php">Home</a>   
        <ul class="umenu">
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
        </li>
        </ul>
    <li><a href="">Informationen</a>
        <ul class="umenu">
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
        </li>
        </ul>
</ul>

 

[hubspe]

AW: Dropdown-Menü mit eigener Grafik

Ihr habt da eindeutig viel zu viele Divs. Mit Divs immer sparsam umgehen!
Für Navigationen werden ungeordnete Listen verwendet, wo die Menüpunkte in Listenpunkten dargestellt werden.

jep stimmt.

Bei einer vollgrafischen navi gehört das Bild mit der Schrift nicht ins Markup sondern als HG-Grafik eingebunden.
Dafür braucht man ein extra span (leer!) innerhalb des a, was die HG-Grafik bekommt. Es reicht eine Grafik für alle Linkzustände, die per background-position an die richtige Stelle geschoben wird.
Der Linktext steht natürlich trotzdem da, die HG-Grafik wird drübergeschoben.
Ist eine Image Replacement Technik (Gilder/Levin).

 

[Jana]

AW: Dropdown-Menü mit eigener Grafik

Dafür braucht man ein extra span (leer!) innerhalb des a, was die HG-Grafik bekommt.

Man braucht dafür nicht überflüssigerweise noch einen extra (span)-Tag ver(sch)wenden, da man dem a-Tag das Hintergrundbild geben kann.

 

[hubspe]

AW: Dropdown-Menü mit eigener Grafik

Man braucht dafür nicht überflüssigerweise noch einen extra (span)-Tag ver(sch)wenden, da man dem a-Tag das Hintergrundbild geben kann.

für Gilder/Levin ist das leere span leider notwendig.
Schau dir die Technik noch mal genau an oder noch besser probiers mal aus. Der Linktext steht ja noch im Quelltext und die Grafik wird einfach per background-position drübergeschoben drübergeschoben.

Für eine teilgrafische navi wo der Text im Markup steht und das Bild nur den HG bildet kann man es dem a zuweisen. Für diesen speziellen Fall hättest du recht.

 

[Jana]

AW: Dropdown-Menü mit eigener Grafik

für Gilder/Levin ist das leere span leider notwendig.
Schau dir die Technik noch mal genau an oder noch besser probiers mal aus. Der Linktext steht ja noch im Quelltext und die Grafik wird einfach per background-position drübergeschoben drübergeschoben.

Für eine teilgrafische navi wo der Text im Markup steht und das Bild nur den HG bildet kann man es dem a zuweisen. Für diesen speziellen Fall hättest du recht.

Das stimmt, aber du kannst dem a-Tag im CSS auch einen text-indent von ca. -3000000px geben, dann schiebt er den Text in einen für unsere Monitore nicht sichtbaren Bereich. Dadurch hat man sowohl den Linktext als auch die Grafik.

 

[hubspe]

AW: Dropdown-Menü mit eigener Grafik

Das stimmt, aber du kannst dem a-Tag im CSS auch einen text-indent von ca. -3000000px geben, dann schiebt er den Text in einen für unsere Monitore nicht sichtbaren Bereich. Dadurch hat man sowohl den Linktext als auch die Grafik.

nicht so ganz.
Bei der Phark-Methode besteht leider das Bilder aus-CSS an Problem.

Außerdem, das Hg-Bild über den Text schieben hat doch ungleich mehr Eleganz als den Text schnöde aus dem Viewport schieben, oder?

 

[Jana]

AW: Dropdown-Menü mit eigener Grafik

Außerdem, das Hg-Bild über den Text schieben hat doch ungleich mehr Eleganz als den Text schnöde aus dem Viewport schieben, oder?

Denke auch. ;D
Ich glaub das muss dann jeder für sich entscheiden, welche Methode die effizientere ist. Mehrere Wege führen nach Rom.

 

[ByteBanditin]

AW: Dropdown-Menü mit eigener Grafik

Ich / wir möchten uns bei allen hier bedanken, er brauchte wohl nur einen kleinen Denkanstoss nun haben wir es dank eurer Hilfe hinbekommen.