Registriere dich hier, um versteckte Bereiche sehen zu können, Highscores zu speichern oder Fragen zu stellen!

CSS - Script

Kostenloses phpbb2 Forum
phpbb2 Forum Hosting
www.phpbb6.de
phpbb9 ist das Support Forum für unsere Hosting Services.Hilfe nur für Foren von Kostenloses-Forum.be, Userboard.org, plusBB, phpbb8.de, phpbb6.de, Gratis-Board.de und Forumo.de.
Du hast dein Forum nicht bei uns? Dann schaue dich um und siehe was du selbst völlig kostenlos machen könntest, gucke dir auch andere interessante Foren aus unserem Netzwerk an!
Du erhältst hier Tipps und Problemlösungen zu deinem Forum bei uns!

phpbb3
phpBB3 Forum Hosting
www.phpbb8.de
AbonnentenAbonnenten: 0
LesezeichenLesezeichen: 0
Zugriffe: 460

CSS - Script

Beitrag#1von tups » 17.01.2010 23:02

Da diese Thema jetzt nicht wirklich was mit dem Support zu tun hat, setze ich es mal in den Small-Talk Bereich.

Ich sitze nun schon seit einiger Zeit an diesem dusseligen CSS-Script für ein Slidemenu, habe mir dafür die Inspiration von verschiedenen Scripten geholt.
Es funktioniert soweit auch einwandfrei, nur habe ich jetzt Probleme das Menu zu zentrieren.
Ich habe nun schon verschiedene Befehle zum Zentrieren ausprobiert, aber keiner funktioniert wirklich.
Ich habe es auch schon mit table versucht.... keine Chance.

Im IE wird es dann zwar versetzt, aber auch nicht richtig zentriert, sondern es wird zu weit nach rechts versetzt.
Im Firefox rührt sich gar nichts, es bleibt wie angeklebt auf der linken Seite haften.

Hat da jemand eine Idee was das sein könnte, bzw. wo ich den Denkfehler habe?

Es wäre toll wenn sich das mal jemand anschauen könnte.

so sieht das Menue aus, und wie man sehen kann, ist es nicht genau zentriert.
Aufzeichnen.JPG



Vielen Dank schon mal.


und hier mal das Script:
Code: Alles auswählen
<!-- Start tupsSlideMenu STYLE -->
<style>
#tups{display:none;}
ul.tupsSlideMenu ul{display:none}
ul.tupsSlideMenu li:hover>ul{display:block}
ul.tupsSlideMenu ul{position: absolute;left:-1px;top:98%;}
ul.tupsSlideMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.tupsSlideMenu,ul.tupsSlideMenu ul {
   margin:0px;
   list-style:none;
   padding:0px 3px 3px 0px;
   background-color:#444C56;
   background-repeat:repeat;
   border-color:#CECECE;
   border-width:4px;
   border-style:ridge;
}
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
   position:absolute;
   z-index: 1000;
   left: 100;
   top: 200;
}
* HTML ul.tupsSlideMenu {position:absolute}
ul.tupsSlideMenu ul{
   width:60.900000000000006px;
}
ul.tupsSlideMenu li{
   display:block;
   margin:3px 0px 0px 3px;
   font-size:0px;
}
ul.tupsSlideMenu a:active, ul.tupsSlideMenu a:focus {
outline-style:none;
}
ul.tupsSlideMenu a, ul.tupsSlideMenu li.dis a:hover, ul.tupsSlideMenu li.sep a:hover {
   display:block;
   vertical-align:middle;
   background-color:#444C56;
   border-width:1px;
   border-color:#000;
   border-style:solid;
   text-align:left;
   text-decoration:none;
   padding:4px;
   _padding-left:0;
   font:bold italic 11px Arial;
   color: #FFCC00;
   text-decoration:none;
   cursor:pointer;
}
ul.tupsSlideMenu span{
   overflow:hidden;
}
ul.tupsSlideMenu li {
   float:left;
}
ul.tupsSlideMenu ul li {
   float:none;
}
ul.tupsSlideMenu ul a {
   text-align:left;
   white-space:nowrap;
}
ul.tupsSlideMenu li.sep{
   text-align:left;
   padding:0px;
   line-height:0;
   height:100%;
}
ul.tupsSlideMenu li.sep span{
   float:none;   padding-right:0;
   width:3;
   height:100%;
   display:inline-block;
   background-color:#CECECE;   background-image:none;}
ul.tupsSlideMenu ul li.sep span{
   width:100%;
   height:3;
}
ul.tupsSlideMenu li:hover{
   position:relative;
}
ul.tupsSlideMenu li:hover>a{
   background-color:#DBF0F9;
   border-color:#45ADE4;
   border-style:solid;
   font:bold italic 11px Arial;
   color: #444;
   text-decoration:none;
}
ul.tupsSlideMenu li a:hover{
   position:relative;
   background-color:#DBF0F9;
   border-color:#45ADE4;
   border-style:solid;
   font:bold italic 11px Arial;
   color: #444;
   text-decoration:none;
}
ul.tupsSlideMenu li.dis a {
   color: #AAAAAA !important;
}
ul.tupsSlideMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.tupsSlideMenu ul img {width:16px;
height:16px;
}
ul.tupsSlideMenu img.over{display:none}
ul.tupsSlideMenu li.dis a:hover img.over{display:none !important}
ul.tupsSlideMenu li.dis a:hover img.def {display:inline !important}
ul.tupsSlideMenu li:hover > a img.def  {display:none}
ul.tupsSlideMenu li:hover > a img.over {display:inline}
ul.tupsSlideMenu a:hover img.over,ul.tupsSlideMenu a:hover ul img.def,ul.tupsSlideMenu a:hover a:hover ul img.def,ul.tupsSlideMenu a:hover a:hover img.over,ul.tupsSlideMenu a:hover a:hover a:hover img.over{display:inline}
ul.tupsSlideMenu a:hover img.def,ul.tupsSlideMenu a:hover ul img.over,ul.tupsSlideMenu a:hover a:hover ul img.over,ul.tupsSlideMenu a:hover a:hover img.def,ul.tupsSlideMenu a:hover a:hover a:hover img.def{display:none}
ul.tupsSlideMenu a:hover ul,ul.tupsSlideMenu a:hover a:hover ul{display:block}
ul.tupsSlideMenu a:hover ul ul{display:none}
</style>
<!-- End tupsSlideMenu STYLE -->



<!-- Start tupsSlideMenu MENU -->
<ul class="tupsSlideMenu tupsSlideMenum">
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#"><span>Name</span><![if gt IE 8]></a><![endif]><!--[if lte IE 8]><table><tr><td><![endif]-->
   <ul class="tupsSlideMenum">
      <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
      <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
      <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#"><span>Name</span><![if gt IE 8]></a><![endif]><!--[if lte IE 8]><table><tr><td><![endif]-->
      <ul class="tupsSlideMenum">
         <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
         <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
         <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
      </ul>
      <!--[if lte IE 8]></td></tr></table></a><![endif]--></li>
      <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   </ul>
   <!--[if lte IE 8]></td></tr></table></a><![endif]--></li>
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#"><span>Name</span><![if gt IE 8]></a><![endif]><!--[if lte IE 8]><table><tr><td><![endif]-->
   <ul class="tupsSlideMenum">
      <li class="tupsSlideMenui"><a class="tupsSlideMenui" href="#">Name</a></li>
   </ul>
   <!--[if lte IE 8]></td></tr></table></a><![endif]--></li>
</ul>
<!-- End tupsSlideMenu MENU -->

<!-- © 2010, tupsSlideMenu -->



LG Peter
Bild
Benutzeravatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 7019
Registriert: 06.2009
Barvermögen: 100.578,29 Points
Bank: 125.442,55 Points
Danke gegeben: 561
Danke bekommen: 1770x in 1468 Posts
Geschlecht: männlich
Forenstyle: X-Silver

Ähnliche Themen
» Script funktioniert nicht mehr

Re: CSS - Script

Beitrag#2von klotzer » 17.01.2010 23:29

ohne mich jetzt genauer damit verfasst zu haben, sieht das für mich so aus, als ob du das in die selbe Zeile wie "Help - Hilfe bei Computerfehlern und Programmen" geschrieben hast.

Wenn es das nicht sein sollte, werde ich mich gerne mal morgen damit intensiver befassen. (natürlich wie immer ohne Garantie, dass es dann klappt ;) )

Gruß Phil
http://bulitalk.de Das Forum für fußballfans
http://forenbetreiber.forumo.de - das Forum für Forumisten
klotzer
Foren-Guru
Foren-Guru
 
Beiträge: 396
Registriert: 04.2009
Barvermögen: 13.620,68 Points
Bank: 0,00 Points
Wohnort: Niedersachsen
Danke gegeben: 57
Danke bekommen: 83x in 60 Posts
Highscores: 7
Geschlecht: männlich
Deine Foren-URL: http://bulitalk.de

Re: CSS - Script

Beitrag#3von tups » 17.01.2010 23:46

klotzer hat geschrieben:ohne mich jetzt genauer damit verfasst zu haben, sieht das für mich so aus, als ob du das in die selbe Zeile wie "Help - Hilfe bei Computerfehlern und Programmen" geschrieben hast.

Wenn es das nicht sein sollte, werde ich mich gerne mal morgen damit intensiver befassen. (natürlich wie immer ohne Garantie, dass es dann klappt ;) )

Gruß Phil


Also, da weiß ich jetzt nicht was du meinst.
Was für Hilfe bei Computerfehlern und Programmen? :???:

Diese Script habe ich bisher noch nicht veröffentlicht und auch noch keine Fragen zu gestellt, da es noch nicht wirklich rund läuft (im Bereich Zentrieren).


LG Peter


edit: Ahhhhhhh, :eyes: schon gut, ich weiß was du meinst, aber nein, das steht nicht in der gleichen Zeile, die Schrift wird ja auch überdeckt, aber nichts desto trotz funktioniert es nicht im FF
Bild
Benutzeravatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 7019
Registriert: 06.2009
Barvermögen: 100.578,29 Points
Bank: 125.442,55 Points
Danke gegeben: 561
Danke bekommen: 1770x in 1468 Posts
Geschlecht: männlich
Forenstyle: X-Silver

Re: CSS - Script

Beitrag#4von Loki_GER » 18.01.2010 00:11

Schön das ich nicht der einzige bin dem es so geht :cool:

Ich tüftel auch schon seit ein paar Tagen an einem Menü rum und finde den richtigen "Schalter" einfach nicht, sag bescheid wenn du ihn gefunden hast. :D


Loki
Benutzeravatar
Loki_GER
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 1877
Registriert: 01.2007
Barvermögen: 38,05 Points
Bank: 21.513,19 Points
Danke gegeben: 59
Danke bekommen: 309x in 194 Posts
Geschlecht: männlich

Re: CSS - Script

Beitrag#5von sventibold » 18.01.2010 01:51

Ich habe es jetzt nicht probiert, aber wenn ich mal so in den dunklen Ecken meines Gehirns wühle, dann meine ich mich zu erinnern, dass man dazu das DIV-TAG nutzen muss. Versucht es doch mal :)

lg
Sven
Forum für alle mit auslands Fernbeziehung
Benutzeravatar
sventibold
Style Tüftler
Style Tüftler
 
Beiträge: 1205
Registriert: 03.2009
Barvermögen: 5.751,13 Points
Bank: 15.706,38 Points
Danke gegeben: 55
Danke bekommen: 348x in 226 Posts
Geschlecht: männlich

Re: CSS - Script

Beitrag#6von tups » 19.01.2010 18:51

Das Problem dabei ist, wenn ich es mit dem Div-Tag zentriere, wird es nur im IE zentriert, aber nicht im Firefox.

Ich habe aber nun einen Weg gefunden um es in beiden Browsern zu zentrieren. Dafür habe ich in der Styledefinition folgendes verändert
hier zum Vergleich der unveränderte Code
Code: Alles auswählen
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
   position:absolute;
   z-index: 1000;
   left: 100;
   top: 200;
}


und hier die Änderung
Code: Alles auswählen
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
   position:absolute;
   left: 38%;
}


So weit, so gut.... nun tritt allerdings wieder ein Problem auf, die Prozentzahl scheint irgendwie mit der Bildschirmauflösung zusammenzuhängen, denn bei einer Auflösung ist es zentriert, bei einer anderen wieder nicht.

Gibt es noch eine Möglichkeit das es für alle Bilschirmauflösungen zentriert werden kann?


LG Peter
Bild
Benutzeravatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 7019
Registriert: 06.2009
Barvermögen: 100.578,29 Points
Bank: 125.442,55 Points
Danke gegeben: 561
Danke bekommen: 1770x in 1468 Posts
Geschlecht: männlich
Forenstyle: X-Silver

Re: CSS - Script

Beitrag#7von klotzer » 19.01.2010 20:25

tups hat geschrieben:Das Problem dabei ist, wenn ich es mit dem Div-Tag zentriere, wird es nur im IE zentriert, aber nicht im Firefox.

Ich habe aber nun einen Weg gefunden um es in beiden Browsern zu zentrieren. Dafür habe ich in der Styledefinition folgendes verändert
hier zum Vergleich der unveränderte Code
Code: Alles auswählen
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
   position:absolute;
   z-index: 1000;
   left: 100;
   top: 200;
}


LG Peter


ändern in

Code: Alles auswählen
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
position: absolute;
left: 50%;
top: 200;


dann rutscht er nach rechts weg. Du musst also noch den Mittelpunkt fixieren. Dazu musst du einfach die hälfte der Pixel nehmen, die du für dein Slidemenü verwendest.

Wenn dein Slidemenü z.B 100 pixel hat musst das so aussehen:
Code: Alles auswählen
ul.tupsSlideMenu table {border-collapse:collapse}ul.tupsSlideMenu {
   display:block;
   zoom:1;
position: absolute;
left: 50%;
top: 200;
margin-left: -50px;


Gruß Phil

PS: Hab es jetzt nicht nochmal getestet, aber css verhält sich meist so, dass man tausendmal um die ecke denken muss ;)

[edit: ab 20h hab ich mehr zeit. Werde das gerne mal testen dann
http://bulitalk.de Das Forum für fußballfans
http://forenbetreiber.forumo.de - das Forum für Forumisten
klotzer
Foren-Guru
Foren-Guru
 
Beiträge: 396
Registriert: 04.2009
Barvermögen: 13.620,68 Points
Bank: 0,00 Points
Wohnort: Niedersachsen
Danke gegeben: 57
Danke bekommen: 83x in 60 Posts
Highscores: 7
Geschlecht: männlich
Deine Foren-URL: http://bulitalk.de

Re: CSS - Script

Beitrag#8von tups » 19.01.2010 20:53

Super, ich danke dir Phil :blume:

Genau das ist ja das Problem gewesen, das um die tausend Ecken denken.... hatte wohl nur Gedanken für 999 Ecken :D
Ich hatte es zwar auch schon mit margin versucht, allerdings nicht mit margin-left... aber mal wieder den Wald vor lauter Bäumen nicht gefunden :lol:

Für eine genau Zentrierung musste ich den Wert margin-left auf -134px setzen, nun ist es bei jeder Bildschirmauflösung zentriert.

Nochmals Danke :thumbsup:



LG Peter
Bild
Benutzeravatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 7019
Registriert: 06.2009
Barvermögen: 100.578,29 Points
Bank: 125.442,55 Points
Danke gegeben: 561
Danke bekommen: 1770x in 1468 Posts
Geschlecht: männlich
Forenstyle: X-Silver

Re: CSS - Script

Beitrag#9von klotzer » 19.01.2010 21:07

ahh, wunderbar. Zum glück haste jetzt schon geschrieben, ansonsten hätte ich mich jetzt rangesetzt und wahrscheinlich selbst wieder die Hälfte vergessen :D

css is bisher das ekligste, wo ich mich rangemacht habe, das verwirrt mich immer ganz schön :eyes:

Na, noch ein paar Trainingsstunden und dann funzt das auch :D

Gruß Phil
http://bulitalk.de Das Forum für fußballfans
http://forenbetreiber.forumo.de - das Forum für Forumisten
klotzer
Foren-Guru
Foren-Guru
 
Beiträge: 396
Registriert: 04.2009
Barvermögen: 13.620,68 Points
Bank: 0,00 Points
Wohnort: Niedersachsen
Danke gegeben: 57
Danke bekommen: 83x in 60 Posts
Highscores: 7
Geschlecht: männlich
Deine Foren-URL: http://bulitalk.de

Re: CSS - Script

Beitrag#10von tups » 20.01.2010 00:02

Naja, aber es macht Spaß damit zu arbeiten.
Das Problem ist dann nur, wenn du tagelang davor sitzt und etwas suchst und probierst, und es nicht klappt, dann könnte man verzweifeln, und im Prinzip ist es nur eine Kleinigkeit.

Ich war schon drauf und dran mir ein komplettes Menu aus dem Netz zu holen, aber das war mir dann doch zu einfach :ja:
Aber immerhin... Problem erkannt, Problem gelöst. :klasse:


Nur noch kurz zur Vervollständigung: das margin-left: -50px; muss je nach Größe des Menu angepasst werden. Es ist also nicht immer der Wert -50, bzw -134 wie ich zuvor geschrieben habe.
Das kommt daher, dass das Menu durch die float:xxx und position:absolute Befehle festgestezt wird und die Einstellung zum Zentrieren geht dann halt nur über einen festen Eckpunkt.


LG Peter
Bild
Benutzeravatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Beiträge: 7019
Registriert: 06.2009
Barvermögen: 100.578,29 Points
Bank: 125.442,55 Points
Danke gegeben: 561
Danke bekommen: 1770x in 1468 Posts
Geschlecht: männlich
Forenstyle: X-Silver


Zurück zu "Small-Talk"


 

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast