mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:04 Benutzername: Passwort: Auto-Login

Thema: Problem mit CSS & JQuery vom 07.08.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Problem mit CSS & JQuery
Autor Nachricht
1two1
Threadersteller

Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht: Männlich
Verfasst Do 07.08.2008 15:35
Titel

Problem mit CSS & JQuery

Antworten mit Zitat Zum Seitenanfang

Halli Hallo Alle miteinander!

Ich habe da eine kleines Problem wo ich gerade absoulut nicht durchsteige, undzwar möchte ich ein Menü mittels CSS & JQuery erstellen wo der Hintergrund beim Rollover durch einen Fade angezeigt wird, das klappt auch soweit, siehe Hier: http://temp.staystyle.de/test/test.html

Problem nun an der Sache, sobald ich im CSS code folgenden Befehl rauswerfe

Code:

#navigation a * {
   display:none;
}


um die Texte anzuzeigen, landet der rollover UNTER dem menü .. siehe hier: http://temp.staystyle.de/test/test2.html

Weiss irgendwer von euch woran das liegen kann und wie man dieses Problem umgehen kann? Bin in CSS / Javascript nicht sooo der Oberking, und Google gibt mir auch keine Antworten *Schnief*

Über eure Hilfe würde ich mich freuen!

Danke im voraus!
1two1


Zuletzt bearbeitet von 1two1 am Do 07.08.2008 15:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
BeezyT

Dabei seit: 10.08.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 10.08.2008 21:55
Titel

Antworten mit Zitat Zum Seitenanfang

das problem ist, dass die beiden spans für den text und den hintergrund einfach hintereinander stehen. da ist ja klar, dass sie hintereinander, bzw untereinander dargestellt werden.
gib doch einfach dem span mit dem text ne klasse, dann kannst dus im css auf die entsprechende breite, und position: absolute setzen. außerdem sollte es dann noch nach (nicht vor) dem hintergrund-span im quelltext erscheinen, das erreichst du dadurch, dass du prepend statt append im js nimmst.
damit sollte es dann alles funktionieren....
  View user's profile Private Nachricht senden
Anzeige
Anzeige
1two1
Threadersteller

Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht: Männlich
Verfasst Mo 11.08.2008 16:41
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

Danke für deine Antwort, nur irgendwie stehe ich gerade auf dem Schlauch Menno!

Ich habe dem Span nun folgene classe gegeben:

Code:

span {
   position:absolute;
   height:28px;
   width:100px;
   }


Und das "append" durch "prepend" im js ersetzt, doch nun erscheint es genau andersrum .. der text landet unter dem menü. Siehe Hier

Außerdem sind die texte durch die breitenangabe im span verutscht.

Könntest du mir vlt. Code mäßig zeigen, wie du das meinst?! Wäre Super!

Danke und Gruß,
Thomas
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 11.08.2008 17:13
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
body {
    font-family: arial;
   font-size:11px;
}

#navigation {
   height:28px;
   width:835px;
     list-style: none;
   background: url(menue-bg.png);
   background-repeat:no-repeat;
   padding-left:40px;
}

#navigation li {
   float:left;
text-align: center;
}

#navigation a span.hover {
position: absolute;
top: 0;
}

#navigation a,
#navigation a .hover {
   padding:0px 20px 0px 20px;
   line-height:28px;
   text-decoration:none;
   color:#ccc;
   border-right:1px solid #343434;
   outline: none;
   display: block;
        position: relative;
   background: url(menue.png) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
   padding:0px;
     background-position: 0 0;
   width:100px;
   height:28px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
   padding:0px;
     background-position: 0 -28px;
   width:100px;
   border-right:1px solid #5a5a5a;
   height:28px;
}



  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
1two1
Threadersteller

Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht: Männlich
Verfasst Mo 11.08.2008 17:54
Titel

Antworten mit Zitat Zum Seitenanfang

Ah, das sieht doch schonmal gut aus! Danke @m .. nur warum wird der text nicht mehr beim rollover angezeigt?! Au weia!

Gruß,
Thomas
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 11.08.2008 18:01
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
body {
    font-family: arial;
   font-size:11px;
}

#navigation {
   height:28px;
   width:835px;
     list-style: none;
   background: url(menue-bg.png);
   background-repeat:no-repeat;
   padding-left:40px;
}

#navigation li {
   float:left;
text-align: center;
}

#navigation a span.hover {
position: absolute;
top: 0;
left:0
}
#navigation a span {
position: absolute;
top: 0;
left:0;
width: 100px;
}

#navigation a,
#navigation a .hover {
   padding:0px 20px 0px 20px;
   line-height:28px;
   text-decoration:none;
   color:#ccc;
   border-right:1px solid #343434;
   outline: none;
   display: block;
   position: relative;
   background: url(menue.png) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
   padding:0px;
     background-position: 0 0;
   width:100px;
   height:28px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
   padding:0px;
     background-position: 0 -28px;
   width:100px;
   border-right:1px solid #5a5a5a;
   height:28px;
}


so müßte es stimmen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
1two1
Threadersteller

Dabei seit: 17.05.2006
Ort: Malente
Alter: 40
Geschlecht: Männlich
Verfasst Mo 11.08.2008 18:05
Titel

Antworten mit Zitat Zum Seitenanfang

Wow, super, danke! * Ja, ja, ja... *

Da wäre ich selbst nie drauf gekommen *zwinker* Aber, nun hab ich wieder was dazu gelernt!

Gruß,
Thomas
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen jQuery Problem
jquery FF und IE8 Problem
problem mit jquery und ie
jquery: Problem mit Safari
Problem mit Jquery und dem Ipad
Problem mit Scroll sticking - jquery
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.