Notifikationer

Markér alle som læst Log ud

r.hegaard Nybegynder

25. juni 2006 - 11:53 Der er 11 kommentarer og
1 løsning

Problemer med "flydende menu" og DOCTYPE

Jeg kunne godt tænke mig at lave en flydende menu lignende den her: http://dynamicdrive.com/dynamicindex1/staticmenu.htm
Min problem er, at når jeg sætter den ind i et dokument med DOCTYPE (f.eks. "HTML 4.01 Transitional"), så virker menuen ikke længere, men kommer bare til at ligge i bunden af dokumentet.
Er det ikke muligt at køre med sådanne ting, når man har DOCTYPE på sine dokumenter eller hvad skal jeg gøre, for at få det til at virke?

Synes godt om

mclemens Nybegynder

25. juni 2006 - 12:22 #1

Her :o) Css er måske bedre end det hoppende script :o)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#bodyen{
position:relative;
width:100%;
height:100%;
overflow:auto;
}

#followit{
border:2px solid #000;
background:#aaa;
position:absolute;
bottom:20px;left:20px;
z-index:999;
width:150px;
}

</style>

</head><body>
<div id="bodyen">
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 
Dette er din nye body... 

</div>

<div id="followit"><a href="#">Din menu her</a></div>

</body></html>

Synes godt om

mclemens Nybegynder

25. juni 2006 - 12:26 #2

Taget herfra... det var et dynamik
drive script der røg der også...

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

(Hvis du hellere vil have det hoppende
script så sig til og jeg kigger på det)

Synes godt om

r.hegaard Nybegynder

25. juni 2006 - 18:21 #3

mclemens> Det var smart, at man også kan lave det med CSS. Det var jeg ikke klar over. Kan jeg også lave, så min menu/ tekst bliver højrejusteret nederst i billedet?

I øvrigt fandt jeg linket til http://www.dynamicdrive.com/dynamicindex5/jumptop.htm gennem dit link. Det ser ud til, at den kan køre med DOCTYPE.
Har du en forklaring på, hvorfor den anden ikke kan køre med DOCTYPE?
Kender du et sted, hvor jeg kan læse mere om, hvad man må og ikke må med HTML, JS, CSS m.m. i de forskellige DOCTYPEs ??

Synes godt om

mclemens Nybegynder

25. juni 2006 - 18:39 #4

Du justerer placering af layeret med:

#followit{
border:2px solid #000;
background:#aaa;
position:absolute;
bottom:20px;left:20px;
z-index:999;
width:150px;
}

^ - ovenstående css indstillinger...

[ Kan jeg også lave, så min menu/ tekst bliver højrejusteret nederst i billedet? ]
- Det burde bare være en text-align:right; ind i css eller padding-left:10px; hvis den skal være rykket lidt ind fra venstre side af - eller padding: 0px 10px; ved begge sider ... ved ikke om det var det du tænkte på...

[ Har du en forklaring på, hvorfor den anden ikke kan køre med DOCTYPE? ]
- Desværre ikke så skal jeg lige analysere koden, men det er nok som du siger fordi at den ikke fungerer ligesom 5'eren...

[ Kender du et sted, hvor jeg kan læse mere om, hvad man må og ikke må med HTML, JS, CSS m.m. i de forskellige DOCTYPEs ?? ]
- Desværre ikke alt hvad jeg har læst af bøger er: PHP 5, start på mysql og javascript 1.5 --- og så en html bog (Lav din egen hjemmeside på 15 minutter) engang i '98 tror jeg det var...

- Jeg læste om css inde ved w3c sidste år og kiggede så lidt på w3schools.com også - og så har jeg selv eksperimenteret en masse med alt basis css ...

- Og m.h.t. javascript er det - det samme der gør sig gældende med at jeg har eksperimenteret lidt frem og så læst lidt hos http://developer.mozilla.org og http://msdn.microsoft.com/ ... og så selvfølgelig fået et par tips af Olebole eller Roenving hvis jeg var ved at lave noget document.write - tror dog jeg er løbet lidt for hurtigt fra document.write til DOM men det er nok ikke en skidt ting :/

Synes godt om

mclemens Nybegynder

25. juni 2006 - 18:49 #5

Virker umiddelbart som om at den ene ikke tog hensyn til om ie var i quirk eller css compatibility mode her er linjen i den anden der måler på det:
[ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body ]
- Det skal så nok integreres sammen og så skal den beregne placeringen ud fra behovet ... men 5'eren burde kunne klare placeringen men den skal så lige laves om så den placerer en div istedet for en document.write ...

- Men, vil det være bedre med javascriptet end css løsningen?
... css'en virker jo med/uden javascript ... dog er det lidt
snyd at lave det på den måde ... sig lige til om jeg skal
kigge på integrering eller opbygning af et lignende script :o)

Synes godt om

r.hegaard Nybegynder

25. juni 2006 - 19:02 #6

Tak for hjælpen.
Jeg fik det til at virke, ved at skrive right i stedet for left (så blev hele boksen flyttet til højre side).

Jeg har dog endnu et lille problem. Hvis der er noget, som fylder 100% af vinduet i bredden, så bliver der indsat en scrollbar i bunden (kun i IE). Hvordan undgår jeg det på en pæn måde??

Her er et eksempel, hvor det kan ses:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type='text/css'>
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#bodyen{
position:relative;
width:100%;
height:100%;
overflow:auto;
}

#followit{
border:2px solid #000;
background:#aaa;
position:absolute;
bottom:20px;
left:20px;
z-index:999;
width:150px;
}
</style>

</head>
<body>

<div id='bodyen'>
<table border=1 cellpadding=0 cellspacing=0 width=100%><tr><td> 123</td></tr></table>
</div>

<div id="followit">Test</div>

</body>
</html>

Synes godt om

mclemens Nybegynder

25. juni 2006 - 19:29 #7

Uhm, de kan ikke blive enige ved width 100% åbenbart ...
- Det er åbenbart fordi at FF forstår at reserve pladsen til scrolbaren
rigtigt mens IE godt mener at man kan lægge indhold ind under scrollbaren
fordi så starter vi jo bare en bundscroller også ... (#¤&%#/%¤#)

- Nåh, umiddelbart kunne man måske skjule den ene scroller i IE med overflow-x:hidden; den gik bare ikke da indholdet kan stå under scrollbaren.
- Næste forsøg var nedenstående det gik bare ikke da FF havde reserveret pladsen
til scrolleren mens IE ikke havde ... det er åbenbart en af de her tralse css forskelle - kigger lige på det script her om et stykke tid... det duer jo ikke
når du bruger % defineringer i hele dit design... :o)

Synes godt om

mclemens Nybegynder

25. juni 2006 - 19:30 #8

Hov her var den der ikke virkede ... der kan du se forskellen
på reservationen af pladsen til scrolleren i IE vs. FF...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type='text/css'>
html,body{
padding:0px;
margin:0px;
height:100%;
overflow:hidden;
}

#bodyen{
position:relative;
width:100%;
height:100%;
overflow:auto;
background:green;
overflow-x:hidden;
}

#followit{
border:2px solid #000;
background:#aaa;
position:absolute;
bottom:20px;
left:20px;
z-index:999;
width:150px;
}
</style>

</head>
<body><div id='bodyen'><div style="margin-right:17px;"><table border=0 cellpadding=0 cellspacing=0 style="background:red;width:100%;"><tr><td> </td></tr></table>
</div></div>

<div id="followit">Test</div></body>
</html>

Synes godt om

mclemens Nybegynder

25. juni 2006 - 20:28 #9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#followit{
position:absolute;top:10px;right:10px;
width:100px;border:1px solid #000;
}
</style>

<script type="text/javascript">
var tpops="bottom"; // "top" eller "bottom"
var tpopt=20; // Antal pixels fra top/bottom position
var rpops="right"; // "right" eller "left"
var rpopt=20; // Antal pixels fra right/left position
var trefval=10; // Antal ms. mellem alignment af div

var ww,wh,fi,fioh,fiow;

window.onload=function(){
ww=document.body.offsetWidth;
wh=(tmp=window.innerHeight)?tmp:document.documentElement.clientHeight;

tmp=document.getElementById("followit");
fi=tmp.style;fioh=tmp.offsetHeight;fiow=tmp.offsetWidth;
alignit(0);
setInterval("alignit(1);",trefval);
}

function alignit(tmp){
if(tmp==0){fi.top="auto";fi.right="auto";}

var dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
var dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;

tmpy=(tpops=="bottom")?wh-tpopt-fioh+dmcst:tpopt+dmcst;
tmpx=(rpops=="right")?ww-rpopt-fiow+dmcsl:rpopt+dmcsl;

fi.top=tmpy+"px";
fi.left=tmpx+"px";
}

</script></head>

<body onresize="alignit();" style="margin:0px;height:100%;">

<table style="width:100%;border:1px solid #000;"><tr><td>Test start <div style="height:700px;"> </div> Test slut</td></tr></table>

<div id="followit">Test</div>

</body></html>

Synes godt om

mclemens Nybegynder

25. juni 2006 - 20:34 #10

Kombineret lidt fra disse to:
http://www.eksperten.dk/spm/702784
http://www.eksperten.dk/spm/698593

Synes godt om

r.hegaard Nybegynder

25. juni 2006 - 21:37 #11

Mange tak for hjælpen.
Jeg overvejer lige, om jeg skal bruge CSS eller JS.

Synes godt om

mclemens Nybegynder

25. juni 2006 - 22:07 #12

Ok, nu er valgmuligheden der ;D
- og tak for pointene :o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS