21. oktober 2003 - 12:59Der er
37 kommentarer og 2 løsninger
Centrere mine sider med JavaScript eller CSS
Tjaa... mine sider er p.t. placeret 20 pxl. fra venstre og top - jeg kan ikke finde ud af at få siderne placeret centralt på siden (som. fx. Eksperten)
Støv, fibre og metalliske partikler kan påvirke både uptime, levetid og driftssikkerhed. Derfor arbejder flere datacentre systematisk med contamination control.
Du kan sætte det hele ind i en tabel med to celler på hver side af dit indhold. Så kan du sætte tabellens bredde til 100% og din tabel med indhold til den ønskede bredde, og de to overskydende tabeller til at udfylde resten.
Det virke fint, godt nok med skalerbare størrelser på cellerne. Hvis du definerer tabellens width til 100% i css, og din indholdscelle til hvad du nu har lyst (i procent!) og lader "margincellerne" udfylder resten, får du et pænt resultat. Jeg har selv brugt det flere gange, og det volder mig ingen problemer.
tjaa.. jeg har jo ikke rigtig rørt ved mine drops (tror jeg) - men hvor pokker skal det indstilles ?
Som I nok kan se af koden så er det bare en henvisning til samme fil (kopieres fra den oprindelige til tester2+3. Derfor må det vel være et sted i htm-doc der skal positioneres?
Ja hvis du centrerer, kan du jo ikke bruge faste positioner, hvis det skal se fornuftigt ud, og så plejer jeg at anvise en vej, hvor man aflæser 'moderelementets' position (med getPos(), som jeg har fra olebole !-) og så positionere dropdown-elementet absolut ud fra de oplysninger ...
Denne manøvre skal så foretages onload og onresize, da den absolutte position jo flytter sig !o]
Jeg tror derfor at jeg skal rette lidt i filen "dropdwon.css hvor der står følgende kode:
table.menu { position: absolute; border: 3px solid black; cursor: pointer; cursor: hand; visibility: hidden; } #mainmenu { position: static; } table.menu td { color: #FFFFFF; /* Must be the same as tdColor in the menu_script.js */ background-color: #000000; /* Must be the same as tdBgColor in the menu_script.js */ border: 20px; padding: 1px 9px 3px; font-family: Verdana; font-size: 8pt; white-space: nowrap; }
Kunne I hjælpe med dette samt om det skulle kunne klare det ?
Øv, det var som jeg frygtede en forholdsvis kompliceret mekanisme, som ikke tager højde for evt. forskelle i de enkelte menupunkters bredde ...
-- men man _kunne_ nu godt aftaste hoved-menu-punkternes bredde, men så kommer vi til et problem med at aftaste undermenuernes bredde, som jo har bredde efter en tekst, hvis bredde ikke kendes på det tidspunkt scriptet udføres !-)
Men jeg vil lade mailen ligge og så se om jeg i løbet af dagen får tid, lyst og kræfter til at kigge nærmere på det ...
Jeg har en der er næsten klar ; www.espersen.org/tester8.htm Her er donp's centrering med til at få styr på siden.
Men jeg fatter ikke hvorfor menu-delen til højre er lidt større end de andre! Samt det lille gimmick med at den vil rage ud over cellen (men det gør den også lidt i den originale fil (www.espersen.org/tester9.htm)
Hej !! Jeg har nu kæmpet hårdt med de scripts og kan ligesom konkludere at de menuer meget gerne vil have en "absolute" position, hvilket jo ikke helt er foreneligt med en centreret side der så er mere "relativ".
Jeg har kigget lidt rundt i eksperten, da I har givet lidt flere ting at søge efter (samt en hel del mere viden!) og kan af jeres svar og kommentarer i andre spm. se at emnet er et af de mere svære.
Jeg hælder til at droppe arbejdet med centreringen og leve med mine 20 px fra top og venstre.
Problemet er ikke løst - men smid lige et svar så der kan blive lukket for spm. (hvis I da ikke lige har en løsning ved hånden??)
Hvis det er sådan, at du har _hele_ menuen inde i nogle divs eller måske ovenikøbet indeni een div, er det måske en løsning at bruge getPos() (som jeg har fået fra et svar fra olebole !-)
function getPos(elm) { for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent); return {x:zx,y:zy} }
Ideen er, at der findes et element, som menuen skal ligge fast i forhold til, f.eks. en celle i en tabel eller et andet element, som kan sætte startpunkt !-)
At skrive en menu, der kan flyde med siden, er ikke i sig selv svært - men at skrive én om, hvor der ikke er tænkt på den slags under udviklingen, er ofte et større arbejde. Ligesom, det i sig selv er et stort arbejde at skrive en 'generisk' menu, der kan tilpasses alle mulige forhold ... menuer af den slags, der er blevet meget populære og som Thomas Brattli efterhånden har lavet en del af.
En løsning kunne f.eks. være at bruge den funktion, roenving viser (og som jeg rettlig må give Thor Larholm - 'jumper' her på E - æren for). En anden kan være at udnytte CSS-positionering på en anden måde - men det er svært i mere generiske løsninger. 'position:absolute' på et element, betyder nemlig ikke, at elementet placeres i forjold til siden - men at det placeres i forhold til det første omgivende element, der er positioneret (om det så er 'relative' eller 'absolute'). Eksisterer et sådan ikke, vil elementet placeres i forhold til sidens body-element. Dette fohold misforståes tit af folk, der ikke er helt stive i CSS. Du kan se forskellen på disse divs. Kopier dem over i et HTML-dokument og se siden i en browser:
<div style="position:relative;width:500px;height:300px;background-color:#ffff00">Relativt positioneret <div style="position:absolute;left:100px;top:50px;background-color:#ff0000">Absolut div i relativt div</div> </div>
<div style="width:500px;height:300px;background-color:#00ff00">Ikke positioneret <div style="position:absolute;left:250px;top:150px;background-color:#0000ff;color:#ffffff">Absolut div i u-positioneret div</div> </div>
En anden løsning er, at venstrestille siden - i stedet for at centrere den. Det er en løsning, du tit ser på større, professionelle sites. Simpelthen fordi, det giver den slankeste kode, der er betydelig nemmere at vedligeholde - og holde X-browser kompatibel uden et hav af custom-hacks. Den slags er der i forvejen rigeligt af i generiske menuer, der ofte fylder mere end Biblen, Koranen og Lukkeloven tilsammen :) /mvh
PS: Hvis du tester div'ene, så prøv - efter du har set siden i bruseren - at sætte 10-15 <br> ind før det øverste div og se siden igen. Så kan du meget tydelig se forskellen ;o)
roenvig spørger efter hvordan menuen styres i dag Den er vel egentlig sådan: 1. >head< (inkl. en del af dropdown-menulinie-henvisning) 2. Toplogo 3. Scriptlinie med dropdown menulinien 4. Tabeller/indhold
Jeg kan udfra jeres tilbagemeldinger se at selve kodningen/opbygningen af min hjemmeside ikke er helt forenelig med mit ønske om centrering af siden - derfor er jeg kommet til den konklusion at selve grundkoden skal ændres og selve indholdet/tekst/billeder så derfor skal overflyttes i en ny kode/opbygning.
Jeg vil være ekstremt taknemmelig (og hellere end gerne udlodde flere points!) hvis I kan komme med et mere færdigt forslag, da jeg trods jeres gode hjælp ikke helt kan overskue de indbyrdes påvirkninger fra body m.v.
Den er da centreret.... lækkert ! Men menu-punkterne har jeg svært ved at give individuel bredde (fx. "Dataindsamling" er bredest og kommer tæt på menu til højre - mens fx. "Kontakt" er mere smal og egentlig ikke behøver så meget plads.
Hvordan får jeg givet dem lidt mere individuel bredde ??
I scriptet har jeg rettet det til - men ved at ændre den først så påvirkes bredden på alle de øverste.. (jeg kan nemt ændre bredden på dem som drop-downer)
Læg lige et svar, så der kan uddeles point - der uddeles point selvom jeg har fundet en anden løsning, da I har været stærkt medvirkende til at mine sider bliver ændret radikalt.
-> Læg lige et svar <- .. så der kan uddeles point - der uddeles point selvom jeg har fundet en anden løsning, da I har været stærkt medvirkende til at mine sider bliver ændret radikalt/totalt omskrevet pga. min håbløse kode.
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.