Jeg har nu siddet og tæsket de samme videoer igennem igen og igen. Uden at det har hjulpet.
Jeg har en side med et Panorama billede i toppen.
Herunder har jeg 4 rækker og 4 kollonder, altså 16 felter. Lavet med div tags
Første kollone består af 4 små billeder.
Anden kollone består af 4 tekstfelter, der hver består af en dato, samt en kort beskrivelse af hvad der skete den dag.
Tredie kollone består så igen af 4 små billeder som i kollone 1.
Fjerde kollone består så igen af 4 tekstfelter som i kollone 2.
Tanken var så, at man ved at klikke på billederne. Linkes til de billeder i stort format, der hører til den pågældende dato.
Men uanset hvad jeg gør, så kan jeg ikke slippe af med den latterlige blå og lilla ramme der kommer når jeg gør billedet til et Link.
Jeg har prøvet med inline CSS. style="border: none;"
Jeg har prøvet med CSS Stylesheet.
a:link {border-style: none;}
a:visited {border-style: none;}
a:hover {border-style: none;}
a:active {border-style: none;}
Både hver for sig og samtidig.
Jeg har prøvet med Image maps. Her slipper jeg godt nok af med de latterlige rammer, men tilgengæld virker linket så ikke.
Jeg har sågar prøvet med en direkte afskrift af koderne i videoen, men heller ikke det gave noget Link.
Det virker som om Browseren er sk... lige glad med "border: none"
Jeg har tjekket koder og stier igen og igen
I får lige nogle koder, men når noget ikke virker, sletter jeg det. Så koderne siger nok ikke så meget.
Håber i kan hjælpe mig videre.
HTML.
Kode: Vælg alt
<!DOCTYPE html>
<HTML lang="da">
<HEAD>
<TITLE></TITLE>
<META charset="utf-8" />
<META name="keywords" content="Færøerne, billeder, turbeskrivelse" />
<META name="description" content="Rejse til Færøerne, sommeren 2012 fortalt i ord og billeder" />
<link rel="stylesheet" href="style.css" type="text/css"/>
</HEAD>
<BODY>
<div id="main">
<div id="top">
<img src="billeder/forside/panorama1.jpg" alt="panorama"/></div>
<div id="left1">
<div id="pic1"><img src="billeder/forside/pic1.jpg" alt="pic1" title="Tindhólmur" usemap="#kort" style="border: none;" /></div>
<div id="txt1"><b>27/6</b>
<p>Tindhólmur, Gásadalur, udsigt til Mykines, Sornfelli, Skællingur, Vágarfjødur, Vestmannasund og Thorshavn.</p>
</div>
</div>
<div id="right1">
<div id="pic5"><img src="billeder/forside/pic5.jpg" alt="pic5" title="Øravig" /></div>
<div id="txt5"><b>1/7</b>
<p>Afrejse fra Thorshavn. Færgetur med Lammerullesteg. Ankomst til huset på Suderoy. Fámijn, fiskeri og Spækhugger spotting.</p>
</div>
</div>
<div id="left2">
<div id="pic2"><img src="billeder/forside/pic2.jpg" alt="pic2" title="Vestmanna"/></div>
<div id="txt2"><b>28/6</b>
<p>Bilskift, Trøllkonufingur, Vestmanna, sejltur, Slættanes og Fuglefjeld.</p>
</div>
</div>
<div id="right2">
<div id="pic6"><img src="billeder/forside/pic6.jpg" alt="pic6" title="Trongisvágur"/></div>
<div id="txt6"><b>2/7</b>
<p>Vandretur fra Hvalbar til Trongisvágur. Senere fiskeri fra "havnen" i Øravik.</p>
</div>
</div>
<div id="left3">
<div id="pic3"><img src="billeder/forside/pic3.jpg" alt="pic3" title="Saksun"/></div>
<div id="txt3"><b>29/6</b>
<p>Køretur til Saksun, Eidi og Gjógv.</p>
</div>
</div>
<div id="right3">
<div id="pic7"><img src="billeder/forside/pic7.jpg" alt="pic7" title="Røðin"/></div>
<div id="txt7"><b>3/7</b>
<p>Nord og syd på Suderoy</p>
</div>
</div>
<div id="left4">
<div id="pic4"><img src="billeder/forside/pic4.jpg" alt="pic4" title="Gamlarætt Færgeleje"/></div>
<div id="txt4"><b>30/6</b>
<p>Vandretur fra Thorshavn til til Kirkjubøur.</p>
<p>Om aftenen til middag hos ? og ? med Skærpekød, tørfisk, hvalspæk og tørret Grindekød til forret. Og hvalbøffer af Vågehval til hovedret.</p>
</div>
</div>
<div id="right4">
<div id="pic8"><img src="billeder/forside/pic8.jpg" alt="pic8" title="Kaldbaksfjødur"/></div>
<div id="txt8"><b>4/7</b>
<p>Skyerne hang lavt, stort set hele dagen.</p>
</div>
</div>
<map name="kort">
<area href="billeder/dag1/1pics01.html" alt="Dag 1 27/6" title="Dag 1 27/6" shape="rect" coords="550,100,590,140" />
</map>
</div>
</BODY>
[code
body {
background-color: #002200;
font-family: Arial,Helvetica,sans-serif;
}
p{
font-size: 12px;
}
a:link {
border-style: none;
}
a:visited {
border-style: none;
}
a:hover {
border-style: none;
}
a:active {
border-style: none;
}
#main{
background-color: #cccccc;
width: 1000px;
height: 700px;
margin-left: auto;
margin-right: auto;
}
#top{
width: 1000px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
/* ------------------------------------------------------------------------ */
#left1{
width: 500px;
height: 125px;
float: left;
}
#pic1{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt1{
width: 304px;
height: 117px;
font-size: 18px;
padding: 3px;
border-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#right1{
width: 500px;
height: 125px;
float: right;
}
#pic5{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt5{
width: 304px;
height: 117px;
font-size: 18px;
padding: 3px;
border-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#left2{
width: 500px;
height: 125px;
float: left;
}
#pic2{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt2{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#right2{
width: 500px;
height: 125px;
float: right;
}
#pic6{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt6{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#left3{
width: 500px;
height: 125px;
float: left;
}
#pic3{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt3{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#right3{
width: 500px;
height: 125px;
float: right;
}
#pic7{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt7{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#left4{
width: 500px;
height: 125px;
float: left;
}
#pic4{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt4{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */
#right4{
width: 500px;
height: 125px;
float: right;
}
#pic8{
width: 188px;
height: 125px;
border: none;
border-style: none;
float: left;
}
#txt8{
width: 304px;
height: 118px;
font-size: 18px;
padding: 3px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-width: 1px;
float: right;
}
/* ------------------------------------------------------------------------ */[/code]
