nicht angemeldet
Matthias Apsel
Take
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Ulysses
Ulysses
Hallo, anstatt groß zu erzählen einfach mal direkt der Link zu meinem Problem (auch mal kurz die Menüpunkte hovern, bitte ;):
http://dl.dropbox.com/u/5907530/testseite/test.html
Der Balken soll eigentlich durchgehend eine Farbe haben - und zwar die des rechten Stücks, also stärker transparent. Ich hab da halt drei divs nebeneinader: Das links Stück, das Menu, und das rechte Stück. Das Problem ist eben nun, dass der Hintergrund des rechten Divs eben nicht rechts neben dem Menü anfängt, sondern über die volle Breite geht. Wenn der Balken nicht transparent wäre, würde man das nicht merken, aber so eben schon, da dort der Hinergund zweimal übereinander liegt und dann doppelt so stark deckt. ICh finde da einfach keine optimale Lösung für.
Das Problem ist eben, dass das Menü keine feste Breite hat, weil die Breite der Menüpunkte vom der Länge des jeweiligen Begriffs abhängt. Und das Textrendering kann je nach Browser auch mal unterschiedlich breit ausfallen. Daher kann ich dem rechten Balken weder ein margin-left, noch eine left-Position, noch eine Breite geben.
Hat da jemand eine Idee?
Om nah hoo pez nyeetz, Sebastian!
Dein HTML ist sehr ungünstig gewählt.
Verwende eine Liste
<ul>
<li>...
<li>...
</ul>
Die Liste nimmt als Blockelement immer die gesamte zur Verfügung stehende Breite ein. Ein Padding-left sorgt für den gewünschten Abstand der Menüpunkte nach links.
Den Menüpunkten kannst du dann die andere Farbe geben.
Matthias
Moin,
Den Menüpunkten kannst du dann die andere Farbe geben.
Das Problem ist ja, dass das die Menühintergründe bei :hover auch wieder transparent seien sollen.
Gruß,
Take
Om nah hoo pez nyeetz, Take!
Das Problem ist ja, dass das die Menühintergründe bei :hover auch wieder transparent seien sollen.
Es spricht doch nichts dagegen, den Hintergrund für die a-Elemente einfach wegzulassen.
Matthias
Om nah hoo pez nyeetz, Take!
Das Problem ist ja, dass das die Menühintergründe bei :hover auch wieder transparent seien sollen.
Es spricht doch nichts dagegen, den Hintergrund für die a-Elemente einfach wegzulassen.
Matthias
Und wie?
Also zunächst mal danke für die Antworten, erst hatte ich den Hinweis mit der Liste nicht verstanden, weil ich ja durchaus eine Liste gemacht hatte, die aber so alleine bei mir zunächst optisch nicht die volle Breite ausfüllte. Aber ich musste ihr auch noch eine Höhe geben, dann sieht man auch den Hintergrund. Auf den ersten Blick klappt das dann, aber es tritt dann eben genau das von Tage angesprochene Problem auf: der goldene Hintergrund der ul ist immer über die volle Breite zusehen, der graue Hintergrund beim hover wird dann nur darüber gelegt. Es soll aber anstelle des goldenen Hintergrund erscheinen. Vielleicht fällt der Unterschied erst nicht auf, hier mal im Vergleich. So sieht es momentan aus:
http://dl.dropbox.com/u/5907530/testseite/test2.html
Und so soll es aussehen:
http://dl.dropbox.com/u/5907530/testseite/test3.html
Also es geht um den grauen Hintergrund beim Hovern. Ich hab schon ein "background-image: none" bei dem li und dem li a gesetzt, aber eigentlich klar, dass das nicht geht. Weil ich müsste es ja so hinbiegen dass der ul-Hintergrund an den Stellend er Buttons beim Hovern quasi ein Lock bekommt.
Om nah hoo pez nyeetz, Sebastian!
Und wie?
Erst mal lässt du das div 'Menükomplett' komplett weg.
Weil ich müsste es ja so hinbiegen dass der ul-Hintergrund an den Stellend er Buttons beim Hovern quasi ein Lock bekommt.
Eine Lösungsskizze für moderne Browser (die dann auch keine halbtransparenten Hintergrundgrafiken benötigen):
gib der Liste keinen Hintergrund:
verwende #nav li:first-child::before, um links des ersten Listenelements einen Hintergrund zu erreichen und #nav li:last-child::after für das rechte Seite.
Ob das wirklich funktioniert, müsste man ausprobieren.
Eine schmutzige Lösung wäre das Hinzufügen zweier Listenelemente. Aber zusätzliche Elemente aus Gestaltungsgründen sind uncool. Diese Lösung würde aber in einer großen Anzahl von Browsern funktionieren, wenn du sie dann auch noch über einen Klassenselektor statt über die Pseudoklassen ansprichst, sogar hinunter bis zum IE6.
Schau dich im selfhtml-wiki um, Stichpunkte Pseudoelemente und Pseudoklassen unter Dokumentation/CSS.
Matthias
Hab jetzt an diversen Stellen versucht mit ":after" etwas rechts neben das Menü zu setzen. Das Problem ist wohl grundsätzlich: Wenn ich den rechten Bereich irgendwie als Balken mit einer Hintergrundfarbe auffüllen will, dann muss ich display:block angeben. Aber in dem Moment geht eben die Hintergrundfarbe über die volle Breite, und nicht nur den Bereich rechts vom Menu.
An leere Listenelemente habe ich auch schon gedacht, aber wie du sagtest sollte man das wirklich nicht tun.
Mittlerweile sehe ich keine Möglichkeit mehr es so zu machen, wie ich es vorhabe, mal sehen auf was es dann hinausläuft und in welche Richtung ich Kompromisse eingehen muss. Falls noch jemand eine idee hat, wäre ich dennoch dankbar.
Bin gerade auf eine andere Idee gekommen, nämlich dem Kasten rechts doch eine breite zu geben, die aber unnötig groß machen, und dann abzuschneiden. Ist das Möglich? Bei mir klappt das bisher nicht.
Unbahängig davon ob ich das mit :after daneben setze, oder selber ein div neben die Menüliste, neben ein Listenelement,... es läuft immer daraufhinaus, dass ich es als display:inline-block deklarieren muss. Nur so schaff ich es, dass es zwar einerseits eine vorgegebene Höhe ausfüllt, anderseits aber eben wirklich auch der Hintergrund erst rechts neben dem Menü beginnt (und nicht ganz links anfängt und dann hinter dem Menu liegt).
Nun dachte ich mir, dass ich diesen Balken dann irgendeine Breite gebe, die eben eigentlich zu breit ist und rechts rausragt. Und um diesen gesamten Menübalken ein div mit einer festen Breite (die weiß ich ich ja, ist mein haupt-inhaltscontriner mit 800px) und einem overflow:hidden. Das problem dabei ist aber, dass der inline-block in jedem Fall unter das Menu springt, sobald er von der Breite her nicht mehr in das div passt.
Gibt es eine Möglichkeit ein "Nebeneinander" zu erzwingen, also quasi den Zeilenumbruch zu verhindern?
Om nah hoo pez nyeetz, Sebastian!
Unbahängig davon ob ich das mit :after daneben setze, oder selber ein div neben die Menüliste, neben ein Listenelement,... es läuft immer daraufhinaus, dass ich es als display:inline-block deklarieren muss. Nur so schaff ich es, dass es zwar einerseits eine vorgegebene Höhe ausfüllt, anderseits aber eben wirklich auch der Hintergrund erst rechts neben dem Menü beginnt (und nicht ganz links anfängt und dann hinter dem Menu liegt).
Wenn du mit zusätzlichen Listenelementen arbeitest, könntest du der Liste ein overflow:hidden mitgeben.
Matthias
Wenn du mit zusätzlichen Listenelementen arbeitest, könntest du der Liste ein overflow:hidden mitgeben.
Matthias
Hmm, eigentlich wollte ich diese Lösung ja eh vermeiden, aber jetzt geht noch nichtmal das. Auch das zusätzliche Listenelement springt in eine neue Zeile, wenn es zu breit ist.
Geschafft!
http://dl.dropbox.com/u/5907530/testseite/test3.html
Die Idee mit dem überlangen rechten Stück, was dann per overflow:hidden passend abgeschnitten wird war schon richtig, und letztlich frag ich mich, warum ich da nicht gleich drauf gekommen bin, weil es eigentlich sehr naheliegend und logisch ist. Ich hab einfach dem ul eine Breite von 2000px gegeben. Dadurch kann ich dem rechten Balken auch viel breite geben, ohne dass er umspringt. Das übergeordnete DIV hat dann aber eben eine breite von 800px overflow:hidden.
Jetzt ganz unabhängig von meiner konkreten Umsetzung war es ja eigentlich klar, dass ich einfach ein sehr breites Element nehme, in welchem genug platz ist ohne dass das rechte Stück in die neue Spalte springt, und darum herum dann ein schmaleres overflow:hidden-Element setze... Hat ich irgendwie ein brett vorm Kopf.
Danke nochmals an alle, insbesondere Matthias!
Om nah hoo pez nyeetz, Sebastian!
Ich hab einfach dem ul eine Breite von 2000px gegeben. Dadurch kann ich dem rechten Balken auch viel breite geben, ohne dass er umspringt. Das übergeordnete DIV hat dann aber eben eine breite von 800px overflow:hidden.
Was machst du bei viewscreenbreiten von mehr als 2000px?
Nimm Prozente, da bist du auf der sicheren Seite, beachte, dass alle Elternelemente dann eine Breite brauchen.
Matthias
Hmm, ich weiß jetzt nicht ganz, was du meinst. Also ich sitze hier eh an einem iMAc mit 2560 Pixel breitem Display. Aber auch wenn ich das Browserfenster extrem verbreitere bekomme ich nie Probleme, wüsste auch nicht wieso, weil das overflow:hidden ja einfach immer dafür sorgt, dass der Balken passend abgeschnitten wird. Das einzige "Problem" habe ich beim Vergrößern und verkleinern, aber auch nur wenn eben nicht alles, sondern nur der Text skaliert wird. Wenn ich da den Text verkleinere, wird eben das Menü kleiner, und da kann es dann theoretisch irgendwann sein, dass der rechte Balken zu kurz ist und nicht mehr bis an den rechten Rand des Inhaltscontainers reicht. Aber das jemand sowas macht ist schon sehr unwahrscheinlich.
Trotzdem Danke für den Hinweis, ich werd mir das nochmal anschauen bzw. drauf achten.
Om nah hoo pez nyeetz, Sebastian!
Aber das jemand sowas macht ist schon sehr unwahrscheinlich.
Unwahrscheinlich schon, aber nicht unmöglich. Aber wenn du statt 2000px eine Breite von 110% des Browserfensters vorgibst, hast du _immer_ ausreichende Abmessungen.
Matthias
Puh, also das mit den Prozentangaben ist jetzt irgendwie noch verwirrender, da komme ich zu keinem klaren Ergebnis und sehe auch keine Vorteile. Bzw. blicke ich da jetzt nicht mehr durch, wo ich was angeben soll.
Es ist ja so: Diesem rechten Balken gebe ich eine Breite, die so groß sein muss, dass er auf jeden Fall rechts aus dem Gesamtcontainer rausragt. Auch dann, wenn das Menü mal kleiner dargestellt wird und der Balken weiter links anfängt. Das war jetzt bei mir 800px. Und nur dann passierte es bei starker verkleinerung der Schriften (wie gesagt: Wer macht das? Verkleinern tut man vielleicht auf Tablets oder Smartphones, aber die Browser dort skalieren eh immer komplett, also nicht nur die Schriftgröße), dass der Balken zu kurz wurde. Schreib ich eben 8000px hin, dann wird es wohl passen...
Damit dieser Balken aber eben nicht unter das Menü springt, muss ich dem gesamten ul (in dem diesen rechter-Balken-Div auch noch drin steckt) eine Breite geben, in der alles reinpasst. Die muss eben mindestens so groß sein wie linkerBalken + Menü + rechter Balken. Und da hatte ich eben 2000px genommen.
Ich weiß jetzt nicht wo ich stattdessen Prozentangaben machen soll. Hab da diverse Varianten probiert, aber entweder spingt der Balken dann doch wieder in die neue Zeile, oder ich habe doch wieder nur einen begrenzt breiten Balken... Ich sehe da gerade keinen wirklichen Sinn bzw. finde keine Variante, wo es sinn macht.
Hi!
Mittlerweile sehe ich keine Möglichkeit mehr es so zu machen, wie ich es vorhabe, mal sehen auf was es dann hinausläuft und in welche Richtung ich Kompromisse eingehen muss. Falls noch jemand eine idee hat, wäre ich dennoch dankbar.
Vielleicht verstehe ich dein Problem nicht richtig, aber warum machst du den transparenten Balken nicht gleich fix auf dein Hintergrundbild?
FG Ulysses
Hi!
Mittlerweile sehe ich keine Möglichkeit mehr es so zu machen, wie ich es vorhabe, mal sehen auf was es dann hinausläuft und in welche Richtung ich Kompromisse eingehen muss. Falls noch jemand eine idee hat, wäre ich dennoch dankbar.
Vielleicht verstehe ich dein Problem nicht richtig, aber warum machst du den transparenten Balken nicht gleich fix auf dein Hintergrundbild?
FG Ulysses
Sowas hab ich auch erst überlegt, aber letztlich habe ich da das gleiche Problem: Ich weiß nicht wie breit das Stück Balken rechts neben dem Menü ist. Denn die Breite der Menübuttons ist nicht in Pixeln festgesetzt sondern, sondern wird durch die jewielige Länge der Wäter "Home", "Produkte" usw. bestimmt.
Hab schon überlegt, ob ich den Buttons eine feste Breite geben soll. Könnte aber auch problematisch werden wegen Schriftgrößeneinstellung usw. Wäre zumindest eine schöne Lösung, auch wenn sie auf den ersten Blick wahrscheinlich überall OK aussehn würde.
Hi!
Sowas hab ich auch erst überlegt, aber letztlich habe ich da das gleiche Problem: Ich weiß nicht wie breit das Stück Balken rechts neben dem Menü ist. Denn die Breite der Menübuttons ist nicht in Pixeln festgesetzt sondern, sondern wird durch die jewielige Länge der Wäter "Home", "Produkte" usw. bestimmt.
Warum läßt du #links_neben_menu und #rechts_neben_menu nicht einfach weg und gibst deiner Menüliste #menu den Hintergrund mit transpixel_gold.png und dem #menu li a keinen Hintergrund?
FG Ulysses
Hi!
Warum läßt du
#links_neben_menuund#rechts_neben_menunicht einfach weg und gibst deiner Menüliste#menuden Hintergrund mit transpixel_gold.png und dem#menu li akeinen Hintergrund?FG Ulysses
Das hatte ich ja schon probiert. Aber dann habe ich ja eben einen durchgängig goldenen Balken. Beim Hovern über die Listenpunkte müsste aber ja eben in diesem Balken dann eine Lücke erscheinen, was aber nicht geht. Die einzelnen li liegen ja quasi vor dem ul. Wenn ich #menu li a keinen Hintergrund gebe, dann schaut man eben auf #menu.
