Avatar billede mummikiks Nybegynder
03. oktober 2006 - 00:07 Der er 2 kommentarer

Store problemer med placering af menubar

Hej experter

Jeg har nu brugt utrolig lang tid på at placere min menubjælke ved hjælp af css.

Jeg har ved hjælp af css lagt en baggrund ind, som altid er centreret i mit dokument. Det virker fint når jeg ændre opløsning etc, men så skal jeg placere en menubjælke, som skal ligge på en bestemt placering ovenpå baggrunden.

Jeg har prøvet at eksperimentere med absolute, fixed, relative positionering igennem css, men når jeg enten laver vinduet vinduet mindre (altså gå væk fra maksimeret) eller ændre opløsningen på skærmen placeres min mennubjælke et helt andet sted.

body {
    background-color: #424242;
    background-image: url("../Images/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;       
    }
   
#mainMenu {
position:absolute;
left:20%;
top:80%;
}

Hvad sivan gør jeg galt..er det ikke muligt at få menuvjælken til at følge baggrunden?
Avatar billede madssch Nybegynder
03. oktober 2006 - 14:21 #1
Som jeg ser det, har du 2 muligheder:

1. Lav en tabel, med width="100%" og height="100%" og indsæt "align="center" og valign="middle" i tabellens td. I denne td kan du så indsætte din div uden position fra CSS.

2. Foretag positionering ved hjælp af JavaScript. Følgende eksempel er ikke testet:

<script>

function placeMenu () {

windowheight = (document.body.offsetHeight + document.body.scrollTop);
windowwidth = document.body.offsetWidth;

var objMenu = document.getElementById("mainMenu");

objMenu.style.position = "absolute";
objMenu.style.left = (windowwidth - objMenu.offsetWidth) / 2
objMenu.style.top = (windowheight - objMenu.offsetHeight) / 2

}

</script>

Du kan så kalde funktionen således:

<body onload="placeMenu();" onresize="placeMenu();">

Så bliver JavaScript-funktionen eksekveret når siden loades, samt når browservinduets størrelse ændres.
Avatar billede roenving Novice
16. oktober 2006 - 00:37 #2
Hvis du laver et element, der har samme bredde som din baggrund, kan du uden problemer lave nummeret:

<style type="text/css">
body{background:url(../Images/background.png) no-repeat center fixed;}
#site{width:750px;margin:0 auto;position:relative;}
#mainMenu{position:absolute;left:20%;top:80%;}
</style>

-- og en struktur, der ser således ud:

<body>
  <div id="site">
    <div id="mainMenu">
      <!-- menuen -->
    </div>
  </div>
</body>

-- det forudsætter, at IE tvinges til at være i standards-mode, så der skal være en fuldt kvalificeret doctype inkl. dtd-link !-)
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