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
FollowersFollowers: 0
BookmarksBookmarks: 0
Views: 395

CSS - Script

Post#1by 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: Select all
<!-- 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
Image
User avatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 7019
Joined: 06.2009
Cash on hand: 100,578.29 Points
Bank: 125,443.10 Points
Thanks: 561
Thanked: 1770 times in 1468 posts
Gender: Male

Re: CSS - Script

Post#2by 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
 
Posts: 396
Joined: 04.2009
Cash on hand: 13,620.68 Points
Bank: 0.00 Points
Location: Niedersachsen
Thanks: 57
Thanked: 83 times in 60 posts
Highscores: 8
Gender: Male
Your Forum URL: http://bulitalk.de

Re: CSS - Script

Post#3by tups » 17.01.2010 23:46

klotzer wrote: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
Image
User avatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 7019
Joined: 06.2009
Cash on hand: 100,578.29 Points
Bank: 125,443.10 Points
Thanks: 561
Thanked: 1770 times in 1468 posts
Gender: Male

Re: CSS - Script

Post#4by 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
User avatar
Loki_GER
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 1877
Joined: 01.2007
Cash on hand: 38.05 Points
Bank: 21,513.74 Points
Thanks: 59
Thanked: 309 times in 194 posts
Gender: Male

Re: CSS - Script

Post#5by 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
User avatar
sventibold
Style Tüftler
Style Tüftler
 
Posts: 1205
Joined: 03.2009
Cash on hand: 5,751.13 Points
Bank: 15,706.93 Points
Thanks: 55
Thanked: 348 times in 226 posts
Gender: Male

Re: CSS - Script

Post#6by 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: Select all
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: Select all
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
Image
User avatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 7019
Joined: 06.2009
Cash on hand: 100,578.29 Points
Bank: 125,443.10 Points
Thanks: 561
Thanked: 1770 times in 1468 posts
Gender: Male

Re: CSS - Script

Post#7by klotzer » 19.01.2010 20:25

tups wrote: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: Select all
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: Select all
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: Select all
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
 
Posts: 396
Joined: 04.2009
Cash on hand: 13,620.68 Points
Bank: 0.00 Points
Location: Niedersachsen
Thanks: 57
Thanked: 83 times in 60 posts
Highscores: 8
Gender: Male
Your Forum URL: http://bulitalk.de

Re: CSS - Script

Post#8by 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
Image
User avatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 7019
Joined: 06.2009
Cash on hand: 100,578.29 Points
Bank: 125,443.10 Points
Thanks: 561
Thanked: 1770 times in 1468 posts
Gender: Male

Re: CSS - Script

Post#9by 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
 
Posts: 396
Joined: 04.2009
Cash on hand: 13,620.68 Points
Bank: 0.00 Points
Location: Niedersachsen
Thanks: 57
Thanked: 83 times in 60 posts
Highscores: 8
Gender: Male
Your Forum URL: http://bulitalk.de

Re: CSS - Script

Post#10by 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
Image
User avatar
tups
Supporter im Ruhestand
Supporter im Ruhestand
 
Posts: 7019
Joined: 06.2009
Cash on hand: 100,578.29 Points
Bank: 125,443.10 Points
Thanks: 561
Thanked: 1770 times in 1468 posts
Gender: Male


Return to "Small-Talk"


 

Who is online

Users browsing this forum: No registered users and 2 guests