Avatar billede espersen Novice
21. oktober 2003 - 12:59 Der 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)

Min head ser sådan ud:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="da">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>titelside :::  side 2</title>

<link rel="stylesheet" href="javascript/dropdown.css" type="text/css">
<script language="JavaScript1.2" src="javascript/menu_data.js"></script>

<script type="text/javascript">
document.write("\74!--");
</script>
<meta http-equiv="refresh" content="1; URL=http://www.mitdomæne.dk/noscript.htm">
<script type="text/javascript">
document.write("--\76");
</script>

</head>


NB! jeg benytter en JavaScript menu samt en JavaScript-detect (som I sikkert kan se af ovenstående)
Avatar billede espersen Novice
21. oktober 2003 - 13:05 #1
Har siddet og rodet med IEmarginFix fra http://www.stilleye.com/scripts/marginfix  (som skulle være så nem?)

Det er bare ikke lykkedes for mig....
Avatar billede discowarp9 Nybegynder
21. oktober 2003 - 13:07 #2
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.
Avatar billede discowarp9 Nybegynder
21. oktober 2003 - 13:08 #3
Sludder... to celler i alt: én på hver side...
Avatar billede olebole Juniormester
21. oktober 2003 - 13:17 #4
<ole>

discowarp >> Nej, det kan man formodentlig ikke  :)

Det er ikke til at se udfra det opgivne, hvordan det kan gøres, men du skal uden tvivl ind og skrive om i menuen.

/mvh
</bole>
Avatar billede espersen Novice
21. oktober 2003 - 13:20 #5
hvad skal I mere vide ?
Avatar billede discowarp9 Nybegynder
21. oktober 2003 - 13:24 #6
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.
Avatar billede olebole Juniormester
21. oktober 2003 - 13:29 #7
discowarp9 >> det vil _ikke_ virke i dette tilfælde!

espersen >> Vi må se en URL til siden
/mvh
Avatar billede roenving Novice
22. oktober 2003 - 00:48 #8
_Måske_ kunne vi nøjes med den konkrete kode, men en url ville jo godt nok spare Eksperten-databasen for ikke så få bytes ...
Avatar billede donp Nybegynder
22. oktober 2003 - 02:14 #9
Er det ikke muligt bare at gøre flg:

<BODY bgcolor="#aabbcc">

<CENTER STYLE="height:100%">
<div style="width:80%;background-color:#eee;text-align:left;padding:20;height:100%;">
indhold
</div>

</CENTER>
</BODY>

hilsen
donP
Avatar billede espersen Novice
22. oktober 2003 - 10:22 #10
Hej !  jeg har nu siddet længe og kæmpet med donp's forslag - jeg vil ikke sige at det har været uden succes - men er heller ikke uden problemer ;-)

Min nuværende forside er her: www.espersen.org

Der er et par testversioner:
www.espersen.org/tester3.htm (som er det seneste forsøg)
www.espersen.org/tester2.htm (hvor indhold fra oprindelige er indsat i div'en)

Bemærk lige min JavaScript dropdown menu på test-versionerne: nu dropper den til venstre og ned - fremfor den oprindelige: ned og til højre.
Avatar billede roenving Novice
22. oktober 2003 - 10:33 #11
Tjah, det ser da ud til at nu nu bare mangler at positionere dine dropdowns !-)
Avatar billede espersen Novice
22. oktober 2003 - 10:47 #12
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?
Avatar billede roenving Novice
22. oktober 2003 - 10:53 #13
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]
Avatar billede espersen Novice
22. oktober 2003 - 10:55 #14
yes !  kan godt følge din tanke (mine skills følger knap så godt..)

Dvs. at dropdown også skal centreres kan jeg forstå
Avatar billede espersen Novice
22. oktober 2003 - 10:57 #15
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 ?
Avatar billede roenving Novice
22. oktober 2003 - 11:03 #16
Det kan da ikke blive i css-filen, da dine dropdowns jo er positioneret absolut og vel indstillet af dit menu_script.js ...
Avatar billede espersen Novice
22. oktober 2003 - 11:06 #17
OK - jeg har lige zippet menu_script.js som nu ligger her:
(lad os spare lidt bytes)

www.espersen.org/menu_script.zip
Avatar billede roenving Novice
22. oktober 2003 - 11:27 #18
Ø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 ...
Avatar billede espersen Novice
22. oktober 2003 - 11:30 #19
En løsning kunne vel også være en anden menu-fætter, der ikke indeholder de samme problemer - kunne du evt. give et link til noget der kan passe ind?
Avatar billede roenving Novice
22. oktober 2003 - 11:57 #20
Ja, selvfølgelig har du ret i det, og da du ikke har frames-problemer er der en masse at tage af:

Coolmenus kan klart anbefales, Thomas Brattli har virkelig fået lavet sig en kanon cross-browser-ting:
http://www.dhtmlcentral.com/projects/coolmenus/

Desuden er der (i uprioriteret rækkefølge):
http://www.burmees.nl/menu/menus.htm
http://www.milonic.com/menu/
http://java.skyteam.ru/dropdownmenu.htm
http://www.dynamicdrive.com/dynamicindex1/index.html
http://www.brothercake.com/dropdown/index.html
Avatar billede espersen Novice
22. oktober 2003 - 11:59 #21
takker mange gange ! - så min hidtige menu droppes nok. Jeg vil lige tage et kig på Brattli's stuff og forsøge mig lidt og vende tilbage senere idag.
Avatar billede roenving Novice
22. oktober 2003 - 12:06 #22
;O)
Avatar billede espersen Novice
22. oktober 2003 - 15:36 #23
OK! jeg bliver snart vanvittig ;-)

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)
Avatar billede donp Nybegynder
23. oktober 2003 - 01:07 #24
prøv at checke filerne www.gjethus.dk/script/Gmenu.js og www.gjethus.dk/script/GmenuStyle.css. Det er sikkert ikke det smukkeste javascript, men menuerne opfører sig som de skal.

hilsen
donP
Avatar billede espersen Novice
25. oktober 2003 - 09:17 #25
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??)
Avatar billede roenving Novice
25. oktober 2003 - 12:32 #26
Hvordan styres din nuværende menu ?-)

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 !-)
Avatar billede olebole Juniormester
25. oktober 2003 - 14:38 #27
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
Avatar billede olebole Juniormester
25. oktober 2003 - 14:44 #28
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)
Avatar billede espersen Novice
31. oktober 2003 - 11:43 #29
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.
Avatar billede espersen Novice
10. november 2003 - 22:26 #30
Jeg har rodet med et andet javascript og sat det op på en anden side:
www.espersen.org/nyversion.htm

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)
Avatar billede espersen Novice
12. november 2003 - 22:05 #31
her er et link til det nye spm....  Håber I vil tage et kig på det...

http://www.eksperten.dk/spm/426735

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.
Avatar billede espersen Novice
17. november 2003 - 13:26 #32
-> 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.

Ny udgave er tilgængelig på www.espersen.org/nyversion.htm (hvis I vil se resultatet)
Avatar billede espersen Novice
30. december 2003 - 00:07 #33
-> Læg lige et svar <-  så jeg kan lukke spm.
Avatar billede roenving Novice
30. december 2003 - 04:13 #34
Skal vi alle ?-)

Men oki '-)
Avatar billede espersen Novice
30. december 2003 - 11:16 #35
Ole Bole ?
Avatar billede olebole Juniormester
30. december 2003 - 13:36 #36
Jo, nu skal jeg være der  :)
Avatar billede espersen Novice
30. december 2003 - 13:39 #37
;-)  Takker godt nytår !!
Avatar billede roenving Novice
30. december 2003 - 13:43 #38
-- i lige måde og tak for points ;~}
Avatar billede olebole Juniormester
30. december 2003 - 14:06 #39
... og glædelig bagjul  *<:o)
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