Ankündigung

Einklappen
Keine Ankündigung bisher.

Homepage zentriert - Java Menue

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Homepage zentriert - Java Menue

    Hallo,
    ich arbeite gerade an meiner Homepage. Ich wollte diese mit CSS im Browser zentrieren. Das funktioniert auch soweit. ( Bin kein Experte ). Ich habe ein Java Menue ( jsDOMenu Version 1.3) und dort werden feste Werte für die Positionierung angegeben. Kann ich denn ein Java-Menue auch in einem Div-Container "fesseln" , so dass es dann an der richtigen Position ist? Oder iframe?

    Ich bin dankbar für jede Hilfe.

    Shrek

  • #2
    AW: Homepage zentriert - Java Menue

    Gib dem div welches das Menü umgibt die CSS-Eigenschaft "position: relative;". Dadurch werden in diesem div absolut positionierte Elemente innerhalb des erstgenannten div ausgerichtet.

    Btw.: Java-Menüs sind hinderlich für Suchmaschinen. Dort wirst du dadurch vermutlich weniger Erfolge haben.

    Kommentar


    • #3
      AW: Homepage zentriert - Java Menue

      Danke für die schnelle Antwort.
      Es soll ein Ausklappmenue werden.
      Ist sowas denn rein per CSS möglich?

      Grüsse Shrek

      Kommentar


      • #4
        AW: Homepage zentriert - Java Menue

        Hallo, willkommen im Forum!
        Hauptsache, die Positionierung ist nicht fixed, dann sollte das immer gehen bin ich der meinung; kann mich aber auch schwer irren
        @threadi
        Das geht doch hier um ein JavaScript-Menue, und das kann irgendwie nicht hinderlich fuer Suchmaschinen sein, oder?
        Ich meine, wenn du ein Menue baust, dann doch am besten mit JavaScript...


        Edit (autom. Beitragszusammenführung):

        Das geht ganz recht mit CSS!
        am besten guck mal hier: http://www.homepage-forum.de/showthread.php?t=33321.
        Da war so eine aehnliche Sache erst kuerzlich, da gibt es auch soweit ich mich entsinne CSS-Beispiele.
        Zuletzt geändert von Koesmi; 21.10.2007, 00:19. Grund: Antwort auf eigenen Beitrag innerhalb von 24 Stunden!

        Kommentar


        • #5
          AW: Homepage zentriert - Java Menue

          Jop, JavaScript-Menüs sind schon Suchmaschinenfreundlich - vorausgesetzt man versteckt die relevanten Links nicht in JavaScript-Code sondern schreibt sie direkt in den HTML-Code. JavaScript sollte dann nur zur Animation dienen, zu nichts anderem.

          Im ersten Post steht Java-Menü

          Kommentar


          • #6
            AW: Homepage zentriert - Java Menue

            Noch kann man das ja ändern. Hauptsache ist, ich kriege das Menue in diesen Layer (Dreamwaever) und es ist beim zentrieren an der richtigen stelle. Das Java Menue war in der alten Seite, deshalb dacht ich man kann es vielleicht nutzen. Wenn es aber nachteilig ist oder gar nicht geht muss ich ein anderes bauen.

            Kommentar


            • #7
              AW: Homepage zentriert - Java Menue

              Hinweis: Java und JavaScript sind 2 unterschiedliche Dinge. Nicht, dass du das jetzt verwechselst ...

              Kommentar


              • #8
                AW: Homepage zentriert - Java Menue

                Hey shrek,
                ich glaube so ein Menue wie du meinst ist gar nicht nachteilig fuer dich, hoert sich jedenfalls nicht so an, aber falls du doch noch mal ganz sichergehen willst, poste doch mal einen Link zu deiner Page, dann kann man ja sofort sehen, worums GENAU geht.
                Ich glaube auch, so wie threadi sagt, dass du JavaScript meinst, so wird das wohl sein, ja.
                Aber schick mal den Link, dann sieht man das schon weitaus deutlicher, was du meinst; das waere gut.

                Kommentar


                • #9
                  AW: Homepage zentriert - Java Menue

                  Hallo an alle,
                  also ich poste jetzt mal den Code. Im Moment kann ich leider nichts onlinestellen.
                  Die Homepage wird durch div id="zentrierung" und id="content" zentriert und die Inhalte werden in id="content" abgelegt. Hat jemand eine Idee wie ich dieses Menue ( jsDOMenu Version 1.3 ) fest an die "graue Stelle" bekomme. Position von oben 250px. Bitte schaut doch mal drüber, vielleicht könnt ihr mir helfen:


                  Code html-Datei:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                  <link rel="stylesheet" type="text/css" href="office_xp.css" />
                  <script type="text/javascript" src="jsdomenu.js"></script>
                  <script type="text/javascript" src="jsdomenu.inc.js"></script>
                  <script language="JavaScript" type="text/JavaScript">
                  <!--
                  function MM_reloadPage(init) { //reloads the window if Nav4 resized
                  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
                  document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
                  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
                  }
                  MM_reloadPage(true);
                  //-->
                  </script>
                  <style type="text/css">
                  <!--

                  body {
                  color: white;
                  margin: 0;
                  padding:0;
                  }
                  #zentrierung {
                  text-align: center;
                  position: absolute;
                  top: 0px;
                  width: 100%;
                  z-index: 2;
                  }
                  #content {
                  width: 950px;
                  height: 800px;
                  background-color:#CCFFFF;
                  font-family: Verdana, Geneva, Arial, sans-serif;
                  margin-left: -475px;
                  position: absolute;
                  top: 0px;
                  left: 50%;
                  }
                  .Stil5 {
                  font-family: Arial;
                  font-size: 12px;
                  }
                  -->
                  </style><head>
                  <title>Testseite</title>
                  </head>
                  <body onload="initjsDOMenu()">
                  <div id="zentrierung">
                  <div id="content">
                  <div id="Layer1" style="position:absolute; left:0px; top:16px; width:601px; height:171px; z-index:1"><font color="#666666" size="4" face="Arial, Helvetica,

                  sans-serif">Inhalte</font></div>
                  <div id="Layer2" style="position:absolute; left:0px; top:250px; width:150px; height:300px; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px

                  none #000000;"><font color="#666666" size="4" face="Arial, Helvetica, sans-serif"><strong><font size="1">Hier
                  soll das menue hin</font></strong></font></div>
                  </div>
                  </div>
                  <p>&nbsp;</p>
                  <p>&nbsp; </p>
                  <p>&nbsp;</p>
                  </div>
                  </div>
                  </body>
                  </html>
                  ************************************************** **********************************************
                  Code: menue:

                  function createjsDOMenu() {
                  absoluteMenu1 = new jsDOMenu(160, "absolute", "", true);
                  with (absoluteMenu1) {
                  addMenuItem(new menuItem("Home", "", "index.html"));
                  addMenuItem(new menuItem("-"));
                  addMenuItem(new menuItem("Menue1", "", "menue1.html"));
                  addMenuItem(new menuItem("Menue2", "sm1", ""));
                  addMenuItem(new menuItem("Menue3", "", "menue3.html"));
                  addMenuItem(new menuItem("Menue4", "sm2", ""));
                  addMenuItem(new menuItem("Menue5", "sm3", ""));
                  addMenuItem(new menuItem("Menue6", "", "menue6.html"));
                  addMenuItem(new menuItem("Menue7", "", "menue7.html"));
                  addMenuItem(new menuItem("Menue8", "", "menue8.html"));

                  moveTo(21, 250);
                  show();
                  }

                  absoluteMenu1_1 = new jsDOMenu(150, "absolute");
                  with (absoluteMenu1_1) {
                  addMenuItem(new menuItem("Menue2a", "", "menue2a.html"));
                  addMenuItem(new menuItem("Menue2b", "", "menue2b.html"));
                  }
                  absoluteMenu1_2 = new jsDOMenu(150, "absolute");
                  with (absoluteMenu1_2) {
                  addMenuItem(new menuItem("Menue4a", "", "menue4a.html"));
                  addMenuItem(new menuItem("Menue4b", "", "menue4b.html"));
                  addMenuItem(new menuItem("Menue4c", "", "menue4c.html"));
                  }
                  absoluteMenu1_3 = new jsDOMenu(200, "absolute");
                  with (absoluteMenu1_3) {
                  addMenuItem(new menuItem("Menue5a", "", "menue5a.html"));
                  addMenuItem(new menuItem("Menue5b", "", "menue5b.html"));
                  addMenuItem(new menuItem("Menue5c", "", "menue5c.html"));

                  }
                  absoluteMenu1.items.sm1.setSubMenu(absoluteMenu1_1 );
                  absoluteMenu1.items.sm2.setSubMenu(absoluteMenu1_2 );
                  absoluteMenu1.items.sm3.setSubMenu(absoluteMenu1_3 );
                  }
                  ************************************************** *********************************************
                  Code CSS für Menue:
                  /*
                  Menu related selectors
                  */
                  .jsdomenudiv {
                  background-color: transparent;
                  background-image: url(office_xp_hg.gif);
                  background-repeat: repeat-y, repeat-x;
                  border: 0px solid #CCCCCC;
                  cursor: default;
                  padding-bottom: 5px;
                  padding-top: 5px;
                  position: absolute; /* Do not alter this line! */
                  visibility: hidden;
                  z-index: 500;
                  }

                  .jsdomenuitem {
                  background: transparent;
                  border: none;
                  color: #666666;
                  font-family: Arial;
                  font-size: 12px;
                  padding-bottom: 3px;
                  padding-left: 30px;
                  padding-right: 15px;
                  padding-top: 3px;
                  position: relative;
                  }

                  .jsdomenuitemover {
                  background-color: #C1D2EE;
                  border: 1px solid #336699;
                  color: #336699;
                  font-family: Arial;
                  font-size: 12px;
                  margin-left: 1px;
                  margin-right: 1px;
                  padding-bottom: 2px;
                  padding-left: 28px;
                  padding-right: 15px;
                  padding-top: 2px;
                  position: relative; /* Do not alter this line! */
                  }

                  .jsdomenuarrow {
                  background-image: url(office_xp_arrow.png);
                  background-repeat: no-repeat; /* Do not alter this line! */
                  height: 7px;
                  position: absolute; /* Do not alter this line! */
                  right: 8px;
                  width: 4px;
                  }

                  .jsdomenuarrowover {
                  background-image: url(office_xp_arrow_o.png);
                  background-repeat: no-repeat; /* Do not alter this line! */
                  height: 7px;
                  position: absolute; /* Do not alter this line! */
                  right: 8px;
                  width: 4px;
                  }

                  .jsdomenusep {
                  padding-left: 28px;
                  }

                  .jsdomenusep hr {
                  }

                  /*
                  Menu bar related selectors
                  */
                  .jsdomenubardiv {
                  background-color: #ECE9D8;
                  background-image: url(office_xp_divider.png);
                  background-position: left;
                  background-repeat: no-repeat;
                  border: 1px outset;
                  cursor: default;
                  padding-bottom: 3px;
                  padding-left: 1px;
                  padding-right: 1px;
                  padding-top: 3px;
                  position: absolute; /* Do not alter this line! */
                  visibility: visible;
                  }

                  .jsdomenubardragdiv {
                  cursor: move;
                  display: inline;
                  font-family: Tahoma, Helvetica, sans, Arial, sans-serif;
                  font-size: 12px;
                  padding-bottom: 2px;
                  padding-left: 5px;
                  padding-right: 5px;
                  padding-top: 2px;
                  position: relative; /* Do not alter this line! */
                  visibility: hidden;
                  width: 9px;
                  }

                  .jsdomenubaritem {
                  background-color: #EFEDDE;
                  border: none;
                  color: #000000;
                  display: inline;
                  font-family: Tahoma, Helvetica, sans, Arial, sans-serif;
                  font-size: 12px;
                  padding-bottom: 2px;
                  padding-left: 24px;
                  padding-right: 10px;
                  padding-top: 2px;
                  position: relative;
                  /* Do not alter this line! */
                  }

                  .jsdomenubaritemover {
                  background-color: #C1D2EE;
                  border: 1px solid #316AC5;
                  color: #000000;
                  display: inline;
                  font-family: Tahoma, Helvetica, sans, Arial, sans-serif;
                  font-size: 12px;
                  padding-bottom: 2px;
                  padding-left: 23px;
                  padding-right: 9px;
                  padding-top: 2px;
                  position: relative;
                  /* Do not alter this line! */
                  }

                  .jsdomenubaritemclick {
                  background-color: #EFEDDE;
                  border: 1px solid #8A867A;
                  color: #000000;
                  display: inline;
                  font-family: Tahoma, Helvetica, sans, Arial, sans-serif;
                  font-size: 12px;
                  padding-bottom: 2px;
                  padding-left: 23px;
                  padding-right: 9px;
                  padding-top: 2px;
                  position: relative; /* Do not alter this line! */
                  }

                  .jsdomenuitemover1 {
                  color: #316AC5;
                  font-family: Tahoma, Helvetica, sans, Arial, sans-serif;
                  font-size: 12px;
                  margin-left: 0px;
                  margin-right: 0px;
                  padding-bottom: 0px;
                  padding-left: 0px;
                  padding-right: 0px;
                  padding-top: 0px;
                  position: absolute;
                  margin-top: 0px;
                  margin-bottom: 0px;
                  border-top: thin none;
                  border-right: thin none;
                  border-bottom: thin none;
                  border-left: thin none;
                  }

                  Dann gibt es noch eine datei für das Menue jsdomenue.js , die ist ellenlang. Ich weiss nicht ob ihr die auch braucht.

                  Kommentar


                  • #10
                    AW: Homepage zentriert - Java Menue

                    Du arbeitest eindeutig mit zuvielen position-Angaben. Zentrierung geht einfacher so:

                    Code:
                    #content {
                    width: 950px;
                    height: 800px;
                    margin: 0px auto;
                    text-align: center;
                    }
                    ... und #zentrierung rausschmeißen ..

                    Um dann noch die Elemente darin absolut innerhalb dieses Bereiches positionieren zu können reicht es "position: relative;" in dem o.g. Code zu ergänzen. Layer1 und Layer2 hast du ja schon absolut positioniert, wäre aber imho auch nicht nötig, wenn du dir mal "float" anschaust. Bedenke: die absolut positionierten Elemente werden in einigen Browsern anders dargestellt als gewünscht.

                    Das JavaScript-Menü ist btw. absolut suchmaschinenfeindlich. Und wie sollen User ohne JavaScript an deine Unterseiten kommen?

                    Kommentar


                    • #11
                      AW: Homepage zentriert - Java Menue

                      danke für den tip.
                      Das mit deinem code schau ich mir an.
                      zum thema menue: das klingt ja nicht gut.
                      Ich dacht es wäre eine gute lösung, wenn später das menue verändert wird, passiert das in der externen datei und man muss nicht in jede einzelne seite.
                      Ich hatte heute nachmittag versucht solch ein menue nachzubauen nur mit css. Aber ich habe das nicht hinbekommen, dass der Hintergrund beim darüberfahren komplett gefärbt wurde. Es wurde nur der bereich des Textlinks gefärbt. Funktioniert das mit Hintergrundbildern?

                      Kommentar


                      • #12
                        AW: Homepage zentriert - Java Menue

                        Ich dacht es wäre eine gute lösung, wenn später das menue verändert wird, passiert das in der externen datei und man muss nicht in jede einzelne seite.
                        Verwende dann lieber einen HTML-Editor der dies für dich übernimmt, nutze php oder ein CMS.

                        Es wurde nur der bereich des Textlinks gefärbt. Funktioniert das mit Hintergrundbildern?
                        Klar, wenn du den Link selbst per CSS soweit ausdehnst, dass das Hintergrundbild komplett zu sehen ist, du das Hintergrundbild dem Link zuweist und dort dann den hover-Effekt nutzt. Also z.B.:
                        Code:
                        li a {
                        display: block;
                        width: 100px;
                        height: 18px;
                        background-image: url(bild.gif);
                        }
                        
                        li a:hover { background-image: url(bild2.gif); }

                        Kommentar

                        homepage-forum.de - Hilfe für Webmaster! Statistiken

                        Einklappen

                        Themen: 56.933   Beiträge: 431.211   Mitglieder: 28.702   Aktive Mitglieder: 44
                        Willkommen an unser neuestes Mitglied, sukhdevscatering.

                        Online-Benutzer

                        Einklappen

                        208 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 203.

                        Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                        Die neuesten Themen

                        Einklappen

                        Die neuesten Beiträge

                        Einklappen

                        • Megabyte
                          mySQL ORDER BY mit Umlauten
                          Wenn man auf meiner Seite bei der Auswahl 'Suche' die Kategorie 'Land' auswählt und dort nach 'Deutschland' sucht erfolgt eine Auflistung der Filme die mindestens einen Drehort in Deutschland hatten. So weit do gut...

                          Wenn man nun bis ans Ende scrollt erscheint dort der Film "Zweiohrküken"...
                          Heute, 00:50
                        • arnego2
                          Antwort auf mySQL ORDER BY mit Umlauten
                          Wenn das alles so klappt warum ist dir die Ordnung so wichtig?
                          Heute, 17:18
                        • Megabyte
                          Antwort auf mySQL ORDER BY mit Umlauten
                          Hallo Sempervivum

                          Danke für deinen Beitrag. Das wäre sicherlich ein begehbarer Weg. Fühlt sich aber immer noch irgendwie an wie "durch den Rücken in die Brust geschossen". Aber scheinbar lässt sich diese Aufgabe nicht mit einer einzigen Direktive elegant lösen. Wenn es daher...
                          Heute, 16:38
                        • Sempervivum
                          Antwort auf mySQL ORDER BY mit Umlauten
                          Wenn es nicht gerade hunderttausende von Datensätzen sind würde ich auf eine Sortierung mit PHP und einem Callback setzen, also usort. Dann kannst Du in der Vergleichsfunktion die Strings in eine Form bringen, die für den Vergleich geeignet ist und brauchst diese nirgends zu speichern, also die Redundanz...
                          Heute, 16:18
                        • Megabyte
                          Antwort auf mySQL ORDER BY mit Umlauten
                          Hallo arnego2

                          Danke für die Rückmeldung, aber hilft hier nicht :-)

                          Ich habe keinerlei Probleme mit der Darstellung von Umlauten. Alle Umlaute werden sowohl in phpMyAdmin als auch im Frontend exakt dargestellt. Dafür wurde mittels diversen utf-8 Direktiven gesorgt. Keine...
                          Heute, 15:53
                        • arnego2
                          Antwort auf mySQL ORDER BY mit Umlauten
                          Bei mir hat die .my.cnf Methode funktioniert.

                          https://stackoverflow.com/questions/...sql-phpmyadmin
                          Heute, 14:41
                        • Dekson
                          Antwort auf Neuer Drucker?
                          Morgen

                          Hattest du dich denn entschieden zu einem Drucker?
                          Ich muss ja sagen, dass es wirklich unterschiedliche Hersteller und Modelle gibt, man sollte einfach schauen, welchen man gebrauchen kann bzw. welcher die Voraussetzungen erfüllt.
                          Ich zum Beispiel habe mich nach Zubehör...
                          Heute, 05:58
                        • Megabyte
                          Antwort auf Bitcoin-Board.de - Deutschsprachiges Bitcoin & Altcoin Forum
                          Ich mag Bitcoins ebenso wenig. Bitcoins öffnen dubiosen Machenschaften Tür und Tor. Außerdem sind wegen dem Schrott gute Grafikkarten exorbitant teuer geworden bzw. gar nicht mehr erhältlich :-)
                          Gestern, 22:09
                        • Megabyte
                          Antwort auf HomeOffice
                          Bin bei Localfu (auch aus Erfahrung)

                          Die zu erwartende Arbeitsergebnisse sind vorab klar festzuhalten und mit einer realistischen Zeitschiene zu versehen. Wenn z.B. ein Konstrukteur zu Hause an einem CAD-System ein Bauteil entwickeln soll so erwartet man dann Ergebnisse in 14 Tage (Beispiel...
                          Gestern, 22:00
                        • Nightland Driver
                          Mysql id anhand des nutzers auslesen und nächste/letzte erhalten?
                          Hey, ich habe ein kleines Logik Problem und wollte mal fragen ob mir jemand dabei helfen kann.

                          Ich mag aus meiner Datenbank eine Nachricht auslesen. Diese hat folgende werte [id, user_id, text].
                          Nun rufe ich anhand der id [5] die nachricht von dem Benutzer [2] auf. Dieser Benutzer...
                          23.09.2021, 17:00
                        Lädt...
                        X