Horizontales Menu mit DIVs und Bildern
0 0 
Felix Riesterer
0 0 0 0 Felix Riesterer
0 0 
Der Martin
0 Felix Riesterer
0 
Gunnar Bittersmann
0
Horizontales Menu mit DIVs und Bildern
Hallo,
ich möchte ein horizontales Menü mit DIVs machen. Die Buttons sind (leider) Bilder. Diese Bilder sind unterschiedlich breit. Sie sollen "einfach" direkt ohne Zwischenraum nebeneinander angezeigt werden und die DIVs dabei automatisch die Größe der Bilder annehmen. Die Button-Bilder liegen als backgrounds der Links vor.
Problem: Das Bild taucht nur auf, wenn ich dem div oder Link eine feste Breite gebe, aber das will ich ja nicht^^. Soballd ich zB dem Link eine Höhe gebe, wird der Button korrekt komplett angezeigt, aber die restlichen divs werden dann nicht mehr daneben angezeigt (die Linkis sind ja auch Blockelemente..hm..). Wer sieht Licht am Ende meines Codetunnels?? :-)
<div id="navigation">
<div><a id="link1" href="#Beispiel">la</a></div>
<div><a id="link2" href="#Beispiel">la</a></div>
<div><a id="link3" href="#Beispiel">la</a></div>
<div><a id="link4" href="#Beispiel">li</a></div>
<div><a id="link5" href="#Beispiel">lö</a></div>
</div>
<div class="clear"></div>
#navigation{
margin: 0;
padding: 0;
width: 650px;
height:42px;
}
#navigation div{
float:left;
padding:0;
margin:2px;
}
#navigation #link1{
display:block;
background:url(../img/buttons/menu1a.png) no-repeat;
}
#navigation #link2{
display:block;
background:url(../img/buttons/menu2a.png) no-repeat;
}
#navigation #link3{
display:block;
background:url(../img/buttons/menu3a.png) no-repeat;
}
-
Backgrounds passen sich immer dem Inhalt an nicht umgekehrt.
Lösungsmöglichkeiten gibt es viele, je nachdem was du damit vor hast. -
Liebe(r) hoffs,
ich möchte ein horizontales Menü mit DIVs machen.
nein, das möchtest Du ganz sicher nicht. Du möchtest es stattdessen <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=als Liste> anlegen.
Die Buttons sind (leider) Bilder. Diese Bilder sind unterschiedlich breit. Sie sollen "einfach" direkt ohne Zwischenraum nebeneinander angezeigt werden und die DIVs dabei automatisch die Größe der Bilder annehmen.
Jetzt mal langsam. Einen Schritt nach dem anderen. Du hast "Buttons"? Was hindert Dich daran, diese in die Liste (s.o.) als Listenpunkte einzunbinden?
Die Button-Bilder liegen als backgrounds der Links vor.
Wozu brauchst Du Hintegrundbilder, wenn Du die Bilder selbst als <img>-Elemente in die Listenelemente einbinden kannst? Willst Du hover-Effekte damit erreichen? Davon hast Du nichts geschrieben...
Problem: Das Bild taucht nur auf, wenn ich dem div oder Link eine feste Breite gebe, aber das will ich ja nicht^^.
Warum nicht?
Mach mal wie im SELFHTML-Kapitel vorgeschlagen, dann reden wir (endlich sinnvoll) weiter. Deal?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Sehr geehrter Felix Riesterer,
Vielen Dank für die Einschätzung. Ich möchte das Problem mit DIVs lösen. Hätte ich es mit einer Liste umsetzen wollen, hätte ich die sich auch hinter Ihrem Link befindlichen Informationen zu Rate gezogen. Es tut mir Leid, wenn Sie meinen Sätzen nicht Schritt für Schritt folgen konnten. Herzlichen Dank trotzdem für Ihre Mühe. (Ich hoffe Sie geben keine Tipps im PHP-Forum :-))
Beste Grüße
-
Om nah hoo pez nyeetz, hoffs!
Ich möchte das Problem mit DIVs lösen.
Das ist keine gute Idee, weil es semantisch unsinnig ist.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Das ist keine gute Idee, weil es semantisch unsinnig ist.
Hallo Matthias,
das ist einzusehen :-) Ich habe mir an an der Liste aber in folgender Form die Zähne an den Button-Breiten ausgebissen (und hatte es deshalb mit den DIVs probiert):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> ....... </head> <body> <div id="navcontainer"> <ul id="navlist"> <li><a id="link1" href="#"> </a></li> <li><a id="link2" href="#"> </a></li> <li><a id="link3" href="#"> </a></li> <li><a id="link4" href="#"> </a></li> <li><a id="link5" href="#"> </a></li> </ul> </div> </body> </html>#navlist{ list-style: none; padding: 0; margin: 0 auto; width: 80%; } #navlist li{ display: block; float: left; width:10%; margin: 0; padding: 0; } #navlist li a{ display: block; width: 100%; padding: 0px; text-decoration: none; } #link1{ width:80px; height:15px; background:url(../img/buttons/bild1.png) no-repeat; } #link1:hover, #link1:active{ background:url(../img/buttons/bild2.png) no-repeat; } #link2{ width:35px; height:15px; background:url(../img/buttons/bild3.png) no-repeat; } #link2:hover, #link2:active{ background:url(../img/buttons/bild4.png) no-repeat; } etc.Die Buttons werden schön nebeneinander angezeigt horizontal. Aber: Ich möchte so gern, dass sich die Breite der Links automatisch an die Hintergrund-Bildbreite anpasst^^. Ich gebe ja den Links jeweils ihr zugehöriges Bild, auch bei hover per Hintergrundbild (und es ist klar, dass das Hintergrundbild die Breite nicht beeinflusst, weil es nicht als Inhalt gilt. Aber ich gebe ja den #links jeweils eine feste Breite, nämlich die des jeweiligen Bildes! ) So wie es da steht, gibt es unregelmäßige Abstände zwischen den Buttons, weil sie unterschiedlich Breit sind, WEIL die Listenelemente alle width:10% haben. Nehme ich das aber raus, sind alle Buttons nur noch kleine Striche :-( Warum nur?
-
Liebe(r) hoffs,
Ich habe mir an an der Liste aber in folgender Form die Zähne an den Button-Breiten ausgebissen (und hatte es deshalb mit den DIVs probiert):
ist das ein Grund zu versuchen mich zu dissen? Nur weil es Dir nicht gelingt, bedeutet das noch lange nicht, dass es nicht geht oder dass mein Rat in die falsche Richtung gewiesen hätte.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Liebe(r) hoffs,
Ich habe mir an an der Liste aber in folgender Form die Zähne an den Button-Breiten ausgebissen (und hatte es deshalb mit den DIVs probiert):
ist das ein Grund zu versuchen mich zu dissen? Nur weil es Dir nicht gelingt, bedeutet das noch lange nicht, dass es nicht geht oder dass mein Rat in die falsche Richtung gewiesen hätte.
Liebe Grüße,
Felix Riesterer.
Sehr geehrter Herr Riester,
"dissen" befindet sich weder in meinem Sprachgebrauch noch war das meine Absicht. Ich dachte ich hätte mich höflich ausgedrückt. Sie müssen sich nicht angegriffen fühlen, wenn ich Ihren "Rat" nicht befolgen möchte. Die von Ihnen verlinkte Liste führt nicht zum Ziel und ich fand nur, Sie müssten mir nicht sagen, was ich möchte. Deshalb hatte ich zunächst Abstand genommen. Da der Kollege sich jedoch auf die semantische Bedeutung berief, habe ich den Rat vertanden und gern angenommen sowie einen neuen Versuch in diese Richtung unternommen.
Alles Gute und Danke trotzdem noch mal
(Es ist immer schwierig mit dem Tonfall in diesen Sphären...) -
Hallo Felix,
[...] mich zu dissen?
was ist *das* denn??
So long,
MartinPS: Nein, ich möchte mein Bad micht wimpfen.
--
Politik ist die Kunst, die Menschen so zu bescheißen, dass sie auch noch glauben, sie hätten das selbst so gewollt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
Liebe(r) hoffs,
Hätte ich es mit einer Liste umsetzen wollen, hätte ich die sich auch hinter Ihrem Link befindlichen Informationen zu Rate gezogen.
es kann eben nicht jeder glücklich werden.
Es tut mir Leid, wenn Sie meinen Sätzen nicht Schritt für Schritt folgen konnten. Herzlichen Dank trotzdem für Ihre Mühe. (Ich hoffe Sie geben keine Tipps im PHP-Forum :-))
Hehe, Du musst mich nicht verstehen. Wir leben hier in einem freien Land, wo sich jeder seine mentalen Grenzen selbst ziehen darf.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
@@hoffs:
nuqneH
Ich möchte das Problem mit DIVs lösen. Hätte ich es mit einer Liste umsetzen wollen, hätte ich die sich auch hinter Ihrem Link befindlichen Informationen zu Rate gezogen.
http://community.de.selfhtml.org/zitatesammlung/zitat906
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Hier mal eine Mögliche Lösung.
Vergiss aber nicht, dass das ne Art "Vergewaltigung" des HTML darstellt xD
Aber was solls jeder ist ein bissel Fetisch xD<html> <head> <title></title> <style type="text/css"> #navigation div{ position:relative; float:left; } #navigation div div { width:100%; height:100%; position:absolute; text-align: center; } .null { border:0px; width:0px; height:100%; vertical-align:middle; } </style> </head> <body> <div id="navigation"> <div> <a href="#"> <div> <img class="null" src="1Pixel.png"> Titel </div> </a> <img src="deinHintergrundBild"> </div> </div> </body> </html>-
Hier mal eine Mögliche Lösung.
Vergiss aber nicht, dass das ne Art "Vergewaltigung" des HTML darstellt xD
Aber was solls jeder ist ein bissel Fetisch xDOh, das lese ich jetzt erst, Danke Dir! Also - das mit quasi "leeren" img-Tag das hat letztlich sowohl für die DIVs, als auch für eine Liste funktioniert. Ich hatte da ein Brett vor dem Kopf und hatte einfach nicht verstehen wollen, dass es ohne echten Inhalt nur mit backgrounds nichts wird. Ich habe neben dem leeren img-Tag noch eine fiese Art des Missbrauchs gefunden, die funktioniert: Einfach die Original-img-Pfade im HTML angeben und den img in dem entsprechenenden Container die Eigenschaft display:none; geben :-( Aber ist ja auch echt hässlich. Vielleicht sollte ich den Kunden doch von Javasript überzeugen. Mouseover, Bildpfad wechseln. Das wär doch schöner!!? :-)
-
Liebe(r) hoffs,
Vielleicht sollte ich den Kunden doch von Javasript überzeugen. Mouseover, Bildpfad wechseln. Das wär doch schöner!!? :-)
ohje, und dafür noch Geld verlangen...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
@@hoffs:
nuqneH
Vielleicht sollte ich den Kunden doch von Javasript überzeugen. Mouseover, Bildpfad wechseln. Das wär doch schöner!!? :-)
Nein. Du solltest dich selbst von CSS-Sprites überzeugen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Ergänzung:
Nein. Du solltest dich selbst von CSS-Sprites überzeugen.
Du könntest zum Beispiel dieses Dokument lesen.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Nein. Du solltest dich selbst von CSS-Sprites überzeugen.
Du könntest zum Beispiel dieses Dokument lesen.
Super - CSS-Sprites sind mir bisher nicht praktisch über den Weg gelaufen, das ist ja wesentlich eleganter als die Bildtauscherei (jetzt Schieberei). Vielen Dank!!
Ehrlich gesagt..mein ursprüngliches Problem, dass die Hintergrundbilder nicht angezeigt wurden egal ob nun DIV oder Liste (warum die fürs Menü nun die 1.Wahl ist, habe ich verstanden :-)), war ganz ""Triviales""--1 fehlende Breite und ein Vertipper beim clear für das letzte gefloatete Element. Ich saß scheinbar schon zu lange vorm Schirm gestern ^^
-
Das aber schade, ich dachte ich könnte noch so ein dämliches Skript wie vorhin posten *lacht*
-
-
-
-
-
Hallo,
Vergiss aber nicht, dass das ne Art "Vergewaltigung" des HTML darstellt xD
mit anderen Worten: Du erzeugst nicht nur unsinniges, sondern auch ungültiges HTML.
<a href="#">
<div>
<img class="null" src="1Pixel.png">
Titel
</div>
</a>Ein a-Element darf keine Blockelemente enthalten. Es ist Glückssache, wie der Browser diesen Fehler intern korrigiert.
Ciao,
Martin--
Soziologen sind nützlich, aber keiner will sie haben.
Bei Informatikern ist es gerade umgekehrt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-