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: 57.089   Beiträge: 432.164   Mitglieder: 29.279   Aktive Mitglieder: 38
                        Willkommen an unser neuestes Mitglied, Grufty.

                        Online-Benutzer

                        Einklappen

                        213 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 211.

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

                        Die neuesten Themen

                        Einklappen

                        • daniel5959
                          Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Hallo,

                          jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                          Bisher waren die Gaskunden gut dran, sie haben sich...
                          24.06.2022, 01:37
                        • Grufty
                          Handydarstellung
                          In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                          Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                          Es lag am COUNTER CODE.
                          22.06.2022, 09:04
                        • Sprueche
                          LustigX.de - Lustige Bilder & witzige Memes
                          Hallo liebe Leute,

                          ich will Euch ein neues Projekt von mir vorstellen. Es handelt sich um "LustigX.de". Auf der Webseite werden von Mitgliedern "Lustiges/Witziges" gepostet. Du kannst gerne ein Teil der Community werden und selber "Lustiges/Witziges" posten....
                          21.06.2022, 02:08
                        • daniel5959
                          Energiewende mit günstigem Ökostrom und Wärmepumpe
                          Hallo,

                          meine Berechnung für eine persönliche Energiewende.

                          A) Grob geschätzt für mein kleines Häuschen rund 850 Liter Heizöl im langjährigen Mittel, das wären (Heizöl - Heizwert ca. 9,8 kWh pro Liter) 8.330 kWh und wenn ich diese Wärme mit einer Wärmepumpe und einer Jahresarbeitszahl
                          ...
                          18.06.2022, 02:45
                        • rene_j
                          Euere Meinung und Feedback zu meinem Projekt - van-reise.eu
                          Um welches Thema geht es?
                          Es geht primär um die Themen Reisen, Wandern, Geocaching, Trekking, Urban Exploration (Lost Places) und Übernachtungen im Freien (Wälder, Berge etc.) sowie Fahrzeug Anschaffung und Ausbau.

                          Das Projekt steckt noch in Kinderschuhen.
                          Die Social-Media-Kanäle...
                          14.06.2022, 13:41

                        Die neuesten Beiträge

                        Einklappen

                        • Sprueche
                          Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                          Wegen Social-Media und SEO.

                          Update: Neues Design ist online!...
                          26.06.2022, 22:51
                        • eloms
                          Antwort auf Feedback zur Überarbeitung meiner Homepage
                          Hallo

                          So, ich habe diverse Ändeungen vorgenommen und ein Zufallsbild auf der Startseite eingefügt. Klickt man auf den Link, wird das ausgewählte Bild grün angezeigt.
                          War für mich gar nicht so einfach da so umzusetzen.
                          Langsam wird die Seite fertig.

                          mfg
                          ...
                          26.06.2022, 05:47
                        • daniel5959
                          Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Hallo,

                          jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                          Bisher waren die Gaskunden gut dran, sie haben sich...
                          24.06.2022, 01:37
                        • ST747
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          hi,

                          beim gas ist die lieferung derzeit gedrosselt, weil ein pumpe kaputt ist.

                          deshalb werden auch die gasspeicher nicht so gefüllt, wie geplant.

                          nach meinen informationen muss die pumpe von einer deutschen firma gewartet oder repariert werden. das geht aber nicht,...
                          25.06.2022, 13:48
                        • daniel5959
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Nachtrag 2:

                          Frage: Wie weit würde man mit maximal 256 TWh (= max. 256 Mrd. kWh) Gas kommen?



                          In den letzten 3 Monaten des Jahres - Oktober, November und Dezember - werden im Mittel 277 TWh an Gas verbraucht, d.h. die maximal gefüllten Gasspeicher wären am Jahresende...
                          25.06.2022, 05:53
                        • daniel5959
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Nachtrag:

                          Deutschland hat genau genommen keinen Gasvorrat, sondern nur einen Gaspuffer, um die Spitzen im Winter abzupuffern.



                          Also wenn die Erdgasspeicher ganz voll wären, dann würde es für 2 bis 3 Monate reichen, aber nur wenn in dieser Zeit weiterhin Gas...
                          25.06.2022, 00:15
                        • Grufty
                          Handydarstellung
                          In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                          Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                          Es lag am COUNTER CODE.
                          22.06.2022, 09:04
                        • Localfu
                          Antwort auf Handydarstellung
                          Hier eine Lösung von mir
                          Code:
                          var linkTitle = ['Startseite', 'Über mich', 'Aktuelles', 'Kontakt', 'Impressum'];
                          var linkURL = ['home.html', 'about.html', 'news.html', 'contact.html', 'impressum.html'];
                          var topnav;
                          document.addEventListener('DOMContentLoaded', ()=> {
                          ...
                          24.06.2022, 16:16
                        • Localfu
                          Antwort auf Handydarstellung
                          Hallo Grufty,
                          leider ist dein JavaScript-Code fehlerhaft und weisst viele Fehler auf:
                          Code:
                          jQuery.noConflict()(function($){$("<form id='mobilemenu' class='right2'><select /></form>").appendTo("#topnav"),$("<option />",{selected:"selected",value:"",value:"",text:"F"
                          ...
                          24.06.2022, 15:22
                        • daniel5959
                          Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                          Hallo,

                          mich ärgern immer noch die aufs Foto geklatschten Texte.

                          Warum wird nicht einfach nur ein unifarbener Hintergrund verwendet, wenn das Foto eh nicht so wichtig ist?

                          Den Text könnte man besser ins Foto einbauen, siehe Beispiel



                          ...
                          23.06.2022, 22:58
                        Lädt...
                        X