CSS Content überdeckt menu
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
after
alpha
beispiel
bekommen
bereich
blocken
boxen
code
design
display
filter
index
opus
position
problem
radius
setzen
text
url
vergeben
-
Hallo, ich steh gerade etwas auf dem schlauch.
Scheint nur ein Formatierungsfehler zu sein, doch anscheinend suche ich am falschen Ort.
Deshalb frage ich nun mal euch :)
Ich werdende Menu, das unterschiedliche Unteerpunkte per hover einblendet.
Da ich immer so gut wie nicht kommentiere ( könnt mich gerne dafür flamen ) sind meine codes fast alle ziemlich unübersichtlich.
Hier jedoch mal der CSS code für mein Menü (musste ne menge unrelevantes löschen, an
o.ä. kann es wohl kaum lieben also hier code:background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
[spoiler]
[/spoiler]#cssmenu ul, /*allg fix*/ #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; } #cssmenu /*haupt div*/ { height: 49px; text-align:center; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #141414; border-bottom: 2px solid #00ff00; z-index:3; filter:alpha(opacity=50); /* IE */ - moz-opacity: 0.50; /* Mozilla */ opacity: 0.50; /* Opera */ } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a /*color links etc*/ { background: #141414; color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #cssmenu ul { list-style: none; } #cssmenu > ul { float: left; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #00ff00; margin-left: -10px; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li:last-child > a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; } #cssmenu > ul > li.active > a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; } #cssmenu > ul > li:hover > a { background: #070707; box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; } #cssmenu .has-sub { } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; z-index:3; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #00AA00; border-bottom: 1px dotted #00CC00; filter: none; font-size: 11px; display: block; line-height: 120%; z-index:3; padding: 10px; } #cssmenu .has-sub ul li:hover a { background: #001100; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; z-index:3; } #cssmenu .has-sub .has-sub ul li a { background: #00AA33; border-bottom: 1px dotted #00CC00; } #cssmenu .has-sub .has-sub ul li a:hover { background: #001100; }
und hier der der relevanten divs
[spoiler]
html { width: 100%; height: 100%; background-image:url("../img/1.jpg"); background-color:#000000; background-repeat: no-repeat; background-position:center; background-size:cover; } body { width:800px; margin:0 auto; color:white; } #head { margin-top:10px; margin-bottom:10px; position:relative; height:40px; width:800px; background-color:#141414; filter:alpha(opacity=50); /* IE */ - moz-opacity: 0.50; /* Mozilla */ opacity: 0.50; /* Opera */ z-index:-1; overflow:hidden; } h2 {margin-top:0px;} #content { position:relative; min-height:500px; width:790px; background-color:#141414; filter:alpha(opacity=50); /* IE */ - moz-opacity: 0.50; /* Mozilla */ opacity: 0.50; /* Opera */ z-index:1; padding:5px; } #foot { position:relative; margin-top:10px; height:20px; width:800px; background-color:#141414; filter:alpha(opacity=50); /* IE */ - moz-opacity: 0.50; /* Mozilla */ opacity: 0.50; /* Opera */ z-index:1; }
[/spoiler]
ps.: das dort mitlerweile viele doppelt und 3fach drinne steht liegt an meinen anpassungen im zuge der fehlersuche.
naja hoffe jmd hat die zeit / lust sich durch meinen müll zu wühlen ;)
mfg
Beitrag zuletzt geändert: 26.9.2012 8:31:32 von dishonored -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich denke, es wäre deutlich einfacher für uns/mich, wenn du uns eine Testseite hochlädst, auf der wir genau sehen können, wie es aussieht und was Problem ist. Gib uns also entweder der Link auf dem du arbeitest (nur wenn sichergestellt ist, dass dort kein Unfug getrieben werden kann) oder kopiere das Wesentliche in ein neues Verzeichnis.
Ich zumindest könnte dann besser helfen. :) -
ich arbeite lokal, stell aber sofort mal ein beispiel online
war ein wenig komplizierter, irgendwie hat mein ftp tool ständig leere dateien o.ä. kompiert.. aber nun solltet ihr ein eindruck davon bekommen
www.dishonored.lima-city.de/test/guild/
übrigends wenn ich dem content z-index:-1 zuweise nimmt er es an, deswegen denke ich das ich n fehler im bereich des menus habe.
bei z-index:-1 ist dann aber kein link o.ä. im menü mehr klickbar
Beitrag zuletzt geändert: 26.9.2012 12:52:30 von dishonored -
Ich bin hier meist auch nur der Hilfesuchende, aber hast Du mal probiert den z-index auch bei
anzugeben? Wenn ich das richtig sehe, werden die Links ja ohne z-index, unterhalb des Content ausgeführt, da dieser ja#ccsmennu a
hat. Müsstst dann halt noch eine Positionsangabe einfügen zum z-index beimz-index:1#cssmenu a
#cssmenu a /*color links etc*/ { background: #141414; color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; }
Alles ohne Gewähr, nur die meine Idee dazu.
LG -
natürlich habe ich das!
#cssmenu hat ja auch schon einen zindex, sollte also auch erben, habe aber an alle unterlemente schon indexes vergeben. die werden ignoriert, das einzige was funktioniert ist dem cont -1 zu geben, daraufhin ist er aber nicht mehr klickbar ...
ich vermute schon fast es liegt an dem
das nerft mich ungemein!! ich bekomme auch divs die in dem transparenten liegen nicht mehr auf opacity=1 .. bzw. sie bleiben immer gleich durchsichtig...opacity
danke das du dir gedanken machst, ich glaub aber eher an irgendeinen logik oder logischen fehler .... ein ; wäre schön ;) -
Der Content überdeckt das Menü nicht, er scheint durch.
Grund ist, wie von dir bereits erkannt, die opacity : #cssmenu {opacity:0.5;} in menu_1.css
Beitrag zuletzt geändert: 26.9.2012 17:49:38 von fatfreddy -
kla überdeckt er es, für head habe ich noch zindex-1 gesetzt, deswegen übderdeckt meine"headspalte" nicht das menu, der content schon!
( mit content meine ich den inhalt, nicht die title bzw überschrift bei mir headspalte ) sry der etwas verwirrenden bezeichnung.. die hab ich aus demo zwecken noch -1 gelassen.
merkt man daran, dass wenn du in ein submenü gehen willst, welches über bzw bei mir leider unter dem content liegt es wieder verschwindet, weil wird ja nicht mehr gehovert sondern der content da er vorn liegt
Beitrag zuletzt geändert: 26.9.2012 18:08:35 von dishonored -
Sorry, aber wenn ich dein oben verlinktes Beispiel betrachte, liegt das Menü definitiv ÜBER dem Content (Das Div mit der ID "content"). . Zumindest in Chrome und Firefox. Es lassen sich auch problemlos die Submenüs hovern.
-
WAS??! ich hab keine ahnung wie das kommen kann .... ff und chrome haben bei mir beide das problem genau so wie der ie ???
das kapiere ich nich.... ich werd mal auf einem anderen gerät teste.
@ all
wie wird die site bei euch dargestellt
edit:
also ich habe um mein problem zu verdeutlichen nun nochmal unter de, punkt Memberarea viele unterpunkte eingefügt.
damit es auch jedem klar ist..
auf meinem pc meinem privaten sowie meinem firmenlaptop wird die site genau gleich dargestellt, eben mit den beschriebenen problemen, übrigends genauso auf meinem handy.
Beitrag zuletzt geändert: 26.9.2012 20:02:21 von dishonored -
dishonored schrieb:
Ich werdende Menu, das unterschiedliche Unteerpunkte per hover einblendet.
Da ich immer so gut wie nicht kommentiere ( könnt mich gerne dafür flamen ) sind meine codes fast alle ziemlich unübersichtlich.
das ist bei dem bisschen code absolut überflüssig... außerdem ist das kommentieren einer Auszeichnungssprache und ihrem Design genau so sinnvoll wie das übersetzen eines in Hochdeutsch geschriebenen Textes in Hochdeutsch...
1. opacity und alle anderen funktionen die dasselbe für andere browser machen bereiten Probleme... immer... deswegen rausschmeißen. das baust du dann erst im letzten schritt wieder rein...
2. deine überschrift ist irreführend... CSS ist Design und kein Content... bitte gescheit formulieren
3. du sagst du hast ein Problem, aber was ist denn dein Problem? besser formulieren, wenn du das nächste mal nach Hilfe schreist...
Nachdem ich mir en quelltext deiner Template-seite angeschaut habe, ist mir klar, was dein Problem ist:
dein dynamisch ausklappbares menü verschwindet hinter dem content-Bereich. deine <li> bekommen den z-index nicht, wie es scheint und den auf die <a> attribute zu setzen ist recht sinnfrei an der stelle...
lösung für dein problem: setz den z-index für den Content auf -1.
Ich habs nachgeprüft mit entwicklertools, passt, ist aber keine elegante lösung, ich empfehle, das menü in divs zu packen und nicht mit ul/li zu machen... -
sebulon schrieb:
deswp schrieb:
Ich hab zwar nur die Hälfte verstanden, aber wenn ich mich nicht irre sollte das die Lösung deines Problems sein:
#cssmenu { ... position: relative; ... }
cool wärs, wenn du die posts deiner vorposter lesen würdest... und dir vom TE den link anschauen wirdest, bevor du sowas vom stapel lässt...
und ja, du irrst dich...
du hast weder die seite aufgerufen, noch geschaut, was das problem ist...
Gut, lass mich Zusammenfassen wie ichs verstanden hab:
Das Problem ist, dass die Untermenüs der Navigationsleiste unter der Contentbox erscheinen, was diese unanklickbar macht.
Deine Lösung: z-index des Contents auf -1 setzen. Geht sogar.
Meine Lösung, position: relative auf die Navigationsleiste anzuwenden, geht ebenso.
Wir haben also beide genau das Gleiche bewirkt. -
ui, werde mich demnächst die anfragen besser formatieren!!
hinter css gehört ein trennzeichen! somit wäre der titel auch übersichtlicher
aber nichts destotrotz sind, wenn ich id content auf z-1 setze die links etc im content bereich nicht mehr klickbar, selbst ein engeblendetes i frame, welches ich in ein absolutes div gepackt habe und mit einem hohen zindex versehen habe war nicht klickbar!
was aber nun wunderbar funktioniert ist das menue mit der position:relative; ich weiß nicht genau warum, dachte das attribut shcon vergeben zu haben!
jedenfalls vielen dank für den hinweiß!
mit der transparenz werde ich nochmal gesondert herumprobieren
css zu kommentieren, ist natürlich nicht wirklich notwenig, doch ists bei mir eher die regel.... zum teil 1000 zeilen lange scripte sind völlig unstrukturiert und umkommentiert... ich blicke, wenn ich sie ein halbes jahr unangetastet lasse, selber nicht mehr durch...
Beitrag zuletzt geändert: 26.9.2012 21:03:24 von dishonored -
Hast du auch meinen gelöschten Vorschlag ausprobiert? (in meinem letzten Post nochmal zitiert)
Wenn du den z-index von content auf -1 setzt werden die Links darin deshalb unanklickbar, weil du es sozusagen unter den body legst.
Wenn du den Überblick über deinen Code nicht so schnell verlieren willst solltest du auch nicht unbedingt alles, was du so da rein brainstormst, auch drinne stehen lassen. Sonst wirkt es in der Tat äußerst unübersichtlich.
Beitrag zuletzt geändert: 26.9.2012 21:05:35 von deswp -
also in der Webversion, die du online hast funktioniert mit meiner lösung alles einwandfrei. aktualisiere bitte diese version, offensichtlich hast du da irgendein div mehr als in der online version...
also deine links sind bei mir klickbar, ich teste mit IE und Firefox und beides läuft... womit testest du? -
jo! zindex war nicht vergeben bis das problem mit dem menu auftrat!
sämtliche seltsamen position angaben und indexes sind zur fehlerbehebung enstanden.
--zu oben: habe position:relative in dem online beispiel gesetzt, deswegen funktioniert es jetzt auch dort
dein post kam wärend meinem, habe ihn auch edited!
@ deswp danke dir nochmal. btw kann deinen ersten post nich finden
jo ist kla bei -1 ist es sozusagen bg.
Beitrag zuletzt geändert: 26.9.2012 21:07:44 von dishonored -
Supi, da hat das sogar funktioniert was ich vom Stapel gelassen hab
z-index funzt eben nur dann, wenn die Position des entsprechenden Elements auf absolute oder relative gesetzt ist.
Ich hab übrigens gerade nochmal content auf -1 gesetzt in Firefox (habs eben mit Chrome probiert), und in Firefox kann ich danach auch nicht mehr den Link anklicken.
EDIT: Kannst du deswegen nicht finden, weil er von einem Moderator gelöscht wurde
Beitrag zuletzt geändert: 26.9.2012 21:13:59 von deswp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
