Overvejer af skifte skabelon

[Kim Ludvigsen]

Du har flere gange prøvet at lege med kildekoden og andre nørderier, så jeg vil give dig en opskrift, som nok er den nemmeste måde at få siden til at virke ordentlig på, men som betyder, at du skal rode med kildekoden.

Den rigtige opbygning af koden er at placere billeder og tilhørende tekst i en div-boks, og hvor teksten er placeret i et tekstafsnit. I øjeblikket ligger dine billeder også i et tekstafsnit.

Du skal altså have koden til en div-boks, efterfulgt af koden til et billede og så et tekstafsnit med teksten. Og i de tilfælde, hvor et sæt billede og tekst skal placeres under det forrige billede, skal du også indsætte et flydestop. I stil med dette, hvor jeg har indsat linjeskift for at gøre det mere overskueligt:

<div class="flydestop">
<img style="width: 300px; height: 225px; float: left;" alt="alternativ tekst" title="billedtekst" src="billeder/IMG_0010.jpg" />
<p>Her er teksten til billedet</p>
</div>

Og det gentager du så bare hele vejen ned ad siden. Hvis du skal have to billeder ved siden af hinanden placeres de i den samme div-boks:
<div class="flydestop">
<img ... billede 1><img ... billede 2>
</div>

Og det samme med filmene:
<div class="flydestop">
<filmkode>
</div>

Alle de ekstra <p> og </p>, du har i koden omkring billederne og stående sammen efter en tekst, kan du roligt slette.

Dine links til toppen placerer du blot mellem div-boksene med denne kode:
</div>
<p><a href="#renovering">Til toppen</a></p>
<div class="flydestop">

Efter ændringen kan du slette stilen img, som du oprettede til at lave afstand mellem billeder og tekst. Den er ikke nødvendig mere, eftersom du allerede har afstand på tekstafsnit.

Samtidig kan du lave en lodret afstand mellem billederne, så de ikke kommer lige under hinanden. Det kan du fx gøre ved at åbne css-editoren, markér stilklassen flydestop, klik på fanen Boks og angiv 5px eller 10px ud for Indrykning, Top.

[Jan]

Rigtig mange tak, den opskrift er jeg meget glad for. Nu er jeg ganske sikker på at lige netop det, giver ikke anledning til flere spørgsmål. Meen måske dukker der andet op.

[Kim Ludvigsen]

Nu er jeg ganske sikker på at lige netop det, giver ikke anledning til flere spørgsmål.

Nu skal du ikke love for meget

Det kan for øvrigt være en god ide at udskifte linket til toppen: <a href="#renovering"> med et mere sigende navn, fx <a href="#top">. I så fald skal du blot huske også at ændre name="renovering" øverst på siden til name="top".

[Jan]

Mange tak for dit svar. Specielt den første sætning blev jeg meget glad for. he he.

Nu skal du ikke love for meget

Ok, jeg er jo lydig. Trækker hermed mit løfte tilbage, og fortsætter i samme skure.

Nu har jeg, tror jeg da, fulgt din anvisning til punkt og prikke ned til det første link til toppen. Billederne står helt til venstre og teksten er tæt op af billedet Linket "til toppen" er placeret helt tåbeligt. Resultatet kan ses her: http://janss.dk/veterantraktor.html Hvad har jeg nu gjort forkert? (jeg nærer det forfængelige håb om, at du har udeladt noget i din opskrift)

Det kan for øvrigt være en god ide at udskifte linket til toppen: <a href="#renovering"> med et mere sigende navn, fx <a href="#top">. I så fald skal du blot huske også at ændre name="renovering" øverst på siden til name="top".

Ja det har jeg bare ikke tænkt på. På de gamle sider er der en afskyelig masse link på, som jeg ikke kan huske hvor fører hen. Også dette råd vil jeg følge. Jeg mente naturligvis ankre.

[Kim Ludvigsen]

Nu har jeg, tror jeg da, fulgt din anvisning til punkt og prikke ned til det første link til toppen. Billederne står helt til venstre og teksten er tæt op af billedet Linket "til toppen" er placeret helt tåbeligt. Resultatet kan ses her: http://janss.dk/veterantraktor1.html Hvad har jeg nu gjort forkert? (jeg nærer det forfængelige håb om, at du har udeladt noget i din opskrift)

Dit håb er hermed opfyldt. Problemet er, at flydestoppet først indsættes i den efterfølgende div. Det skal naturligvis indsættes i koden sammen med linket til toppen. Du skal blot ændre:
<p><a href="#renovering">Til toppen</a></p>
til
<p class="flydestop"><a href="#renovering">Til toppen</a></p>

Du behøver ikke fjerne flydestoppet fra den efterfølgende div, medmindre du synes, der kommer for meget luft mellem linket og det efterfølgende billede.

Med hensyn til den tætte tekst har jeg åbenbart lavet endnu en fejl. Jeg forstår egentlig ikke, hvorfor tekstsafsnittet ikke får den angivne afstand til billedet, men det er ikke værre, end at du kan oprettet stilen img igen. Og for at undgå problemer med ulige afstand i siderne, så angiv den samme margin til både højre og venstre. Det har også den fordel, at billedet ikke klistres helt op ad kanten tikl venstre.

[Jan]

Rigtig mange tak.

Nu står billeder og tekst pænt ved siden af hinanden. Det er vel nok dejligt, og ikke nok med det. Siden blev også væsentlig mindre, efter jeg slettede alle de overflødige koder. En ekstra sidegevinst er, at nu er kildekoden meget mere overskuelig.

Men jer er jo svær at gøre tilfreds. Filmklippene har jeg rykket til venstre, for at følge stilen. Jeg mangler noget så jeg kan få lavet afstand til venstre. Og teksten står dobbelt så langt til højre som teksten ved billederne. Det undrer mig.

Nu går jeg i gang med at rette mine sider om skibsulykker efter samme opskrift. Uden jeg vil love noget, så tror jeg at det går uden alt for meget piberi.

[Kim Ludvigsen]

Men jer er jo svær at gøre tilfreds. Filmklippene har jeg rykket til venstre, for at følge stilen. Jeg mangler noget så jeg kan få lavet afstand til venstre. Og teksten står dobbelt så langt til højre som teksten ved billederne. Det undrer mig.

Du har angivet en bredde i boksen til klippene, og den er bredere end klippene, derfor den ekstra afstand. Samtidig har du stadig den gamle midterstillingskode liggende i boksen. Boksen startes med:
<div style="margin: auto; width: 425px; float: left;">
Brug i stedet det samme som ved billederne:
<div class="flydestop">

Du skal så have indsat float:left-koden i object-koden:
Sådan:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
skal ændres til:
<object style="float: left;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

Du skal så have lavet afstand på samme måde som ved billederne. Der oprettede du stilen img, her skal du blot oprette stilen object og angive de samme afstande på fanen Boks i css-editoren.

[Jan]

Nu har jeg, vist nok, lavet ændringerne. Det var netop navnet på stilen jeg efterlyste.

Men filmklippene står nu ca. 20px til højre og teksten helt op af klippet. Stilene img og object er nøjagtig ens, så det virker da mærkeligt.

[Kim Ludvigsen]

Jeg forstår det heller ikke. Prøv at angive afstanden for object ud for Indrykning i stedet for Margin.

[Jan]

Det er prøvet. Til min store forbavselse er der nu korrekt afstand til venstre og teksten står også rigtigt.

Der er et par andre ting som også undrer mig. Et par billeder over filmene er der, over og under et billed dobbelt afstand, men koderne er angivet som de andre. Som jeg så tit har skrevet: "KompoZer er en drillepind", hvis det ikke var fordi den er gratis, havde jeg for længst indklaget den for menneske rettigheds kommisionen eller sådan noget.

På en eller anden måde er jeg kommet til at fumle med div boksene. Den øverste halvdel af siden var gul og den nederste var hvid. Fejlen kunne jeg ikke finde selv om jeg ledte ihærdigt så jeg opgav og fjernede et </div> der hvor siden ændrede farve. Så nu har jeg en boks der ikke er afsluttet, men siden ser pæn ud.

Så troede jeg lige at jeg var smart, jeg validerede siden og forventede at validatoren fortalte mig hvor jeg havde dummet mig. Men nej, ingen hjælp at hente. Den er åbenbart ligeglad med hvor jeg afslutter mine bokse.

Men disse småting kan jeg sagtens leve med.

[Jan]

Øv, nu var jeg lige så glad.

Den glæde blev hurtigt til desperation da jeg åbnede siden med IE6. Ikke nok med den viser den gamle forside, min ellers fine traktorside er ganske enkelt skrækkelig.

[Kim Ludvigsen]

Jeg har ikke så meget tid her i weekenden. Jeg har lige måttet bruge nogle timer på at installere en ny harddisk på serveren, fordi den gamle var begyndt at slå knuder, og jeg skal helst nå at opgradere mine AVG-sider i weekenden.

Men jeg ser den nye forside i IE, så det er sikkert fordi, din browser husker den gamle version. Prøv at tvinge en opdatering igennem ved at holde tasten Ctrl (eller Skift) nede, mens du klikker på opdateringsknappen.

Der er lidt problemer med afstandene ved objekterne (flash-filmene), men det må lige vente til i næste uge, hvis du ikke selv finder en løsning.

Der er endnu et afstandsproblem. Jeg har lige tjekket siden i Firefox 3 (RC-udgaven), og her skubbes sidste menupunkt ned på en ny linje. Det virker ellers fint i Firefox 2.

Meld lige tilbage søndag aften/mandag morgen, hvis der stadig er problemer (og hvilke), så kigger jeg på dem til den tid.

[Jan]

Jeg har lige måttet bruge nogle timer på at installere en ny harddisk på serveren, fordi den gamle var begyndt at slå knuder

Det anede mig. I morges var det meget svært at få kontakt til forum. Jeg ville ikke skrive til dig, fordi du skrev et indlæg sent i nat. Så gættede jeg på at du "på sømandssprog" lå underdrejet med en rød rose i bagdelen.

Men jeg ser den nye forside i IE, så det er sikkert fordi, din browser husker den gamle version. Prøv at tvinge en opdatering igennem ved at holde tasten Ctrl (eller Skift) nede, mens du klikker på opdateringsknappen.

Jeg er glad for at du ser den, men tror du ikke det er fordi du anvender IE7. I min IE6 viser den netop også menuen i to linier, som du skrev senere.

Der er lidt problemer med afstandene ved objekterne (flash-filmene), men det må lige vente til i næste uge, hvis du ikke selv finder en løsning.

Det kommer meget bag på mig. Jeg har ikke konstateret problemer med dem. Men derimod problemer med nummer to billed over dem.

Der er endnu et afstandsproblem. Jeg har lige tjekket siden i Firefox 3 (RC-udgaven), og her skubbes sidste menupunkt ned på en ny linje. Det virker ellers fint i Firefox 2.

Åbenbart det samme som jeg oplever med IE6. Egentlig er jeg ligeglad med IE6, for jeg bruger den ikke. Men helt ignorere den syntes jeg ikke jeg kan. Mange af mine besøgende bruger nemlig den browser. Det er nok fordi mine besøg kommer fra gamle fjolser, som jeg.

Meld lige tilbage søndag aften/mandag morgen, hvis der stadig er problemer (og hvilke), så kigger jeg på dem til den tid.

Kim, lad nu være med at stresse. Du har været mere end tålmodig med mig. Specielt set i lyset af, at man ikke kan få lov til at give et økonomisk bidrag til at holde forum og hjørnet i gang.

Men du kan være helt sikker på, at så længe jeg ikke er smidt ud fortsætter jeg med at skrive indlæg. Jeg har faktisk et i ærmet, som jeg ryster ud når jeg har bedre tid.

[Kim Ludvigsen]

I min IE6 viser den netop også menuen i to linier, som du skrev senere.

Problemet er, at de forskellige browsere åbenbart afrunder forskelligt.

Du har angivet bredden på menupunkterne til at være 14.29% (i stilklassen ul.menuliste li). Det giver en samlet bredde på 100,3 procent og eftersom der dermed 0,3 procent mere indhold, end der er plads til, skubbes sidste menupunkt ned på en ny linje. Hvis du ændrer bredden til 14,28%, så skulle menuen gerne kunne være på en enkelt linje.

Der er så åbenbart nogle browserversioner, der nedrunder de 100,3% til 100% og der kan indholdet så godt være på én linje.

[Jan]

I min Firefox vises alle mine sider, som forventet. Jeg kan heller ikke se nogen fejl med afstanden ved filmene, som du tidligere har nævnt.

Men i IE er menuen stadig i to linier, selv om jeg har ændret til 14,28%. Filmen har ikke afstand til venstre. Billedteksten er ikke ombrudt til højre. og under filmen er der et tomt hvidt felt. Det ser helt tovlig ud.

http://janss.dk/derby.html