18. februar 2007 - 20:34Der er
48 kommentarer og 1 løsning
at integrere et fotoalbum (JAlbum) i Frontpage
Hejsa!
Min hjemmeside er lavet i tabeller. den har en top, midte og venstre side med en menu. McClemens herinde har så lavet en kode til mig, så man får en scroll ved brødteskten i midten, så man kun scroller den og intet andet.
Nu vil jeg rigtig gerne integrere et fotoalbum fra JAlbum, og de foreslår man gør det via en iframe (de fortæller også hvordan man gør det uden, men det forstår jeg ærlig talt ikke ;) -http://jalbum.net/integrate.jsp
jeg sætter så koden ind til albummet, og håbede at de små scrolls stadig virkede, men det gør de så ikke: <div style="float:right;margin-top:60px;width:665px;height:791px;overflow:auto; padding-left:0px; padding-right:0px; padding-top:10px; padding-bottom:10px"> <p align="center"> <iframe src="portfolio/album/index.html" width="512" height="370"> Please use a browser that supports iframes </iframe>
Kan man ændre noget i div stylen eller indsætte albummet på en anden måde, så det kan lade sig gøre, at det ser pænt ud?
Du har pillet ved din div style igen ... <div style="padding: 10px 0px; overflow: auto; float: right; margin-top: 60px; width: 665px; height: 290px;"> - Den bliver for høj ;)
Og så prøv at sætte din iframe til en højde på 280
Ih jeg kopierede sgu da ellers din kode fra en af mine andre sider, så den skulle passe! Ih altså! Nu jeg har dig *G* er det noget med, man kan indsætte en "flash detector", sådan at den selv finder ud af, om brugeren har flash, og siger at det kræver flash at se et galleri, hvis man ikke har det, og så med et link til at downloade flash? :)
Det andet må jeg lige rode med i aften - nu skal det altså bare virke! :) :)
Et eksempel kunne måske se ud som noget i stil med dette:
<!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>
<SCRIPT LANGUAGE="Javascript"> <!--
var flashinstalled = 0; var flashversion = 0; MSDetect = "false"; if (navigator.plugins && navigator.plugins.length) { x = navigator.plugins["Shockwave Flash"]; if (x) { flashinstalled = 2; if (x.description) { y = x.description; flashversion = y.charAt(y.indexOf('.')-1); } } else flashinstalled = 1; if (navigator.plugins["Shockwave Flash 2.0"]) { flashinstalled = 2; flashversion = 2; } } else if (navigator.mimeTypes && navigator.mimeTypes.length) { x = navigator.mimeTypes['application/x-shockwave-flash']; if (x && x.enabledPlugin) flashinstalled = 2; else flashinstalled = 1; } else MSDetect = "true";
// --> </SCRIPT>
<SCRIPT LANGUAGE="VBScript">
on error resume next
If MSDetect = "true" Then For i = 2 to 6 If Not(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & i))) Then
Else flashinstalled = 2 flashversion = i End If Next End If
If flashinstalled = 0 Then flashinstalled = 1 End If
Mange tak :D detmå jeg da prøve af! lige en sidste ting: på skærme med høj opløsning, er min side helt oppe i toppen af skærmen, men passer jo fint i bredden - kan jeg skrive i koden, at den skal være centreret på skærmen? det var nemlig også noget, jeg var ret glad for med min iframe :)
det virker desværre ikke at sætte denne ind <div style="padding: 10px 0px; overflow: auto; float: right; margin-top: 60px; width: 665px; height: 290px;"> og når jeg laver min iframe så lille, bliver billederne alt for små (de kan ses under /gallery)
M.h.t. centrering på begge led kan du gøre det ved at lægge indholdet ind i en tabel som i dette eksempel:
<!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>
</head><body><table style="height:100%;width:100%;"><tbody><tr><td><div style="background:#aaa;width:200px;height:200px;margin:0px auto;">Udskift dette div element med alt indholdet</div></td></tr></tbody></table></body></html>
... M.h.t. til at det lavede dine billeder mindre, ja så er du nok nødt til at lave iframen og div'en højere som du gjorde før. Billedet kan jo ikke være størrer end der er plads til i det billedegalleri som du anvender.
Måske skal du finpudse lidt, men det jeg tænker på med det er at skjule en del af det sorte stykke i toppen af galleriet der fremkommer når galleriet laves højere.
Det hjalp i hvert fald på billedernes størrelse i galleriet, der kommer så stadigvæk store scrolls på min skærm og man kan ikke se 2007 copyright... uden at scrolle - det kan man så til gengæld på min kærestes pc, så har jeg problemer, fordi jeg "kun" har en 17" skærm?
prøvede lige at sætte "centrerings"koden ind - skal jeg bare sætte min brødtekst ind, hvor du har skrevet "udskift dette...." ? for det hele røg ned ad siden inkl menuen i venstre side - men altså det er heller ikke så vigtigt for mig :)
Lige efter body skriver du: <table style="height:100%;width:100%;"><tbody><tr><td> ... derefter kommer resten af dit indhold ... og så lige før afslutningen af body skriver du: </td></tr></tbody></table>
Så indsætter du den css del: html,body {height:100%;padding:0px;margin:0px;}
og fjerner din baggrund som du har placeret på body elementet ...
... Så skulle alt blive centreret midt på skærmen. Men måske misforstår jeg hvad du præcis ønsker når jeg læser: "på skærme med høj opløsning, er min side helt oppe i toppen af skærmen, men passer jo fint i bredden - kan jeg skrive i koden, at den skal være centreret på skærmen?"
og: "for det hele røg ned ad siden inkl menuen i venstre side"
Prøv evt at sætte din egen opløsning op til fx 1280 x 1024 - den sidder jeg med på arbejdet. Min side fylder anturligvis ikke hele skærmen, da den jo har en fast størrelse til at passe 1024 x 768 - på en skærm med høj opløsning lander siden så i toppen af skærmen, og området, hvor der står copyright 2007... fylder en kvartskærm. Da jeg havde min iframe, var den altid placeret på midten af brugerens skærm, hvis brugeren havde højere opløsning. jeg synes, det ser lidt voldsomt ud, at min side sidder på de øverste 2/3 dele af skærmen, og den nederste 3. del er grå med "copyright..."
Jeg har så sat din kode forkert ind, da jeg prøvede i går aftes, for det rykkede rundt på alt indholdet af siden i stedet for at indsætte det i en tabel.
Nå men det korte af det lange er vel, at selve siden skal være centreret!? (og ikke bare indholdet) :)
Jeg fandt i øvrigt ud af, at det er IE, der laver scrolls på min galleri side - grunden til jeg ikke havde probs på kærestens pc er, at han bruger FF - da jeg åbnede i IE på hans pc, var det det samme.
Yes, det ser jo rigtig godt ud, det må jeg lige prøve derhjemme :) Hvordan med de scrolls i IE, hvordan kan det være, de kommer? skal hele siden laves mindre? For kan se, du jo også bruger FF :)
Den eneste scroller jeg kunne se er den lille ude i siden. Jeg har lige startet en IE6 istedet for min IE7 og kan godt se problemet ... kigger lige lidt på det.
Denne blev vist for stor til IE6: <div style="padding: 10px 0px; overflow: auto; float: right; margin-top: 60px; width: 665px; height: 410px;">
Prøv med denne istedet: <div style="padding: 10px 0px; overflow: auto; float: right; margin-top: 60px; width: 665px; height: 310px;">
... Undskyld langsomt svar, jeg får åbenbart ikke mail ved nye indlæg i spørgsmålet - Jeg har hørt Olebole snakke om, at han tit er udsat for det, dog er det første gang jeg selv oplever det ...
ang css delen, skal den indsættes på mine sider eller på mit css dokument? jeg har fået placeret tabellen rundt om indholdet, men så mangler jeg så at få det centreret som på dit skærmprint :)
lige pt har jeg denne div style på alle sider <div style="padding: 10px 0px; overflow: auto; float: right; margin-top: 60px; width: 665px; height: 290px;"> og der er height jo kun 290, men jeg får stadig de scrolls
og i øvrigt skal du ikke tænke på, om der går lang tid mellem dine svar - jeg er super glad for, du gider bruge tid på det overhovedet! og jeg er alligevel først hjemme ved denne tid og kan prøve det af!
"lige pt har jeg denne div style på alle sider" Sidst jeg kiggede synes jeg at der stod height: 410px; under galleri siden ... men kigger lige på det senere så, jeg synes jeg fik det til at virke på min IE6 online ved at rette højden ned ...
Nå så fik jeg fjernet de scrolls på IE6, jeg har så sat tabellen på udenom det hele og indsat den css, men nu er venstrejusteret i stedet for centreret. jeg har uploadet index, så du kan se det.
det virker med 290 i højden i hvert fald :) det satte jeg ind på alle siderne i går efter dit først svar i denne tråd! det kan så være, siderne ikke er uploadede ;) det gør jeg lige
og grunden til, du ikke kunne komme ind på min side er, at jeg sletter min index side, hvis jeg tror, vi ikke lige skal kigge på den. Jeg vil ikke have, at folk har adgang til sådan en halv-færdig side :( Så når jeg prøver din kode af, gør jeg det lokalt, og så evt uploader, hvis det fucker ;)
Hmm, baggrunden på main skal variere afhængig af siden ... Så 21:47:08 skal nok lige rettes til. Alternativt til at definere dem på hver side kan du variere id som main1, main2 o.s.v. og så have flere forskellige main1 - 4 css dele i dit stylesheet ... det er nok mest optimalt, så du ikke skal definere css'en på hver enkelt side ...
da du skrev: html, body { height:100%; margin:0px; padding:0px; } body { background-color:#cccccc; } a:link { color:#CCCCCC; } a:visited { color:#CCCCCC; } a:active { background-color:#CCCCCC; }
troede jeg, jeg skulle erstatte css delen fuldstændig med ovenstående - jeg har ingen forstand på css, bare leget en smule med det via en toturial, hvor jeg har lært lidt omkring baggrund, fonte og farver ;)
Nu er siden tilbage på normal og centreret i høj opløsning på min computer (jeg har igen slettet index) - nu er der scrolls igen. kunne du ikke fortælle mig, hvilken del af dine kode-forslag, der vedrører de scrolls, så jeg kan se videre på det i morgen aften? :)
årh nu er jeg helt forvirret med det css - den css kode, du har givet mig, har jeg faktisk sat ind på hver side - kunne jeg bare have sat det i et dokument? Og ja, jeg har min index side, min photoshoot, contact og de andre sider, der har forskellige baggrunde, derfor lyder det godt med main 1-4. men gud hvor det hele kører rundt i knolden på mig lige nu!
"css ... troede jeg, jeg skulle erstatte css delen fuldstændig med ovenstående" Det skulle erstatte den css del du på daværende tidspunkt havde i dit stylesheet. Ikke selve den css del som lå inde på din html side i et internt css style element.
eller main1 afhængig af hvad du vælger så kan du inde på selve galleri html siden slette:
<style type="text/css"> html,body {margin:0px;padding:0px;} html {overflow:auto;} p {margin:0px;} #main {background:url('Images/Baggrunde/Baggrund2.gif') #373737 no-repeat 50% 0;height:520px;position:relative;} </style>
...
- Samme som ovenstående gør du på hver html side med en variering af mains id. Og så varierer du baggrunden og #id selectoren så det passer sammen i dit stylesheet.
...
Husk lige at tilføje p {margin:0px;} ind i selve dit stylesheet også når du sletter den interne css blok.
"jeg har ingen forstand på css, bare leget en smule med det via en toturial, hvor jeg har lært lidt omkring baggrund, fonte og farver" Hehe, ok - så tag en del ad gangen og løs det ene problem ... Derefter tager vi de andre ting. Jeg synes at jeg havde læst inde på din side, at du havde gået på medie linjen eller noget i den stil, og så tænkte jeg at du måske havde pillet ved det html og css tidligere ;)
"Nu er siden tilbage på normal og centreret i høj opløsning på min computer" Det vil sige at den blev centreret med den tabel både horisontalt og vertikalt ?
Nå forfra: "Det vil sige at den blev centreret med den tabel både horisontalt og vertikalt ?" nu ser min side ud som på dit screendump i denne tråd, når jeg sætter min opløsning til 1024 x 1280 :)
Jeg har nu lavet mit css dokument sådan: html, body { height:100%; margin:0px; padding:0px; } body { background-color:#cccccc; } a:link { color:#CCCCCC; } a:visited { color:#CCCCCC; } a:active { background-color:#CCCCCC; } html {overflow:auto;} p {margin:0px;} #main1 {background:url('Images/Baggrunde/Baggrund.gif') #373737 no-repeat 50% 0;height:520px;position:relative;} #main2 {background:url('Images/Baggrunde/Baggrund2.gif') #373737 no-repeat 50% 0;height:520px;position:relative;} #main3 {background:url('Images/Baggrunde/Baggrund-photoshoot.gif') #373737 no-repeat 50% 0;height:520px;position:relative;} #main4 {background:url('Images/Baggrunde/Baggrund-kontakt.gif') #373737 no-repeat 50% 0;height:520px;position:relative;}
jeg har ikke prøvet det af - er det korrekt?
Jeg har gået på Medieskole men på fotolinie, så ingen html/ css dér :) og min lærer på HH i IT A niveau var altså heller ikke stærk i det, så jeg har lært det ved at prøve mig frem og spørge herinde ;)
"det her er fra min index side, som ikke viser baggrundsbilledet:"
1. Har du rettet style/style.css så indholdet er som i 18:58:18 2. Eksisterer billedet på denne placering: Images/Baggrunde/Baggrund.gif ? ... du behøver jo heller ikke at lægge filen op som index.html du kan kaste den op som gerhg.html f.eks. og så sige til imorgen, så kan jeg kigge på baggrunden, hvis ovenstående ikke hjælper.
Jeg fik for et stykke tid siden e-mails ved nye indlæg, men fik dog ikke et denne gang ... Derfor det sene nattesvar, inden jeg tæller får ;o)
mit stylesheet ser fuldstændig ud som 18-58, intet ændret! billedets placering har jeg heller ikke pillet ved. jeg har uploadet min index side, hvor der er ikke er noget på overhovedet lige nu *G* Håber du kan finde fejlen i koden, og at du har fået sovet godt!! *G*
... Da css baggrundsdefineringen er rykket fra selve filen og ind i stylesheetet som ligger et mappeniveau nede skal der hoppes et niveau op med ../ eller hoppes op til rod mappen med /.
Det sidste med ../ anbefales da den sikkert også vil virke lokalt. Den med blot / virker ikke lokalt.
nu ser det næsten ud til at lykkes! baggrundsbillederne kom på plads! Men hvis jeg sætter div og tabel sådan: </head><body> <table style="height:100%;width:100%;"><tbody><tr><td> <div id="main1">
Jamen ok, så kommer der lige et svar her ;) Og tak for point :)
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.