Jeg kommer med nogle eksempler:
Første eksempel er som baggrundsbillede, hvor vi kan flytte billedet andre steder hen med background-position.
se
http://xxxxx.dk/lektion/kandu.html
Kode
<html>
<head>
<title>Mit style sheet</title>
<style type="text/css">
body {
border-width: 5pt;
border-color: black;
border-style: solid;
margin-top: 80pt;
margin-left: 80pt;
margin-bottom: 80pt;
margin-right: 80pt;
background-image: url("http://xxxxx.dk/langeben_SDL.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
table {
border-width: 5pt;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div align="center">
<center>
<table>
<tr>
<td align="center">Celle 1</td>
<td align="center">Celle 2</td>
<td align="center">Celle 3</td>
</tr>
<tr>
<td align="center">Celle 4</td>
<td align="center">Celle 5</td>
<td align="center">Celle 6</td>
</tr>
<tr>
<td align="center">Celle 7</td>
<td align="center">Celle 8</td>
<td align="center">Celle 9</td>
</tr>
</table>
</center>
</div>
</body>
</html> |
En anden måde er at placere dem i en celle eller boks:
http://xxxxx.dk/lektion/kandu1.html
Kode
<html>
<head>
<title>Mit style sheet</title>
<style type="text/css">
body {
border-width: 5pt;
border-color: black;
border-style: solid;
margin-top: 80pt;
margin-left: 80pt;
margin-bottom: 80pt;
margin-right: 80pt;
background-image: url("http://xxxxx.dk/langeben_SDL.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
table {
border-width: 5px;
border-color: black;
border-style: solid;
}
img{
position: relative;
text-align: center;
padding: 10px;
background-color: Fuchsia;
border-width: thin;
border-style: dotted;
border-color: #FF00CC;
}
</style>
</head>
<body>
<div align="center">
<center>
<table>
<tr>
<td align="center" width="50%"><img src="http://xxxxx.dk/langeben_SDL.gif" alt="figur i celle">
</td>
<td align="center">Celle 2</td>
<td align="center">Celle 3</td>
</tr>
<tr>
<td align="center">Celle 4</td>
<td align="center">Celle 5</td>
<td align="center">Celle 6</td>
</tr>
<tr>
<td align="center">Celle 7</td>
<td align="center">Celle 8</td>
<td align="center">Celle 9</td>
</tr>
</table>
</center>
</div>
</body>
</html> |
Den tredie måde placerer du billedet hvor du vil:
http://xxxxx.dk/lektion/kandu2.html
Kode
<html>
<head>
<title>Mit style sheet</title>
<style type="text/css">
body {
border-width: 5pt;
border-color: black;
border-style: solid;
margin-top: 80pt;
margin-left: 80pt;
margin-bottom: 80pt;
margin-right: 80pt;
background-image: url("http://xxxxx.dk/langeben_SDL.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
table {
border-width: 5px;
border-color: black;
border-style: solid;
}
img{
position: relative;
text-align: center;
padding: 10px;
background-color: Fuchsia;
border-width: thin;
border-style: dotted;
border-color: #FF00CC;
}
.portrait{
border: thick;
border-bottom-style: outset;
position: absolute;
margin-left: 250px;
margin-top: 500px;
}
</style>
</head>
<body>
<img class="portrait" src="http://xxxxx.dk/langeben_SDL.gif" alt="Figur">
<div align="center">
<center>
<table>
<tr>
<td align="center" width="50%"><img src="http://xxxxx.dk/langeben_SDL.gif" alt="figur i celle">
</td>
<td align="center">Celle 2</td>
<td align="center">Celle 3</td>
</tr>
<tr>
<td align="center">Celle 4</td>
<td align="center">Celle 5</td>
<td align="center">Celle 6</td>
</tr>
<tr>
<td align="center">Celle 7</td>
<td align="center">Celle 8</td>
<td align="center">Celle 9</td>
</tr>
</table>
</center>
</div>
</body>
</html> |
Du kan få mere hjælp her:
http://www.html.dk/tutorials/css/
og et godt program der kan hjælpe er topstyle, du kan få gratis her [det genererer css]
http://www.bradsoft.com/download/