Ho trovato un altro script javascript che mi interessa (qua), ma che non riesco a utilizzare.
Allora, se il mio css è questo:
codice:
body {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-color: #808080;
font-family: verdana;
font-size: 10 px;
}
td {
font-family: verdana;
font-size: 10 px;
}
.maintable {
width: 727px;
border-right: #FFFFFF solid 2px;
border-left: #FFFFFF solid 2px;
border-top: #FFFFFF solid 2px;
border-bottom: #FFFFFF solid 2px;
margin-top: auto;
}
.navbg {
width: 155px;
height: 274px;
background-image: url(images/index_02.gif);
}
.contentbg {
width: 471px;
height: 274px;
background-image: url(images/index_03.gif);
}
.creditsbg {
width: 727px;
height: 86px;
background-image: url(images/index_06.gif);
}
.spacer {
width: 101px;
height: 305px;
background-repeat: no-repeat;
background-color: #808080;
}
.spacer2 {
background-color: #808080;
width: 101px;
}
#nav {
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
.h2 {
text-align: right;
font-family: georgia;
font-size: 12px;
color: #FFFFFF;
width: 98.5%;
border-bottom: solid 1px #808000;
border-right: #808080 solid 1px;
border-left: #808080 solid 1px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
background-image: url(images/bgtitle.gif);
display: block;
}
.endbox {
border-bottom: solid 0px #808080;
border-right: #808080 solid 1px;
border-left: #808080 solid 1px;
background-image: url(images/bgtitle.gif);
width: 98.5%;
height: 8px;
display: block;
}
.navsubtitle {
border-bottom: solid 1px #4B4B4B;
border-right: #808080 solid 1px;
border-left: #808080 solid 1px;
width: 98.5%;
display: block;
}
#nav a {
text-decoration: none;
display: block;
color: #FFFFFF;
border-bottom: solid 1px #4B4B4B;
border-right: #808080 solid 1px;
border-left: #808080 solid 1px;
width: 98.5%;
}
#nav a:hover {
text-decoration: none;
background-color: #4B4B4B;
color: #6699FF;
border-right: #808080 solid 1px;
border-left: #808080 solid 1px;
width: 98.5%;
}
#content {
padding-left: 18px;
padding-right: 10px;
text-align: justify;
}
h1 {
text-align: center;
font-size: 18px;
color: #FFFFFF;
background-image: url(images/bgtitlec.gif);
}
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #6699FF;
}
e il mio codice html è questo:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="screen, projection" type="text/css" title="default" href="style.css"/>
<link rel="alternate stylesheet" media="screen, projection" type="text/css" title="stile1" href="style1.css"/>
<script type="text/javascript" src="changestyle.js"></script>
</head>
<body>
<div align="center">
<table class="maintable" cellpadding="0" cellspacing="0" summary="menu">
<tr>
<td colspan="3">[img]images/index_01.gif[/img]</td>
</tr>
<tr>
<td rowspan="2" class="navbg" valign="top">
<div id="nav">
<span class="h2">Menu</span> Home
Contatti
Bibliografia</p>
<hr />
Editoria e Editing
Linguaggio editoriale
Figure Professionali
Com'è composto un libro
Norme editoriali</p>
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="contentbg" valign="top">
<div id="content">
... contenuti ...
</td>
<td valign="top" class="spacer"></td>
</tr>
<tr>
<td height="2" class="spacer2"></td>
</tr>
<tr>
<td colspan="3" class="creditsbg"></td>
</tr>
</table>
</div>
</body>
</html>
in quale modo posso applicare questo codice?
Perché cancellare la dimensione del font nel css e poi riscriverla nell'html non funziona ovviamente, perché ho un riferimento preciso al css.
So che sarebbe moooolto più ovvio utilizzare uno style-switcher, ma per una serie di motivi nel mio caso è sconsigliato, quindi ci tenevo a riuscire a utilizzare questo script.
So benissimo che dal browser si può cambiare la dimensione del carattere, ma diciamo che è un sito per nabbi che non se ne intendono (anche se sono sicuramente più nabba io XD).