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, 01: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: 57.170   Beiträge: 432.150   Mitglieder: 29.549   Aktive Mitglieder: 45
                        Willkommen an unser neuestes Mitglied, [email protected].

                        Online-Benutzer

                        Einklappen

                        267 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 264.

                        Mit 4.707 Benutzern waren am 12.01.2023 um 04:07 die meisten Benutzer gleichzeitig online.

                        Die neuesten Themen

                        Einklappen

                        Die neuesten Beiträge

                        Einklappen

                        • daniel5959
                          Antwort auf Otmar
                          Hallo,

                          habe das Programm HomepageFIX 2020 nicht, aber wie bei allen Programmen zum Erstellungen von Webseiten müssen die FTP-Angaben stimmen, damit das Programm die Dateien auch auf den Webspace hochladen kann.

                          Dafür müsste man wissen beim welchem Provider der Webspace ist,...
                          Heute, 16:35
                        • Otmar.spiss@gmail.com
                          Otmar
                          Ich kann HomepageFIX 2020, nicht veröffentlichen. Von seiten des Providers ist angeblich alles in Ordnung. Wer hat Erfahrung mit diesem Problem?
                          Heute, 11:24
                        • bdt600
                          Antwort auf Otmar
                          Ich würde mir an deiner Stelle nicht allzu große Hoffnungen machen, dass du hier Hilfe zu HomepageFIX 2020 bekommen wirst. Solche WYSIWYG-Editoren sind bei Leuten mit Ahnung meist verpönt, weil der HTML-Code, der am Ende raus kommt, (vorsichtig gesagt) nicht so dolle ist.
                          Heute, 14:22
                        • admin
                          Antwort auf Mail-Authentifizierung
                          Hallo Localfu,

                          voll krass, zum Glück haben wir noch uralte Verträge... Aber da wird es in Zukunft für eine Firma ja richtig teuer, wenn Sie alle Mitarbeiter mit E-Mail-Adressen versorgen will.

                          Wir arbeiten uns aktuell an die Lösung heran, ein User hier aus dem Forum hat...
                          Heute, 12:17
                        • admin
                          Mail-Authentifizierung
                          Hallo,

                          wir haben heute das erste Mal das Erlebnis gehabt, dass eine Firmenmail nicht zu einer Kundenadresse durchgekommen ist.

                          Die Empfänger-Adresse ist eine [email protected] Adresse, und Googlemail blockt wohl seit November 2022 nicht authentifizierte Domains.

                          Hier...
                          02.02.2023, 13:04
                        • Localfu
                          Antwort auf Mail-Authentifizierung
                          Hi admin,
                          bei IONOS gibt es Seit Ende 2022 Einschränkungen bei der Vergabe von E-Mails. Neue Standardverträge lassen nur eine E-Mailadresse zu(Jede weitere Adresse kostet mehr). Das ist bei den alten Verträgen noch vermeidbar.

                          Das ander Problem ist die Nutzung von E-Mailadressen...
                          Heute, 01:09
                        • arnego2
                          Antwort auf Lebensmittelpreise - die x-te Version
                          Tja da seit ihr gut dran, bei uns kommen 200Gr Butter auf ungefähr 6$. Da wir Butter nicht so häufig nutzen so 2 pro Jahr macht den Kohl nicht fetter....
                          Gestern, 21:38
                        • bodan
                          KeePass - Password-Manager :: welche Addons /Plugins verwendet ihr!?
                          Hallo u. guten Abend liebe Community

                          welche Keepass-Addons /Plugins verwendet ihr!?

                          Es gibt ja sehr viele Plugnis / Addons die die Funktionalitäten erweitern: welche verwendet ihr denn!?

                          Plugins für KeePass (hier eine Übersicht: https://keepass.info/plugins.h...
                          24.01.2023, 23:58
                        • eloms
                          Antwort auf KeePass - Password-Manager :: welche Addons /Plugins verwendet ihr!?
                          Hallo

                          Doch, kann man.
                          Ich verwende einen anderen PWM und der kennt nur einen Teil des PW und somit kann damit keiner etwas anfangen.
                          Und für wichtige Seite wie Banking oder Paypal verwende ich eine Authenticator App. Und die kann man nicht auslesen weil sie auf einem anderen...
                          Gestern, 20:00
                        • daniel5959
                          Antwort auf Lebensmittelpreise - die x-te Version
                          Hallo,

                          auch sonst ist vieles immer noch günstig bzw. wir wieder günstiger.

                          A) Einige Artikel (Eigenmarken) - Auszug aus meinem letzten Netto-Kassenzettel:

                          Scheuermilch (Reinigungsmittel) 750 ml für 0,89 Euro
                          Handcreme (Öko-Test "Sehr Gut") 125...
                          03.02.2023, 21:52
                        Lädt...
                        X