billedtekst

[flemmings]

Hvordan laver man mon en ganske enkel billedtekst under et billede? Billedet er i forvejen omgivet af tekst, så billedteksten skal på en eller anden måde skille sig ud. med venlig hilsen Flemming

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729)

[Kim Ludvigsen]

Ved at smide billedet ind i en div-boks. Det kan være lidt svært at gøre det korrekt i den normale redigeringstilstand, så gør i stedet nedenstående. Bemærk, at du kan have benyttet en speciel fremgangsmåde på din side, der vil bevirke, at dette ikke vil virke. Så gem en kopi af siden, før du ændrer noget. Og hvis det ikke virker, må du lige vende tilbage med et link til en prøveside, så vi kan se, hvordan den er lavet.

Åbn siden i KompoZer. Marker billedet, og klik på fanen Kildekodevisning. Du skulle nu gerne have markeret koden for billedet. Hvis den ikke er markeret, må du lige finde koden <img src="billednavn.jpg" ...>. Du skal nu tilføje kode til div-boks og billedtekst - det færdige resultat:

<div style="width:Ypx; float:right"><img src="billednavn.jpg" ...><p>Udskift denne tekst med billedteksten</p></div>

Du skal udskifte Y med bredden på billedet, så du fx får 200px. right placerer billedet til højre på siden, hvis det skal placeres til venstre, skal du i stedet skrive left.

[flemmings]

Min billedkode ser lidt anderledes ud. Her er den med lidt af brødteksten før og efter billedet:

...falede
baronessen.</p>
<p><img
style="border: 1px solid ; margin-bottom: 10px; margin-right: 15px; width: 175px; height: 251px; float: left;"
alt="" src="blixena.jpg"> Jeg fjernede blækklatten
med mine...

Spørgsmålet er så, hvordan jeg lægger en billedtekst ind under billedet, så den adskiller sig fra brødteksten?

mvh.
Flemming

[Kim Ludvigsen]

<div style="width:175px; float:right"><img
style="border: 1px solid ; margin-bottom: 10px; margin-right: 15px; width: 175px; height: 251px; float: left;"
alt="" src="blixena.jpg"><p>Her skal billedteksten være</p></div>

Hvis billedteksten skal tættere på billedet, skal du ændre:
margin-bottom: 10px
fx til:
margin-bottom: 5px

[flemmings]

Det ser ikke helt rigtigt ud, men næsten. Problemet er, at billedet og brødteksten ligger helt op ad hinanden, og at brødteksten ikke længere er højre- og venstre-centreret.

Her er min samlede kode for sidens indhold, som det ser ud, FØR jeg prøver at indsætte en billedtekst. Kan du se, hvad der skal føjes til for at få en billedtekst undet det venstre-stillede billede?:


<p>I fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh dssfgsd
sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.</p>
<p>– Kodsm sdhsdhftdh ra ks, sgtsdfå der.</p>
<p> NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger.</p>
<p> – Vas NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger..</p>
<p><img
style="border: 1px solid ; margin-bottom: 10px; margin-right: 15px; width: 175px; height: 251px; float: left;"
alt="" src="blixena.jpg"> Je NårI fexcb dg dgdhgd gsd
dfhdhdfh dhdfhdf hdfhd dfhdfh dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg
sdgsdgsd g.llehdfhfi &nbsp;hnger.g NårI fexcb dg dgdhgd gsd
dfhdhdfh dhdfhdf hdfhd dfhdfh dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg
sdgsdgsd g.llehdfhfi &nbsp;hnger..</p>
<p> D NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger. NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger. NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger. NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger. NårI fexcb dg dgdhgd gsd dfhdhdfh dhdfhdf hdfhd dfhdfh
dssfgsd sdgdsg sdgsdgsdgs sdg sdg sdg sdgsdgsd g.llehdfhfi
&nbsp;hnger.</p>
<p>sdfgaddf dfhgdahadfh dfhdfh adfhdhdf dfhdfhdf dfhadfh
dfhdafhdafh dfhdafhdfh hdafhdfh adfhdafahf dfhdfhdfhdfhfhfh
dfhfhfhdfhfhdfahhjdfjafjsa fsjjfs sjsfjsf sfjjjfjfjjjg dfhdfhdfh </p>


mvh.
Flemming

[Kim Ludvigsen]

Har du mulighed for at lægge en prøveside op i stedet? Der kan være ting, der har betydning, og som ikke er med i den kode, du bringer her. Desuden er det meget nemmere at prøve at tilrette på en side på nettet.

[flemmings]

Jeg har endnu ikke lagt siden op, men sender dig en kopi af den. Tak for hjælpen. mvh. Flemming

[Kim Ludvigsen]

Du skal ikke sende mig en kopi. Læg i stedet siden ud på nettet, giv den evt. et navn som test.html, så den ikke findes af uvedkommende. Du kan slette siden igen bagefter.

[flemmings]

OK - det gør jeg
hilsen
Flemming

[flemmings]

Nu ligger den ufærdige side (uden billedtekster) på http://www.mardi.dk

hilsen
Flemming

[Kim Ludvigsen]

Vil du have billedtekst på tegningen nederst på forsiden, eller er der tale om en anden side?

[flemmings]

Nej det er underliggende billedtekster til billederne på http://mardi.dk/blixen.html jeg gerne vil have.

Altså hvordan ændrer jeg koden for et billede på den side, så der kan skrives en underliggende billedtekst?

hilsen
Flemming

[Kim Ludvigsen]

Sådan gør du med det første billede på siden:

Find koden:
<p><img style="border: 1px solid ; margin-bottom: 10px; margin-right: 15px; width: 175px; height: 251px; float: left;" alt="" src="blixena.jpg">

Slet den og indsæt i stedet denne kode:
<div style="width:175px; float:left; margin-right:15px;"><img style="border: 1px solid ; margin-bottom: 10px; margin-right: 15px; width: 175px; height: 251px; float: left;" alt="" src="blixena.jpg">
<p>Billedtekst</p></div><p>

Bemærk, at <p> foran selve billedkoden er flyttet om efter den indsatte kode.

Husk at udskifte style="width:175px; med bredden på det billede, du pakker ind. Og som tidligere nævnt, hvis du vil have billedteksten tættere på billedet, skal du ændre margin-bottom: 10px; fx til margin-bottom: 5px;

[flemmings]

Tak skal du have - nu er den lige ved at være der bortset fra at billedet ligger helt ud mod venstre kant. Det kan jeg godt rette, men boksen til underteksten bliver liggende ud mod den venstre kant, hvis jeg flytter billedet lidt til højre.

Og noget underligt: går jeg ind i fanen web-visning, glider billedet op i brødteksten over billedet.

Men det er ved at være tæt på det perfekte.

hilsen igen

Flemming

[Kim Ludvigsen]

Find denne kode:
<div style="width:175px; float:left; margin-right:15px;">

Tilføj kode til at give afstand:
margin-left:10px;
Så resultatet bliver dette:
<div style="width:175px; float:left; margin-right:15px; margin-left:10px;">

Du kan selvfølgelig sagtens vælge en anden afstand ved at vælge en anden værdi end 10px.

Med hensyn til fejlen i webvisning, så prøv at uploade den rettede side, og tjek så om fejlen også er der i browseren. Tjek både i Firefox og Internet Explorer.

[flemmings]

Tusind tak skal du have. Nu lykkedes det.

Det må være en fejl i webvisning, for i IE8 ser det rigtigt ud. Firefox har jeg ikke, men siden kan uden problemer valideres, så det er sikkert OK.

med venlig hilsen

Flemming

[Kim Ludvigsen]

Det må være en fejl i webvisning, for i IE8 ser det rigtigt ud. Firefox har jeg ikke, men siden kan uden problemer valideres, så det er sikkert OK.

Webvisningen i KompoZer bygger, så vidt jeg husker, på Firefox 1.0, så det er ikke utænkeligt, at der er fejl i den. Det bliver meget bedre, når næste version af KompoZer udkommer.

Når du laver hjemmesider, vil det være en rigtig god ide at have Firefox installeret. Dels så du kan tjekke, hvordan det ser ud for op mod 20 procent af de besøgende, og dels fordi Firefox med udvidelsen Web Developer er rigtig god til fejlfinding og til at finde løsninger.

Jeg bruger Firefox og Web Developer, når jeg prøver at hjælpe med problemer som dit. Jeg kan hente hjemmesiden ind i Firefox og så prøve at ændre i html-koden eller css-koden direkte i Firefox, og dermed finde en løsning der virker.

[flemmings]

Ja, det er nok en god idé, at jeg installerer Firefox, men billedet ryger kun ind i teksten i KompoZers egen webvisnings-fane. Og kun ca. hver anden gang. Så det må være en svaghed i KompoZer.

hilsen igen
Flemming

[flemmings]

Hej Kim

Du har før hjulpet mig med en billedtekst for et venstrestillet billede. Nu har jeg et centreret billede, men det vil ikke lykkes at lave en billedtekst under billedet. Det drejer sig om det nederste billede på siden:
http://mardi.dk/kierkegaard.html
billedkoden er:

<img style="width: 192px; height: 395px;" alt="" src="piedestal.jpg">

Men hvordan får jeg koden ændret, så der indgår en understillet billedtekst?

Jeg bruger stadig IE8 som browser.

med venlig hilsen
Flemming

[Kim Ludvigsen]

Du åbner siden i kildekodevisning i KompoZer, og finder denne kode:

<img style="width: 192px; height: 395px;" alt="" src="piedestal.jpg">

Du tilføjer så lidt kode, så du får dette resultat:

<div style="width:192px">
<img style="width: 192px; height: 395px;" alt="" src="piedestal.jpg">
<p>Her skriver du billedteksten.</p>
</div>

Koden placerer en boks rundt om billedet, og boksens bredde sættes til at være det samme som billedets bredde. Når billedteksten nu skrives inde i boksen, får den samme bredde som billedet.

Du kan bruge samme fremgangsmåde til billedet højere oppe på siden, altså: Lav en boks omkring billedets kode, og angiv bredden til den samme som billedets bredde.

[flemmings]

Tak skal du have, men billedet med billedteksten bliver venstrecentreret - det hele skulle være midterstillet. Hvad skal der mon føjes til i koden?
hilsen
Flemming

[Kim Ludvigsen]

<div style="width:192px; text-align:center">
<img style="width: 192px; height: 395px;" alt="" src="piedestal.jpg">
<p>Her skriver du billedteksten.</p>
</div>

[flemmings]

Mystisk! billedet og billedteksten er stadig venstrestillet. Jeg har renset helt for den oprindelige billedkode og sat den foreslåede ind i stedet for. Uden held.
hilsen
Flemming

[Kim Ludvigsen]

Når du har uploaded den ændrede side, så giv os et link direkte til siden.

[flemmings]

Her ligger siden med det nederste billede venstrestillet. Det skal som sagt centreres. Men hvor er kodefejlen:
http://mardi.dk/kierkegaard.html

hilsen
Flemming

[Kim Ludvigsen]

Hos mig er billedet midterstillet, og teksten ligeså. Firefox 3.5.

Du har ikke brugt den kode, jeg gav dig.

[flemmings]

Jo, denne her:

<div style="width: 192px; text-align: center;">
<img style="width: 192px; height: 395px;" alt="" src="piedestal.jpg">
<p>korrigeres snarest</p>

hilsen
Flemming

[Kim Ludvigsen]

Ja, nu er den.

Som du kan se, er teksten centreret, og det var reelt det, du bad om i første omgang. Normalt burde boksen arve centreringen fra den ovenstående, men der må så være noget andet, der går ind og påvirker dette (jeg er for doven til at tjekke, hvad det er - og jeg kunne ikke se det før, fordi den nye kode ikke var der).

Hvis du tilføjer lidt kode i div'en, skulle boksen med billedet blive centreret:
<div style="width: 192px; text-align: center; margin-left: auto; margin-right: auto;">

[flemmings]

Ja med den tilføjelse i div'en er skabet på plads. Tak for hjælpen. hilsen igen