Avatar billede no_doubt Nybegynder
29. januar 2012 - 23:25 Der er 54 kommentarer og
1 løsning

Follow scroll and IE

Hejsa gutter

Kan I hjælpe mig med at få stykket det sidste sammen til denne side.

Jeg ønsker at logoet nederst til venstre skal scroll med ned på siden og det skulle gerne virke IE også :S
Avatar billede no_doubt Nybegynder
29. januar 2012 - 23:31 #1
Avatar billede olebole Juniormester
30. januar 2012 - 00:27 #2
<ole>

Først og fremmest disabler du stor og vigtige dele af CSS, når du ikke anvende en passende DTD (Doc Type Definition). Skriv dette på allerførste linje - før <html>:

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

- ellers aner browseren ikke, hvordan koden skal tolkes.

Derefter bør du validere din kode her. Du har nogle seriøse fejl - bl.a. at du har skrevet et stylesheet mellem HEAD og BODY elementerne. Der kan/må det ikke stå. Det skal skrives i HEAD elementet.

Desuden findes der ikke en height attribute på et TABLE element. Brug i stedet CSS:

<table style="height:300px">

Selve problemet med at få et element til at ligge fast ved scrolling, løser du ved at lægge det i BODY elementet og give det position:fixed

/mvh
</bole>
Avatar billede no_doubt Nybegynder
30. januar 2012 - 19:16 #3
Altså position fixed virker jo ikke i IE ?
Avatar billede no_doubt Nybegynder
30. januar 2012 - 20:13 #4
Mener du ikke at der ikke findes height på et div eller hvilken mener du ?

Har forsøgt at rette de andre fejl men da jeg havde prøvet position:fixed før har jeg ikke prøvet det igen.

Skulle dine andre rettelser gøre at fixed skulle virke nu ?
Avatar billede olebole Juniormester
30. januar 2012 - 20:36 #5
"Altså position fixed virker jo ikke i IE ?" >> Hvornår er den holdt op med at virke i IE?

Nej, når jeg skriver, at der ikke findes en height attribut på et TABLE element, mener jeg ikke et DIV element, men et TABLE element.

Mine rettelser skulle gerne resultere i en ordentlig kode, du kan påregne at CSS virker i.
Avatar billede no_doubt Nybegynder
30. januar 2012 - 22:56 #6
Hmm kan du vise de steder der er height fejl og vise what to do :) ?

Jeg har ellers rettet det andet og prøv at se siden nu :S
Avatar billede olebole Juniormester
31. januar 2012 - 14:14 #7
<table border="0" width="100%" id="table4" height="100%">

Sådan kan du ikke sætte en højde. Du skal bruge CSS i stedet, som jeg viste i #2.

Derudover giver det slet ikke mening at sætte højden til 100%. 100% af hvad? Det kan browseren af gode grunde ikke vide.

Vil du sætte en relativ højde, skal browseren beregne den udfra den højde, du har sat på det omkransende element - altså det DIV, der indeholder tabellen
Avatar billede no_doubt Nybegynder
31. januar 2012 - 21:54 #8
Jeg har bare fjernet højde tingen, men siden ser stadig ikke rigtig ud ? :S
http://www.keeshondmilo.dk/default3.asp
Avatar billede olebole Juniormester
31. januar 2012 - 23:29 #9
Det her er der ingen browser, der forstår:

<div id="main" style="position: fixed; right:7; bottom:7; width: 177;">

I CSS skal du altid have enheder på - undtagen ved værdien 0:

<div id="main" style="position: fixed; right:7px; bottom:7px; width: 177px">

Denne højde skal også sættes med CSS:

<table border="0" width="20%" id="table2" cellspacing="0" cellpadding="0" height="120">

Og du har flere elementer med samme ID - f.eks: id="table1". Det må man ikke have
Avatar billede olebole Juniormester
31. januar 2012 - 23:31 #10
Du kan selv rette resten af fejlene her
Avatar billede no_doubt Nybegynder
01. februar 2012 - 20:01 #11
Nu har jeg rettet

px fejlene

samt fjernet højden på tabellen

Nu vises den som den skal i FireFox men IKKE i IE (bruger IE tab til at vise siden)
Avatar billede olebole Juniormester
02. februar 2012 - 14:35 #12
Jeg tæller stadig 13 urettede fejl
Avatar billede no_doubt Nybegynder
02. februar 2012 - 15:04 #13
Er det muligt at få lidt assistance. Koden er jo ikke så lang?
Avatar billede olebole Juniormester
02. februar 2012 - 16:21 #14
Jamen, du får masser af assistance, men du gider jo ikke rette dine fejl! Det kan da ikke være så svært, når koden - som du selv anfører - ikke er så lang.
Avatar billede no_doubt Nybegynder
02. februar 2012 - 16:54 #15
Okay, tja aner ikke hvad jeg skal gøre så :S
Avatar billede olebole Juniormester
02. februar 2012 - 17:49 #16
At rette fejlene ville som sagt være en rigtig god begyndelse. Du kan ikke påregne at få noget til at virke i et invalidt dokument.

Hvad er det helt præcist, du ikke kan finde ud af?
Avatar billede no_doubt Nybegynder
02. februar 2012 - 21:30 #17
Nej det er jeg godt klar over man ikke kan påregne men da jeg har brugt et program (forældede frontpage) altid så kender ikke til at fejlrette sådan noget :S
Avatar billede olebole Juniormester
02. februar 2012 - 21:57 #18
- og du kan ikke læse engelsk, eller? Der står:

Line 21, Column 130: character ";" not allowed in attribute specification list

...t.Gradient(endColorstr='#87967a', startColorstr='#a4a6a3', gradientType='0')";>

Hvis du klikker på linket '21', kommer du ned til stedet i koden, og her står der:

21.<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#87967a', startColorstr='#a4a6a3', gradientType='0')";>

Slet det markerede semikolon, som du netop har fået at vide, ikke er tilladt på det sted. Hvad var svært ved det?
Avatar billede no_doubt Nybegynder
03. februar 2012 - 10:34 #19
Lige den forstår jeg godt men ikke de ulovlige attributter :S
Avatar billede olebole Juniormester
03. februar 2012 - 16:03 #20
*) Der skal sættes en alt attribut på et IMG-tag.

*) Der findes ikke en align attribut på et DIV-tag.

*) En id attribut skal være unik i elementet.

*) Width og height attributter findes ikke på et TD-tag.

*) Divet, du påbegynder i linje 26, afslutter du aldrig.

*) Tabellen, du påbegynder i linje 27, afslutter du aldig.
Avatar billede no_doubt Nybegynder
04. februar 2012 - 18:11 #21
Nu har jeg tre fejl tilbage men ved ikke hvordan jeg fikser dem :S
Avatar billede olebole Juniormester
04. februar 2012 - 19:56 #22
Jeg har valgt helt at omskrive din kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Keeshond Milo</title>
<style type="text/css">
html,
body,
#wrapper {
    margin: 0;
    padding: 0;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#wrapper {
    position: absolute;
    width: 100%;
    background: #a4a6a3;
    color: #000;
    filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#87967a', startColorstr='#a4a6a3', gradientType='0');
    background: -moz-linear-gradient(top, #a4a6a3, #87967a);
    background: -webkit-gradient(linear, left top, left bottom, from(#a4a6a3), to(#87967a));
}
#logo {
    position: fixed;
    right: 7px;
    bottom: 7px;
    z-index: 2;
}
#nav {
    margin: 5px 5px;
}
#nav img {
    height: 100px;
    margin: 0 7px;
    border: 0;
    vertical-align: middle;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#nav img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
#nav img.active {
    height: 140px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
</head>   
<body>
<img id="logo" src="http://www.keeshondmilo.dk/images/logo.png" style="" alt="">
<div id="wrapper">
    <div id="nav">
        <a href="http://www.keeshondmilo.dk/OmRacen/">
            <img id="navRacen" src="http://www.keeshondmilo.dk/images/FrontOmRacen.gif" alt="Om racen"></a>
        <a href="http://www.keeshondmilo.dk/Milo/">   
            <img id="navMilo" src="http://www.keeshondmilo.dk/images/FrontMilo.gif" alt="Milo"></a>
        <a href="http://www.keeshondmilo.dk/Hvalpe/">
            <img id="navHvalpe" src="http://www.keeshondmilo.dk/images/FrontHvalpe.gif" alt="Hvalpe"></a>
        <a href="http://www.keeshondmilo.dk/Kontakt/">
            <img id="navKontakt" src="http://www.keeshondmilo.dk/images/FrontKontakt.gif" alt="Kontakt"></a>
    </div>
   
    <!--
        Her skriver du resten af sidens indhold - styled på passende måde
    -->
       
<script type="text/javascript">
var sId, sPath = location.pathName;
if (sPath.indexOf("/OmRacen/")===0) {
    sId = "navRacen";
}
else if (sPath.indexOf("/Milo/")===0) {
    sId = "navMilo";
}
else if (sPath.indexOf("/Hvalpe/")===0) {
    sId = "navHvalpe";
}
else if (sPath.indexOf("/Kontakt/")===0) {
    sId = "navKontakt";
}
document.getElementById(sId).className = "active";
</script>
</div>
</body>
</html>

- men jeg fatter ikke, hvorfor du sætter navigationen med JavaScript. Hvorfor ikke bare hardcode det ind i de forskellige dokumenter? Det ville være langt smartere  =)

En anden ting er, at du bør bruge billeder i den størrelse, de skal vises i. HTML er håbløst dårligt til at skallere billeder med
Avatar billede olebole Juniormester
04. februar 2012 - 20:03 #23
FUCK, hvor er jeg dog træt af Ekspertens totalt stupide URL-parser! Det da for pokker være muligt at få en professionel til at skrive noget brugbart! Tænk, at gøre sig så grufuldt til offentlig nar og grin! Det er utroligt, at firmaet ikke har større selvrespekt!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Keeshond Milo</title>
<style type="text/css">
html,
body,
#wrapper {
    margin: 0;
    padding: 0;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#wrapper {
    position: absolute;
    width: 100%;
    background: #a4a6a3;
    color: #000;
    filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#87967a', startColorstr='#a4a6a3', gradientType='0');
    background: -moz-linear-gradient(top, #a4a6a3, #87967a);
    background: -webkit-gradient(linear, left top, left bottom, from(#a4a6a3), to(#87967a));
}
#logo {
    position: fixed;
    right: 7px;
    bottom: 7px;
    z-index: 2;
}
#nav {
    margin: 5px 5px;
}
#nav img {
    height: 100px;
    margin: 0 7px;
    border: 0;
    vertical-align: middle;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#nav img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
#nav img.active {
    height: 140px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
</head>   
<body>
<img id="logo" src="http://www.keeshondmilo.dk/images/logo.png" style="" alt="">
<div id="wrapper">
    <div id="nav">
        <a href="http://www.keeshondmilo.dk/OmRacen/">
            <img id="navRacen" src="http://www.keeshondmilo.dk/images/FrontOmRacen.gif" alt="Om racen"></a>
        <a href="http://www.keeshondmilo.dk/Milo/">   
            <img id="navMilo" src="http://www.keeshondmilo.dk/images/FrontMilo.gif" alt="Milo"></a>
        <a href="http://www.keeshondmilo.dk/Hvalpe/">
            <img id="navHvalpe" src="http://www.keeshondmilo.dk/images/FrontHvalpe.gif" alt="Hvalpe"></a>
        <a href="http://www.keeshondmilo.dk/Kontakt/">
            <img id="navKontakt" src="http://www.keeshondmilo.dk/images/FrontKontakt.gif" alt="Kontakt"></a>
    </div>
   
    <!--
        Her skriver du resten af sidens indhold - styled på passende måde
    -->
       
<script type="text/javascript">
var sId, sPath = location.pathName;
if (sPath.indexOf("/OmRacen/")===0) {
    sId = "navRacen";
}
else if (sPath.indexOf("/Milo/")===0) {
    sId = "navMilo";
}
else if (sPath.indexOf("/Hvalpe/")===0) {
    sId = "navHvalpe";
}
else if (sPath.indexOf("/Kontakt/")===0) {
    sId = "navKontakt";
}
document.getElementById(sId).className = "active";
</script>
</div>
</body>
</html>
Avatar billede no_doubt Nybegynder
04. februar 2012 - 20:17 #24
This is what I get i Internet explorer

http://imageshack.us/photo/my-images/846/eksperten.jpg/
Avatar billede olebole Juniormester
04. februar 2012 - 20:33 #25
Ikke med den kode, jeg har vist dig. Hverken i Internet Explorer eller i Firefox, som er det, du viser
Avatar billede no_doubt Nybegynder
04. februar 2012 - 21:15 #26
Det er altså den kode du har sendt sidst ?

Jeg har lige prøvet IE (godt nok 6.0) men der ligner den mit tidligere screenshot
Avatar billede olebole Juniormester
04. februar 2012 - 21:33 #27
Nu må vi lige holde styr på, hvad vi taler om. Det screenshot, du uploadede var ikke et af Explorer. Det var af Firefox - men hvilken version?

IE6 understøtter ikke position:fixed - but who cares? Den har i dag kun historisk interesse  =)
Avatar billede no_doubt Nybegynder
04. februar 2012 - 21:40 #28
Nej det var et Addon til FF der kan loade siden i IE men er igang med at hente IE 8 for at se om det skulle kunne fikse det :)
Avatar billede olebole Juniormester
04. februar 2012 - 22:05 #29
Stol aldrig på den slags addons - eller på forskellige editores design views. Der er én måde at teste en kode på - og det er i den browser, man ønsker at teste i  *o)
Avatar billede no_doubt Nybegynder
05. februar 2012 - 20:55 #30
Super, ser ud til at se rigtigt ud i IE 8, er der nogen måde at side kan blive bygget mere overskueligt op, evt med lidt forklaringer på scriptet, så jeg lære lidt :)

Evt. style.css ?
Avatar billede no_doubt Nybegynder
06. februar 2012 - 15:31 #31
Du må undskyle hvis jeg fucker din kode op, men da jeg gerne vil have menuen i en sperat fil (hvis der skulle komme andre menupunkter) har jeg prøvet external js og css

Men når man trykker på en af menuen skulle menupunktet gerne blive større så man ved "hvor man er"

Det gør det ikke ?
Avatar billede olebole Juniormester
06. februar 2012 - 16:58 #32
Jo
Avatar billede olebole Juniormester
06. februar 2012 - 17:00 #33
Undtagen på din forside - men det skyldes, at du i udgangspunktet har lavet en skidt løsning. Det bør løses serverside og ikke med JavaScript
Avatar billede no_doubt Nybegynder
06. februar 2012 - 22:23 #34
Det har da virket inden det der javascript (.active) kom.

Kan det fungere ?
Avatar billede olebole Juniormester
06. februar 2012 - 23:04 #35
Ja, det sker, når man ikke med det samme siger "skod" - men går med på en dårlig løsning. Løs det med serverscript. Det giver mening ... det gør JS ikke.

Det kan lade sig gøre med JS, men du bør naturligvis løse det med serverscript  =)
Avatar billede no_doubt Nybegynder
07. februar 2012 - 11:16 #36
Men jeg så helst det var i JS..kan du hjælpe ?
Avatar billede olebole Juniormester
07. februar 2012 - 16:01 #37
Der er fire kort, og de bliver større, når hver deres side bliver vist. Hvad ønsker du mere?
Avatar billede no_doubt Nybegynder
07. februar 2012 - 17:47 #38
Det gør de ikke når jeg åbner :S

De fire kort forbliver samme størrelse når man er inden på en given underside :S

Har du prøvet ?
Avatar billede olebole Juniormester
07. februar 2012 - 17:57 #39
Ja, men du skriver heller ikke det, jeg skrev. Du kører scriptet, inden elementerne eksisterer på siden. Husk på, at browseren læser koden oppefra og ned, ligesom vi gør  *o)
Avatar billede no_doubt Nybegynder
07. februar 2012 - 18:23 #40
Kan jeg på nogen måde lave det som "include" da jeg ønsker at have mulighed for at rette i en fil istedet for alle undersider ?
Avatar billede olebole Juniormester
07. februar 2012 - 18:37 #41
Ja, du kunne f.eks. flytte dit script tag ned i bunden af siden - eller du kan afvikle scriptet på onload. Dine billeder skal bare være læst af browseren, når scriptet afvikles
Avatar billede no_doubt Nybegynder
07. februar 2012 - 18:42 #42
HEEELP ?
Avatar billede olebole Juniormester
07. februar 2012 - 18:51 #43
Ved du, hvad et script tag er? Ved du, hvor bunden af siden er? Hvis du ved det, hvad er det så, du ikke kan finde ud af?
Avatar billede no_doubt Nybegynder
07. februar 2012 - 21:37 #44
Kan det laves således at hele menuen og javascriptet bliver smidt i en fil ?

er scripttag ikke bare <script> ?
Avatar billede olebole Juniormester
07. februar 2012 - 23:13 #45
Sådan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Keeshond Milo</title>
</head> 
<body>
<img id="logo" src="http://www.keeshondmilo.dk/images/logo.png" style="" alt="">
<div id="wrapper">
    <div id="nav">
        <a href="http://www.keeshondmilo.dk/OmRacen/">
            <img id="navRacen" src="http://www.keeshondmilo.dk/images/FrontOmRacen.gif" alt="Om racen"></a>
        <a href="http://www.keeshondmilo.dk/Milo/"> 
            <img id="navMilo" src="http://www.keeshondmilo.dk/images/FrontMilo.gif" alt="Milo"></a>
        <a href="http://www.keeshondmilo.dk/Hvalpe/">
            <img id="navHvalpe" src="http://www.keeshondmilo.dk/images/FrontHvalpe.gif" alt="Hvalpe"></a>
        <a href="http://www.keeshondmilo.dk/Kontakt/">
            <img id="navKontakt" src="http://www.keeshondmilo.dk/images/FrontKontakt.gif" alt="Kontakt"></a>
    </div>
 
    <!--
        Her skriver du resten af sidens indhold - styled på passende måde
    -->
</div>
<script type="text/javascript" src="menu.js"></script>
</body>
</html>
Avatar billede no_doubt Nybegynder
08. februar 2012 - 09:30 #46
Kan denne her del

    <div id="nav">
        <a href="http://www.keeshondmilo.dk/ (...)
            <img id="navRacen" src="http://www.keeshondmilo.dk/ (...) alt="Om racen"></a>
        <a href="http://www.keeshondmilo.dk/ (...)
            <img id="navMilo" src="http://www.keeshondmilo.dk/ (...) alt="Milo"></a>
        <a href="http://www.keeshondmilo.dk/ (...)
            <img id="navHvalpe" src="http://www.keeshondmilo.dk/ (...) alt="Hvalpe"></a>
        <a href="http://www.keeshondmilo.dk/ (...)
            <img id="navKontakt" src="http://www.keeshondmilo.dk/ (...) alt="Kontakt"></a>
    </div>

Også skrives ind i en ekstern fil eller hvordan griber man det an ?
Avatar billede olebole Juniormester
08. februar 2012 - 15:37 #47
Hvorfor er det, du insisterer på JavaScript? De ting, du gerne vil lave, er helt oplagte emner for serverscripts
Avatar billede no_doubt Nybegynder
08. februar 2012 - 16:14 #48
Jeg aner bare ikke hvordan man kan spørge på en url med ASP

Og så troede jeg det var rimelig simpelt i javascript
Avatar billede no_doubt Nybegynder
09. februar 2012 - 09:26 #49
Ligger du et svar ?

Har fået stykket noget sammen i asp
Avatar billede olebole Juniormester
09. februar 2012 - 14:09 #50
Godt, du fandt en løsning. Jeg var ikke ret meget ved PC'en i går, så jeg så ikke #48. Nu er det meget lang tid siden, jeg har skrevet ASP, men jeg mener, du kan bruge Request.ServerVariables("url"), og menuen skal bare ind med en include.

Jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes - men tak for tilbudet  =)
Avatar billede no_doubt Nybegynder
09. februar 2012 - 19:28 #51
Hej igen

Jeg er ikke sikker på jeg forstår, vil du uddybe eller har du fået nok `? :)
Avatar billede olebole Juniormester
09. februar 2012 - 20:05 #52
Hvilken af delene forstår du ikke?
Avatar billede no_doubt Nybegynder
09. februar 2012 - 22:28 #53
Hvordan mener du asp'en osv skal ske ud ?
Avatar billede olebole Juniormester
09. februar 2012 - 22:55 #54
Det mener jeg sådan set ikke noget om  =)
Avatar billede no_doubt Nybegynder
09. februar 2012 - 23:04 #55
ok
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

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