17. juli 2008 - 23:25Der er
62 kommentarer og 1 løsning
De dumme tabeller
Nu har jeg bøvlet med dette her mange gange efterhånden i flere forskellige projekter og på mange forskellige måder. De, undskyld mig udtrykket, forpulede tabeller opfører sig jo aldrig ens i forskellige browsere, og det kan være svært nok at prøve at få det til at du i en enkelt browser. Nu har jeg brugt tilstrækkeligt mange timer på det, og nu lader jeg jer få opgaven:
Det er garanteret helt simpelt. Mit goal er selvfølgelig at lave en skygge hele vejen rundt om hjemmesiden (endnu bortset fra bunden, den burde nu være til at klare). Hvad gør jeg galt? Øverste billeder s_lt.png og s_rt.png burde jo ligge klods opad min skygge på siden af hjemmesiden - eller hvad? Det virker langt fra i Microsoft Internet Explorer (version syv), og det virker næsten i Mozilla Firefox (version 3).
Og vær venlig ikke at komme med en løsning, der hedder sig, jeg skal bygge hjemmesiden op fra bunden igen på en anden måde... Et mere trættende svar kan jeg ikke ønske mig.
Desuden har jeg også læst, at strengt taget skal man ikke bruge tabeller til layout. Hvorfor? Og hvordan laver man ellers en fin side, hvor tingene skal ligge klods op ad hinanden i rektangulære størrelser? Dette spørgsmål er ikke hovedspørgsmålet, så det er bare et bonusspørgsmål. Der er ydderligere 100 point for svaret på dette, men jeg var for doven til at lave et nyt spørgsmål, så jeg refererer bare hertil fra et nyt spørgsmål, når der skal uddeles point.
På forhånd tusind mange tak! Jeg har virkeligt brug for et svar - og gerne hurtigt.
At rette designet kan jeg ikke hjælpe dig med, men bonusspørgsmålet kan jeg godt klare.
Og hvis du skulle benytte dig af det, ville det jo netop føre til at du skulle opbygge siden på en anden måde.
Der er ikke mange, der stadig bruger tabeller - bl.a. fordi de er så besværlige at arbejde med og opfører sig forskelligt fra browser til browser. I dag bruger næsten alle div-elementer og CSS.
Men to div-elementer i rumpen på hinanden placeres jo oven over hinanden. Så hvis jeg så vil have dem placeret ved siden af hinanden, skal jeg positionere med position:relative eller position:absolute?
Synes godt om
Slettet bruger
18. juli 2008 - 00:14#3
eller du kan floate dem, smid en container omkring to div'er, sæt bredde på diverne således at de samlet ikke ikke bliver bredere end containeren, og float dem så henholdsvis mod venstre og højre
Jeg kunne selvfølgelig også bare søge svaret på w3schools.com. Okay det kan man ikke. Hvad gør man så i sådan et tilfælde? Så går man vel til positioneringer? "Position" er altid den, der redder mine mislykkedes resultater ;)
Som du nok kan se, har jeg næsten lavet det hele om, men håber du kan bruge noget af det ;-) Dette er testet i IE6, IE7, FF2, FF3, Opera 9,51 og Safari 4 her http://browsershots.org/
ahh, den har jeg alligevel aldrig læst. Bruger dog ofte siderne om css og html egenskaberne (når jeg ikke lige kan huske syntaksen), har før hørt at man skal holde sig fra w3schools artikler
Ja, jeg slår også selv nogle ting op på siden indimellem - hvis man, som vi, er bare rimelig godt inde i webudvikling, kan man da godt bruge den - det er nok mere nybegynderne, der skal passe på i tutorialerne.
@zips Tak for arbejdet, det må jeg sige. Desværre har jeg en kræsen kunde, der ikke vil tolerere, at jeg laver bare det mindste om på siden, så det er vigtigt, at der ikke er nogen topskygge på, og at hjørneskyggerne i toppen sidder på siden af hjemmesiden, og det var her, det gik galt for mig. Men tak for forsøget, det må jo så blive min nødløsning, hvis jeg ikke kan få det lavet med divs.
@w13 Jeg tænkte faktisk helt konktret på, om man kunne floate left, middle, right eller måske nærmere 1, 2, 3, 4, 5, (...), så man kunne stille lige så mange divs op ved siden af hinanden, som man ville have det. På w3school's hjemmeside står der bare, at man kan sætte det til left eller right, og så kan man jo netop kun stille to divs ved siden af hinanden.
@dalief, @w13 Hvad er det for misforståelser eller fejl? Jeg fangede det ikke helt. Og hvis det kun er i Ajax-kategorien, så er jeg felst, for jeg benytter mig af Anthony T. Holdener III's Ajax, der gerne skulle dække hele emnet på sine knap tusind sider. Men tilbage til de fejl og misforståelser, kan man vel ikke gå helt galt i byen, hvis man optimerer til W3C-standarderne? http://validator.w3.org/
Synes godt om
Slettet bruger
18. juli 2008 - 10:49#15
det der tænkes på er nok mere at AJAX jo har meget med javascript at gøre og at den javascript som omtales er noget skod kode (aner det ikke for jeg har ikke kigget).
Kender I så en validator eller en side, der gennemgår javascript, så jeg ikke får laver noget skodkode? Umiddelbart kan jeg ikke rigtigt se, hvilken form for skodkode, jeg kan lave, for javascript er jo ret begrænset i sin syntaks. Der er nogle funktioner og funktionskald. Og tak w13, det virker jo superb. Så er det bare i gang med at omskrive skidtet.
w13, du svarede jo på spørgsmål to, så du får dine 100 point. Men du var sammen med dalief om at svare på første spørgsmål, så hvis jeg laver en ny tråd og deler pointene mellem jer, er det så okay?
Nej, der er vist ikke nogen ordentlig JavaScript-validator. Og jo, desværre kan der være rigtig mange fejl i en JavaScript-kode. Det skyldes - udover syntaksen - at mange browsere har indført deres egne koder (IE har klart været værst, og FF får vist andenpladsen). Og selvfølgelig gælder det om for alt i verden at undgå disse koder, som kun virker i enkelte browsere. I mange tilfælde er der jo i dag en generel kode, som virker i alle browsere!
Derudover er der også de koder, som ikke indgår i nogen standard og derfor ikke vil virke i fremtiden og under XHTML. Dette gælder bl.a. den meget debatterede innerHTML-funktion, som man, efter min mening, skal holde sig fra. Så bør man bruge DOM i stedet.
Ja innerHTML har jeg dog gjort mig brug af før, fordi den er så dejlig nem at bruge. Men jeg kigger lige på det andet. Og tak for advarslen. Så må jeg google mig lidt frem til, om de forskellige funktioner er understøttet på global basis eller ej.
nu vi er ved innerHTML, hvad gør man så hvis man har et tekstarea i en form som brugeren kan skrive HTML i (vi stoler på brugeren) og vi ville gerne lave en javascript baseret preview (så man er fri for at skulle forbi serveren), der synes jeg da at innerHTML er ret nyttig for jeg er fri for at skrive en HTML parser som kan lave den potentielt dårligt skrevede HTML om til korrekt DOM.
For mit vedkommende har jeg bare downloadet de mest gængse browsere. Når jeg programmerer, tester jeg hele tiden løbende i dem alle, så jeg fanger de koder, der ikke fungerer cross-browser. Og rimelig hurtigt vænner man sig til at huske de rigtige koder.
Daleif>> Ja, det er bestemt nyttigt. Jeg bruger det da også meget til debugning af mine koder, og det er da klart lettest i det scenarie, du nævner. Ikke desto mindre har jeg brugt et par dage til at lave en god parser, så nu behøver jeg aldrig bruge innerHTML på mine sider mere. =)
Og en HTML-parser er i virkeligheden bare en hjemmelavet innerHTML-funktion, som gør brug af nogle ordentlige DOM-koder. F.eks. kunne man så sige: parseHTML("Tekst 1<br><b>Tekst 2</b>") Og så vil den returnere det som elementer i stedet for en tekststreng. Det er jo dét, der er så hamrende galt med innerHTML: det propper en tekststreng af elementer ind på siden, og det kan undgåes med en sådan parser.
Ja, det er også rigtigt. Mit første forslag er nok at foretrække. Virker det ikke?
Synes godt om
Slettet bruger
18. juli 2008 - 11:45#33
w13 >>, hvordan tager du så højde for skod kode? f.eks. folk som ikke lukker li's eller p's? Vel ordnet kode er nem at parse. Det er den primære årsag at jeg anbefaler som at skrive i xhtml, det kan godt være at browserne ikke understøtter det ordentligt, men det sætter krav til koden som gøre den meget nemmere at parse med andre programmer.
Ja, forkert kode vil resultere i forkert resultat. Sådan som man kunne ønske, at browserne reagerede på skodkode. =) Jeg har dog taget højde for forskellige, mindre fejl, mener jeg at kunne huske.
Jeg forsøgte jo blot at gøre hvad du skrev, "Mit goal er selvfølgelig at lave en skygge hele vejen rundt om hjemmesiden (endnu bortset fra bunden, den burde nu være til at klare)." Derfor skyggen i toppen, du skriver også "Og vær venlig ikke at komme med en løsning, der hedder sig, jeg skal bygge hjemmesiden op fra bunden igen på en anden måde..." men nu er du igang
Jeg kan godt forstå det skal laves i div, derfor bare igang ;-)
Er det knas med siden i IE6 også? Hmm. Jeg dropper snart html permanent, for jeg gider ikke at bøvle med det i tusind forskellige browsere. Så er Flash sgu så dejligt nemt, at det altid er det samme.
Samt din pngfix.js gør at siden ikke loader alle billeder, sæt scriptet i bunden for at få det til at virke bedre ;-)
Synes godt om
Slettet bruger
18. juli 2008 - 13:17#44
Det er ikke noget om om det kan ses, hvad gør du med svagtseende? ordblinde?
Ja HTML er bøvlet, men lær at kode efter standarderne og så kommer det meste af sig selv. Start desuden at kode til FF og dernæst tilpas skidtet til IE ikke omvendt.
Hvorfor er det, det ikke kan lade sig gøre at lave en tabel i to rækker, hvor anden kolonne har rowspan="2" og højden i første kolonne, anden række er defineret, så højden i første række, første kolonne justerer sig selv?
Jeg forstår det stadig ikke. Prøv du lige at lave et kodeeksempel på en tabel i to kolonner og to rækker. Højre kolonne skal have rowspan="2", så det fungerer som én kolonne, og den lille celle nede i venstre hjørne skal have højden 10px. Hvis du så sætter hele tabellens højde til 110px, skulle cellen i øverste venstre hjørne jo gerne være 100px høj. Om jeg så ser på det som streger den ene og den anden vej eller som et regneark, kan jeg ikke forstå det. Sådan:
Jeg synes personligt, det er en ret dum måde at gøre det på, men der er vist ikke ret mange andre måder, når man arbejder med tabeller. Derfor gør man det med div og CSS i dag.
Måske kunne man engang gøre det let med tabeller, men så var det, fordi browserne tolkede dem anderledes.
Hmm. Det kan jeg desværre ikke bruge til ret meget, fordi indholdet af højre kolonne ikke har samme højde. Nåh, men tak for hjælpen til det hele i hvert fald. Jeg prøver lidt at lege med divs, og så sørger jeg for at tilpasse til Firefox først og klare Internet Explorer bagefter.
Hvorfor skal jeg i øvrigt det? Altså tilpasse til Firefox og klare Internet Explorer bagefter. Hvilke tricks findes der til at få en side til at du i IE, når den duer i Firefox?
Synes godt om
Slettet bruger
18. juli 2008 - 15:41#53
Hvis du starter med at tilpasse til FF, så virker det i FF og sandsynligvis i langt de fleste browsere inklusive nye IEer, men hvis du kun udvikler til IE er det desværre ret sandsynligt at du kommer til at lave noget som ikke virker i andet end IE, eller at udseendet kommer til at se underligt ud.
Mht. dette med ting som skal være lige højre så har jeg tidligere anvendt
Jeg har lavet det, som det set ud på http://cre.maqhem.com/ efter aftale med kunden. Og så må jeg kigge på det med divs og css for at se, om jeg kan mestre det. Så ja, jeg skifter til divs og css :) Og tak for linket daleif. Jeg har selv haft fundet en version, der kunne det samme, men koden dertil var lang, klam, bøvlet og fuld af hacks til diverse browsere. Koden, du henviser til, et kort og elegant, så jeg siger mange tak.
Det er et hack, som gør at visse browsere står af, fordi de ikke forstår den (og den giver jo heller ikke mening, da der jo ikke er noget element, der omkranser html-elementet !-)
-- betydningen er nemlig det element med id="container", der ligger inde i et html-element, som ligger inde i et vilkårligt element !o]
Jeg kan gætte mig til, ud fra kommentaren, at IE forstår det - men hvordan tolker den det? Og eftersom nogle browsere ikke læser det... ja hvad læser disse så, som IE ikke læser? Der må jo være en forskel på, hvordan resten af koden fortolkes i IE i forhold til andre browsere, for ellers ville det ikke give mening at lave specialkode til IE. Det er jo klart.
-- men alle hacks er principielt af det onde, men nogle browser-afhængige fejl- og mis-fortolkninger af css-rekommendationerne gør det desværre nødvendigt ...
-- en anden meget brugt metode til at komme forbi den slags problemer, som specielt er introduceret ef IE-browserne, er brugen af conditional comments, der som udgangspunkt _ikke_ er et hack, men benyttelse af en speciel IE-feature !o]
Ja jeg forstår godt, hvad du mener, og jeg kan godt følge dig i, at hacks ikke er noget godt. Men man kan jo så vurdere med sig selv, om man vil have den mere "generelle" kode, som benytter sig af hacks, eller om man vil lave en god kode, der virker til de fleste browsere og så få de andre browsere til at følge trop ved at give dem det ind med ske. Jeg ved snart ikke, hvad jeg foretrækker.
Synes godt om
Ny brugerNybegynder
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.
