Carlos: Bildgröße in div-boxen definieren

Beitrag lesen

Hallo alle zusammen. Ich habe folgendes Problem. Ich habe eine Website mit CSS Programmiert. Sie ist in drei verschiedene Boxen unterteilt. Einmal oben, dann eine Box links (mit den Links) und eine große Box rechts, in der der Text der Homepage steht. Nun habe ich in die Box oben ein Bild eingefügt und dafür vor die div-Box im Quelltext "img" anstelle von h1 geschrieben und die Größe des Bildes definiert. Jetzt taucht aber das Problem auf, dass die weiteren Bilder auf dieser Seite, alle die gleiche Größe bekommen haben, wie das Bild oben. Was kann ich also tun, damit die anderen Bilder wieder ihre eigene Größe bekommen?
Hier mein Quelltext:

<html>
<head>
<title>Titel</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em;
  }

img {
    margin: 0 0 0.7em; padding: 0em;
    height: 88px;
    text-align: left;
    background-image:url(rest/pictures/main.png);
    border: 1px dashed silver;
  }

ul#Navigation {
    font-size: 0.83em;
    float: left; width: 10em;
    margin: 0 0 1.2em; padding: 0;
    background-image:url(pictures/main.png);
    border: 1px dashed silver;
    height: 410px;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.3em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: #3366CC; background-image:url(pictures/main.png); text-decoration:none
  }
  ul#Navigation a:visited {
    color: #3366CC; background-image:url(pictures/main.png); text-decoration:none
  }
  ul#Navigation a:hover {
    color: #FEA100; background-color: white; text-decoration:none
  }
  ul#Navigation a:active {
    color: #3366CC; background-image:url(pictures/main.png); text-decoration:none
  }

div#Inhalt {
    margin: 0 0em 1em 10em;
    padding: 0 0em;
    border: 1px dashed silver;
    background-color: #F5F5DC;
  }
  * html div#Inhalt {
    height: 1em;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
</style>
</head>
<body>

<img src="pictures/banner.png" width=100% border=0>

<ul id="Navigation">
    <li><a href="home.htm">HOME</a></li>
    <li><a href="pictures.htm">FOTOS</a></li>
    <li><a href="news.htm">NEWS</a></li>
    <li><a href="we.htm">&Uuml;BER UNS</a></li>
    <li><a href="guestbook.htm">G&#196;STEBUCH</a></li>
  </ul>

<div id="Inhalt">
<style type="text/css">
 a:link {color:#3366CC; text-decoration:underline}
 a:visited {color:#3366CC; text-decoration:underline}
 a:active {color:#3366CC; text-decoration:underline}
 a:hover {color:white; text-decoration:none}
 TD {font-family: verdana;}

</style>
<style type="text/css">
<!--
body { min-width:350px; background-color:#FFFFFF; }
h3 { margin-left:auto; margin-right:auto; text-align:right; width:350px;}
p { margin-left:auto; margin-right:0; text-align:justify; width:100%; border:none; margin: 0 0em 0em 0em; padding: 0 0em;}
table { margin-left:auto; margin-right:auto; background-image: url(pictures/main.png);
border: solid 1px black; }
td { border:0; }
-->
</style>
</head>
<body bgcolor=#FFFFFF>

<table border=0>
 <tr>
  <td>
<a href=""

onmouseover="austausch1.src='pictures/01.jpg';"
onmouseout="austausch1.src='pictures/02.jpg';">

<img src="pictures/02.jpg"
border="0" width="300"
name="austausch1">
</a>
  </td>
  <td>
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Text
</font>
<br><br>
  </td>
 </tr>
</table>

<table border=0>
 <tr>
  <td>
<a href=""

onmouseover="austausch1.src='pictures/03.jpg';"
onmouseout="austausch1.src='pictures/04.jpg';">

<img src="pictures/04.jpg"
border="0" width="300"
name="austausch1">
</a>
  </td>
  <td>
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Text
</font>
<br><br>
  </td>
 </tr>
</table>

<table border=0>
 <tr>
  <td>
<a href=""

onmouseover="austausch1.src='pictures/05.jpg';"
onmouseout="austausch1.src='pictures/06.jpg';">

<img src="pictures/06.jpg"
border="0" width="300"
name="austausch1">
</a>
  </td>
  <td>
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Text
</font>
<br><br>
  </td>
 </tr>
</table>

<table border=0>
 <tr>
  <td>
<a href=""

onmouseover="austausch1.src='pictures/07.jpg';"
onmouseout="austausch1.src='pictures/08.jpg';">

<img src="pictures/08.jpg"
border="0" width="300"
name="austausch1">
</a>
  </td>
  <td>
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Text
</font>
<br><br>
  </td>
 </tr>
</table>

<table border=0>
 <tr>
  <td>
<a href="06.htm"

onmouseover="austausch1.src='pictures/09.jpg';"
onmouseout="austausch1.src='pictures/10.jpg';">

<img src="pictures/10.jpg"
border="0" width="300"
name="austausch1">
</a>
  </td>
  <td>
<font color=#3366CC face="trebuchet MS,Verdana" size="3">
Text
</font>
<br><br>
  </td>
 </tr>
</table>
<p>
</font>
  </div>
</body>
</html>

Schon einmal danke im Vorraus