Bjarne AMedlem sedan feb. 2001151 inlägg Hej!
Jag har ett bildgalleri där jag vill ha en ram runt som visar vilka tavlor man klickat på
i FireFox blir det bara som ett U dvs halva vänster ner och halva höger
I Explorer får man samma sak fast då fattas den övre ramen om man lägger det i en tabell
http://www.bjarne.nu/helmutweber/test/
Någon som kan hjälpa mej?
<style type="text/css">
<!--
a.tavla:link { border: 7px solid white;}
a.tavla:visited { border: 7px solid #CCCCCC;}
a.tavla:hover { border: 7px solid #CCFFCC; }
a.tavla:active { border: 7px solid silver;}
-->
</style>
bossseMedlem sedan juni 2003772 inlägg Varför krångla till det med tabeller?
Dessutom är det en del direkta felaktigheter i koden!
Orkar inte kolla den så noga!
Har i stället gjort ett mycket enklare exempel som kanske passar.
Du skriver bl. a.
vill ha en ram runt som visar vilka tavlor man klickat på
Behövs ingen ram då man är kvar på sidan med koden nedan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {background-color:green; color:yellow;}
img {BORDER: 5px solid white}
#bild {width:500px; height:414px; position:absolute;left:350;top:150;BORDER: 0}
#stor {display:none}
-->
</style>
<script type = "text/javascript">
function visaBild(bild)
{document.getElementById('stor').style.display = 'block';
document.getElementById('bild').src=bild; }
</script>
</head>
<body >
Klicka på stora bilden för att stänga den eller klicka på nästa småbild.
<br><br>
<img src="2mini.jpg"; width=120 height=120 onclick="visaBild('2.jpg')">
<img src="3mini.jpg" width=120 height=120 onclick="visaBild('3.jpg')">
<img src="4mini.jpg " width=120 height=120 onclick="visaBild('4.jpg')">
<br><br>
<img src="5mini.jpg"; width=120 height=120 onclick="visaBild('5.jpg')">
<img src="6mini.jpg" width=120 height=120 onclick="visaBild('6.jpg')">
<img src="7mini.jpg " width=120 height=120 onclick="visaBild('7.jpg')">
<br><br>
<img src="8mini.jpg"; width=120 height=120 onclick="visaBild('8.jpg')">
<img src="9mini.jpg" width=120 height=120 onclick="visaBild('9.jpg')">
<img src="10mini.jpg " width=120 height=120 onclick="visaBild('10.jpg')">
<div id="stor">
<img id="bild" onclick="document.getElementById('stor').style.display='none';" >
</div>
</body>
</html>
varför inte gör rätt själv? ;)
<img src="3mini.jpg" width=120 height=120 onclick="visaBild('3.jpg')">
var kommer ; ifrån? och det kan läggas in i en CSS mall det också med höjden och bredden.
bossseMedlem sedan juni 2003772 inlägg Upptäckte också de små ; !
Skulle precis redigera mitt inlägg, när jag såg att du skrivit ett inlägg!
Helt riktigt så kan man lägga in width:120px; height:120px i css-delen för img.
Hade lite brottom när jag skrev inlägget.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {background-color:green; color:yellow;}
img {width:120px; height:120px; border:5px solid white}
#bild {width:500px; height:414px; position:absolute;left:350;top:150;border: 0}
#stor {display:none}
-->
</style>
<script type = "text/javascript">
function visaBild(bild)
{
document.getElementById('stor').style.display = 'block';
document.getElementById('bild').src=bild;
}
</script>
</head>
<body >
Klicka på stora bilden för att stänga den eller klicka på nästa småbild.
<br><br>
<img src="2mini.jpg" onclick="visaBild('2.jpg')">
<img src="3mini.jpg" onclick="visaBild('3.jpg')">
<img src="4mini.jpg" onclick="visaBild('4.jpg')">
<br><br>
<img src="5mini.jpg" onclick="visaBild('5.jpg')">
<img src="6mini.jpg" onclick="visaBild('6.jpg')">
<img src="7mini.jpg" onclick="visaBild('7.jpg')">
<br><br>
<img src="8mini.jpg" onclick="visaBild('8.jpg')">
<img src="9mini.jpg" onclick="visaBild('9.jpg')">
<img src="10mini.jpg" onclick="visaBild('10.jpg')">
<div id="stor">
<img id="bild" onclick="document.getElementById('stor').style.display='none';" >
</div>
</body>
</html>
Bjarne AMedlem sedan feb. 2001151 inlägg Tack för hjälpen.
Men det var den försvunna ramen jag var ute efter.
Då bilderna skall hämtas dynamiskt med hjälp av ASP från en mapp med minibilder som inte är precis samma storlek så behöver jag en tabell för att få bilderna lite snyggt i rader och kolummer
Det kommer att vara många småbilder och antalet varierar
Tanken är att administratören av sidan sedan bara lägger en minibild i en mapp och en stor i en så komme sidan att skapas automatiskt.
Jag vill ha en ram som visar om man har tittat på tavlan i fråga med typ a:visited fast på bilden. FireFox fixar det med bara lägga border="7" på bilden så visar den samma färger som man styrt upp till texten. Men Explorer envisas med att ha standadfärger (blå, lila) så gör den för mej i alla fall.
Nu har jag funderat och skulle jag hälst vilja att man fick en länk på hela cellen och den gick att styra upp med CSS med a:visited a:hover
Skall söka här på WF
Style sheets är kanske felaktigt då det inte funkar som det skall men vad är det för "en del direkta felaktigheter i koden!" som du menar, jag vill ju inte att det skall slippa igenom
för border="" i IE är Länk färgen.. och inte border färgen...
Bjarne AMedlem sedan feb. 2001151 inlägg Byggde om...
<style type="text/css">
<!--
a.tavla{
display : block;
width : 100%;
height : 100%;
}
a.tavla:link{
background : #EAEAEA;
}
a.tavla:visited{
background : #CCFFCC;
}
a.tavla:hover{
background : #FFFFFF;
}
-->
</style>
Och gav bilderna lite space med
vspace="7" hspace="7"
<td align="center" valign="top" width="100" height="100">
<div align="center"><a href="2.jpg" class="tavla">
<img src="2mini.jpg" width="100" height="85" border="0" vspace="7" hspace="7"></a></div></td>
Så nu funkar det både i IE och FF fast jag kan inte kolla Opera Safari mm :OO
gör det hellre med css med margin:7px; på dina img.
