Avatar billede cjannic Nybegynder
25. juni 2002 - 00:48 Der er 18 kommentarer og
2 løsninger

centrering af java menu

Hvem kan gennemskue følgende del af menu:

#menuBar {
  background-color: #CCCCFF  // Tilsyneladende ingen ændring/effekt ?
  border-style: solid;
  border-width: 0px;
  border-top-color: #FF0000  //Tilsyneladende ingen ændring/effekt ?
  border-top-width: 0px;
  border-bottom-color: black;
  border-bottom-width: 1px;
  color: #CCCCFF;  //Tilsyneladende ingen ændring/effekt ?
  padding: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
  position: relative;
  left:175px;
  top: 0px;
  text-align: center;
  width: 100%;
  z-index: 100;

Jeg vil gerne have menuen centreret - også i en 800x600 skærmopløsning.

Hele menuen findes på http://www.sikkopi.dk/banner.htm

Kan nogen desuden fortælle mig punkterne der er markeret med:"//Tilsyneladende ingen ændring/effekt?"
Avatar billede funguy Nybegynder
25. juni 2002 - 00:53 #1
prøv at sætte <center>, lige efter din <body>, og igen efter <!-- Tags for the menu bar. -->
25. juni 2002 - 00:55 #2
color er uden effekt fordi det er links som menuen indholder (color dækker kun over alm tekst). Du skal ændre farven på dine links.

background-color: #CCCCFF og border-top-color: #FF0000 skal der ; efter
ex. border-top-color: #FF0000;

Kan du ikke centrer sådan her:
#menuBar {
  background-color: #CCCCFF;
  border-style: solid;
  border-width: 0px;
  border-top-color: #FF0000;
  border-top-width: 0px;
  border-bottom-color: black;
  border-bottom-width: 1px;
  color: #CCCCFF;  //Tilsyneladende ingen ændring/effekt ?
  padding: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  width: 100%;

}

(background-color og color er samme farve).

/Casper www.enter-s.dk
Avatar billede cjannic Nybegynder
25. juni 2002 - 00:57 #3
Er det efter:
body {
  margin: 0px;
}
og efter:
#menuBar {

Jeg har ikke en skid forstand på java, men famler mig blot frem......
25. juni 2002 - 01:01 #4
cjannic ?? Hvad er efter hvad?

Det er hverken Java eller Javascript (som du nok tænker på :) )., men CSS og HTML.

/Casper www.enter-s.dk
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:02 #5
til xzxzx-kan-ikke-logge.
Næ - det virkedec vist ikke helt efter hensigten - farven røg - og den blev bestemt ikke centreret - se http://www.sikkopi.dk/banner.htm lige nu!
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:04 #6
Forrige svar var til funquy - og er det ikke java - så har jeg lige mistet det jeg troede jeg havde forstået !
25. juni 2002 - 01:04 #7
nu er det da også dukket:
style="width: 664; height: 9" vil du have den 100% bred eller bare 664px. og du skal ikke have height 9px med.
25. juni 2002 - 01:06 #8
cjannic det vi sider og roder med nu er CSS.
Java og Javascript er ikke det samme.
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:06 #9
ikke forstået - beklager
25. juni 2002 - 01:07 #10
<style type="text/css">
#menuBar {
  background-color: #CCCCFF;
  border-style: solid;
  border-width: 0px;
  border-top-color: #FF0000;
  border-top-width: 0px;
  border-bottom-color: black;
  border-bottom-width: 1px;
  color: red;  //Tilsyneladende ingen ændring/effekt ?
  padding: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  width: 164px;

}

</style>
</head>

<body>
<div align="center">
<div id="menuBar">
sdsdsd
</div>
</div>

sådan det skal være?
25. juni 2002 - 01:08 #11
Ok hvis du ikke forstår det så ville jeg nok sidte mig ned og lige
læse en bitte tutorial eller ligene igennem om CSS og HTML.

begge ting findes på: http://www.html.dk/

men hvad er det du ikke forstår?
Avatar billede sif4ever Nybegynder
25. juni 2002 - 01:09 #12
PRøv denne kode:

<html>

<head>
<!-- SCRIPT STARTER HER -->

<script language="JavaScript">
<!-- Gamle browsere springer over herfra

var timerID = null;
var timerRunning = false;
var id,pause=0,position=0;

function rulleTekst() {
var i,x
var indhold="ALT KAN KOPIERES - SIKKOPI.DK - FIND DET HELE HER !!!";
x=(60/indhold.length)+1;
for(i=0;i<=x;i++) indhold+=" "+indhold;
window.status=indhold.substring(position,position+60);
if(position++==128) position=2;
id=setTimeout("rulleTekst()",1000/10);
}

// Gamle browsere springer over hertil -->
</script>

<!-- SCRIPT SLUTTER HER -->
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>banner</title>
<base target="middle">
<style type="text/css">         

body {
  margin: 0px;
}

#menuBar {
  background-color: #CCCCFF;
  border-style: solid;
  border-width: 0px;
  border-top-color: #FF0000;
  border-top-width: 0px;
  border-bottom-color: black;
  border-bottom-width: 1px;
  color: #CCCCFF;  //Tilsyneladende ingen ændring/effekt ?
  padding: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  width: 100%;

}


a.menuButton, a.menuButtonActive {
  border-style: solid;
  border-width: 0px;
  border-color: #c0c0c0;
  color: #3333FF;  //farve på overmenuens fonte inden museklik
  cursor: hand;
  font-family: "MS Sans Serif", Arial, Tahoma, sans-serif;
  font-size: 8pt;  //størrelse på overmenuens fonte
  font-style: bold;
  font-weight: bold;
  padding: 2px;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
  left: 0px;
  top: 0px;
  text-decoration: none;
}

a.menuButton:hover {
  border-color: #3333FF;  //Tilsyneladende ingen ændring/effekt ?
  color: #3333FF
}

a.menuButtonActive, a.menuButtonActive:hover {
  background-color: #0000FF;                      //menulinie-kassens farve ved mouseover efter klik***
  border-color: #3333FF;
  color: #FFFFFF;                                //skriftfarve i menulinie-kasse efter mouseover
  left: 1px;
  top: 1px;
}

.menu {
  background-color: #FFFFFF;  //baggrund for undermenu
  border-style: solid;
  border-width: 0px;
  border-top-color: #f0f0f0;
  border-right-color: #909090;
  border-bottom-color: #e4d8af;
  border-left-color: #f0f0f0;
  padding: 0px;
  position: absolute;
  text-align: left;
  visibility: hidden;
  z-index: 101;
}

a.menuItem {
  color: #3333FF;  //farve på undermenu-punkter - sort
  cursor: Hand;
  display: block;
  font-family: "MS Sans Serif", Arial, Tahoma,sans-serif;
  font-size: 8pt;  //størrelse på undermenu-punkter
  font-style: solid;
  font-weight: solid;
  margin: 0px;
  padding: 2px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  white-space: nowrap;
}

a.menuItem:hover {
  background-color: #3399FF;                      //undermenu-kassens farve ved mouseover efter klik
  border-color: #3333FF;
  color: #FFFFFF;      //skriftfarve
}

.menuItemSep {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #909090;
  margin: 2px;
}

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

// Determine browser and version. Script works for IE 5.5+ and NS 6.0+

function Browser() {

  var ua, s, i;

  this.isIE    = false;  // Internet Explorer
  this.isNS    = false;  // Netscape
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }
}

var browser = new Browser();

// For IE, adjust menu bar styling.

if (browser.isIE) {
  document.styleSheets[document.styleSheets.length - 1].addRule("#menuBar", "padding-top:4px");
  document.styleSheets[document.styleSheets.length - 1].addRule("#menuBar", "padding-bottom:3px");
}

// Global variable for tracking the currently active button.

var activeButton = null;

// Capture mouse clicks on the page so any active button can be
// deactivated.

if (browser.isIE)
  document.onmousedown = pageMousedown;
if (browser.isNS)
  document.addEventListener("mousedown", pageMousedown, true);

function pageMousedown(event) {

  var className;

  // If the object clicked on was not a menu button or item, close any
  // active menu.

  if (browser.isIE)
    className = window.event.srcElement.className;
  if (browser.isNS)
    className = (event.target.className ?
      event.target.className : event.target.parentNode.className);

  if (className != "menuButton"  && className != "menuItem" &&
      className != "menuItemSep" && activeButton)
    resetButton(activeButton);
}

function buttonClick(button, menuName) {

  // Blur focus from the link to remove that annoying outline.

  button.blur();

  // Associate the named menu to this button if not already done.

  if (!button.menu)
    button.menu = document.getElementById(menuName);

  // Reset the currently active button, if any.

  if (activeButton && activeButton != button)
    resetButton(activeButton);

  // Toggle the button's state.

  if (button.isDepressed)
    resetButton(button);
  else
    depressButton(button);

  return false;
}

function buttonMouseover(button, menuName) {

  // If any other button menu is active, deactivate it and activate this one.
  // Note: if this button has no menu, leave the active menu alone.

  if (activeButton && activeButton != button) {
    resetButton(activeButton);
    if (menuName)
      buttonClick(button, menuName);
  }
}

function depressButton(button) {

  var w, dw, x, y;

  // Change the button's style class to make it look like it's depressed.

  button.className = "menuButtonActive";

  // For IE, set an explicit width on the first menu item. This will
  // cause link hovers to work on all the menu's items even when the
  // cursor is not over the link's text.

  if (browser.isIE && !button.menu.firstChild.style.width) {
    w = button.menu.firstChild.offsetWidth;
    button.menu.firstChild.style.width = w + "px";
    dw = button.menu.firstChild.offsetWidth - w;
    w -= dw;
    button.menu.firstChild.style.width = w + "px";
  }

  // Position the associated drop down menu under the button and
  // show it. Note that the position must be adjusted according to
  // browser, styling and positioning.

  x = getPageOffsetLeft(button);
  y = getPageOffsetTop(button) + button.offsetHeight;
  if (browser.isIE || (browser.isNS && browser.version >= 6.1))
    y += 2;
  if (browser.isNS && browser.version < 6.1) {
    x--;
    y--;
  }
  button.menu.style.left = x;
  button.menu.style.top  = y;
  button.menu.style.visibility = "visible";

  // Set button state and let the world know which button is
  // active.

  button.isDepressed = true;
  activeButton = button;
}

function resetButton(button) {

  // Restore the button's style class.

  button.className = "menuButton";

  // Hide the button's menu.

  if (button.menu)
    button.menu.style.visibility = "hidden";

  // Set button state and clear active menu global.

  button.isDepressed = false;
  activeButton = null;
}

function getPageOffsetLeft(el) {

  // Return the true x coordinate of an element relative to the page.

  return el.offsetLeft + (el.offsetParent ? getPageOffsetLeft(el.offsetParent) : 0);
}

function getPageOffsetTop(el) {

  // Return the true y coordinate of an element relative to the page.

  return el.offsetTop + (el.offsetParent ? getPageOffsetTop(el.offsetParent) : 0);
}

</script>


</head>

<body stylesrc="forside.htm">

<div id="menuBar" style="width: 100%; height: 9"
>
  <p align="center"><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Om kopibeskyttelse');"
    onmouseover="buttonMouseover(this, 'Om kopibeskyttelse');"
>&nbsp;&nbsp; Om kopibeskyttelse</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Værktøjer');"
    onmouseover="buttonMouseover(this, 'Værktøjer');"
>&nbsp;&nbsp; Værktøjer</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Downloads');"
    onmouseover="buttonMouseover(this, 'Downloads');"
>&nbsp;&nbsp; Downloads&nbsp;&nbsp; </a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'CloneCD');"
    onmouseover="buttonMouseover(this, 'CloneCD');"
>CloneCD&nbsp;&nbsp;&nbsp; </a
><a class="menuButton"
    href=""
    onclick="return buttonClick(this, 'Vejledninger');"
    onmouseover="buttonMouseover(this, 'Vejledninger');"
>Vejledninger&nbsp;&nbsp; </a
></div>
<div align="center" class="menu" id="Om kopibeskyttelse"> <a class="menuItem" target="hovedramme" href="generelt-beskyt.htm">Generelt</a>
  <a class="menuItem" target="hovedramme" href="PC-beskyt.htm">PC</a> <a class="menuItem" target="hovedramme" href="audio-beskyt.htm">Musik</a>
  <a class="menuItem" target="hovedramme" href="psx-beskyt.htm">PSX</a> </div>
<div align="center" class="menu" id="Værktøjer"> <a class="menuItem" target="hovedramme" href="detectors.htm">Copy
  detectors</a> <a class="menuItem" target="hovedramme" href="patches.htm">Patches</a>
  <a class="menuItem" target="hovedramme" href="Databaser.htm">Databaser</a> </div>
<div align="center" class="menu" id="Downloads"> <a class="menuItem" target="hovedramme" href="copy-prog.htm">Kopierings-programmer</a>
  <a class="menuItem" target="hovedramme" href="tools.htm">Værktøjer / Patches</a>
  <a class="menuItem" target="hovedramme" href="Datab-down.htm">Databaser</a>
  <a class="menuItem" target="hovedramme" href="aspi.htm">Aspi-check / Aspi-layers</a>
</div>
<div align="center" class="menu" id="CloneCD"> <a class="menuItem" target="hovedramme" href="ccd_hist.htm">Om
  CloneCD</a> <a class="menuItem" target="hovedramme" href="komp-hardw.htm">Kompatibel
  Hardware</a> <a class="menuItem" target="hovedramme" href="bestil.htm">Bestil
  CloneCD</a> </div>
<div align="center" class="menu" id="Vejledninger"> <a class="menuItem" target="hovedramme" href="vej_1.htm">Vejledning
  CloneCD</a> <a class="menuItem" target="hovedramme" href="vej_2.htm">Vejledning
  Clony</a> </div>
<p align="center">
<img border="0" src="images/sikkopi-logo1.jpg" width="50" height="37">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a target="hovedramme" href="forside.htm">
<img border="0" src="images/Banner_hvid_OK.jpg" alt="Klik her for at komme tilbage til forsiden....." width="450" height="50"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="images/sikkopi-logo2.jpg" width="50" height="37"></p>

</body>
<!-- Tags for the menu bar. -->
</html>


MVH
Http://www.dkdebat.dk
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:10 #13
OK - vi overlapper vist hinanden lidt med kommentarer - jeg er nu med på at, det vist ikke er en javamenu - jeg har fiflet mig frem til men CSS. Men hvor er det jeg skal rette i html-koden for at centrere menuen også i en 800x600 opløsning. Jeg har tidligere forsøgt mig frem med at rette i:
menulinien "left:175px;" - men det virker selvklart ikke!
25. juni 2002 - 01:15 #14
cjannic net det *jeg* sider og retter er dit CSS, at det så skal bruges til din  Javascript menu.

http://www.dannyg.com/javascript/javavsjavascript.html

/Casper www.enter-s.dk
25. juni 2002 - 01:15 #15
net = nej
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:16 #16
Til sif4ever:

Den kode virkede glimrende - men gav blot en anden baggrundsfarve på menuen - hvor kan jag ændre den ????
Avatar billede cjannic Nybegynder
25. juni 2002 - 01:31 #17
Det lykkedes mig alligevel at finde ud af det sidste selv.
Pointene fordeles mellem "xzxzx-kan-ikke-logge" og "sif4ever".
Det har længe irriteret mig at jeg ikke kunne centrere menuen.
Tak for udvist mod, ærlighed og ikke mindst tålmodighed i en nattestund:)
25. juni 2002 - 01:37 #18
Takker håber det kunne bruges.
Avatar billede sif4ever Nybegynder
25. juni 2002 - 01:42 #19
Avatar billede jakoba Nybegynder
25. juni 2002 - 03:06 #20
brig  /* dette er en kommentar */  til at skrive kommentarer i stylesheets'
      // dette og resten af af linien er kun kommentar i javascript.

mvh JakobA
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester