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.842   Beiträge: 430.466   Mitglieder: 28.593   Aktive Mitglieder: 49
                        Willkommen an unser neuestes Mitglied, digital-mc.

                        Online-Benutzer

                        Einklappen

                        272 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 269.

                        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

                        Lädt...
                        X