Ankündigung

**threadi** · 21.10.2007, 00:08

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.

**shrek** · 21.10.2007, 00:16

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

**Koesmi** · 21.10.2007, 00:17

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.

**threadi** · 21.10.2007, 00:23

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ü

**shrek** · 21.10.2007, 00:36

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.

**threadi** · 21.10.2007, 00:45

AW: Homepage zentriert - Java Menue

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

**Koesmi** · 21.10.2007, 15:49

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.

**shrek** · 21.10.2007, 16:18

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">

</script>
<style type="text/css">

</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> </p>
<p>  </p>
<p> </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.

**threadi** · 21.10.2007, 16:28

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?

**shrek** · 21.10.2007, 16:38

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?

**threadi** · 21.10.2007, 16:57

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); }

Ankündigung

Homepage zentriert - Java Menue

Homepage zentriert - Java Menue

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

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

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge