Bildgröße in div-boxen definieren von Der Martin, 23.06.2007 14:31

Bildgröße in div-boxen definieren

Carlos 23.06.2007 13:01

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>

<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">ÜBER UNS</a></li>
    <li><a href="guestbook.htm">GÄ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">

</style>
</head>
<body bgcolor=#FFFFFF>

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

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

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

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

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

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

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

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

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

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

Schon einmal danke im Vorraus

Beitrag melden

– Informationen zu den Bewertungsregeln

Bildgröße in div-boxen definieren
Detlef G. 23.06.2007 13:43

css
– Informationen zu den Bewertungsregeln
Hallo Carlos

... 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.

Wenn das Bild selbst die Hauptüberschrift sein soll, dann sollte es auch innerhalb von h1 stehen und nicht einsam und verlassen im Quelltext.

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?

Gib die Eigenschaften für genau dieses Bild und nicht für img an.
z.B.:
```
h1 img { /* wenn dieses Bild innerhalb von h1 steht */  
  ...  
}  
```
oder gib dem img eine Id <img id="banner" ... alt="Bildinhalt"> und dann
```
#banner {  
  ...  
}  
```
Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Beitrag melden

–
Informationen zu den Bewertungsregeln
Bildgröße in div-boxen definieren
Der Martin 23.06.2007 14:31

css
– Informationen zu den Bewertungsregeln
Hallo,

Nun habe ich in die Box oben ein Bild eingefügt ...

nein, hast du nicht. Du hast es einfach isoliert im Quellcode stehen.

Jetzt taucht aber das Problem auf, dass die weiteren Bilder auf dieser Seite, alle die gleiche Größe bekommen haben, wie das Bild oben.

Und das wundert dich, wo du doch mit

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

festgelegt hast, dass alle Bilder 88px hoch sein sollen? Wobei noch anzumerken wäre, dass text-align bei einem img-Element ganz bestimmt nicht sinnvoll ist, es _hat_ ja keinen Textinhalt, den man damit ausrichten könnte. Und dass ein Bild noch ein Hintergrundbild haben soll, ergibt auch in den seltensten Fällen einen Sinn.

div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }

Wozu das, wenn dein Dokument nirgends ein h2-Element enthält?

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

Dem Bild fehlt das vorgeschriebene alt-Attribut, sowie Anführungszeichen um die 100%-Angabe für die Breite. Auch der Wert des border-Attributs _sollte_ in Anführungszeichen stehen. Aber warum verwendest du diese Attribute überhaupt? Diese Angaben gehören eigentlich ins Stylesheet.

<div id="Inhalt">
<style type="text/css">

Autsch. Ein style-Block hat innerhalb des body nichts, aber überhaupt nichts verloren! Zumal du hier nur Angaben wiederholst, die du eingangs sowieso schon gemacht hast.

</style>
<style type="text/css">

Und warum noch einen zweiten style-Block aufmachen?

</head>

Fehler: Das head-Element ist schon längst beendet.

<body bgcolor=#FFFFFF>

Fehler: Das body-Element ist schon viel weiter oben geöffnet worden.

<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>

Wozu hier ein Link (a-Element), der eigentlich gar keiner ist, weil das href-Attribut leer ist? Wenn du den Bildertausch eh mit Javascript machst, kannst du diese Eventhandler auch direkt an das img-Objekt binden. Der Link wäre allenfall nachvollziehbar, wenn du den Bildertausch mit CSS und der Pseudoklasse :hover realisieren wolltest und dabei den IE mit bedienen willst.
Abgesehen davon bekommst du einen Namenskonflikt, wenn du mehrere Elemente mit dem gleichen Namen verwendest und sie dann mit der IE-spezifischen Art über das per name-Attribut erzeugte Javascript-Elementobjekt ansprechen willst. In anderen Browsern geht diese Zugriffsmethode ohnehin schief.

<font color=#3366CC face="trebuchet MS,Verdana" size="3">

Wozu das font-Element? Das gehört per CSS geregelt.

<br><br>

Abstände auch.

Generell möchte ich dir einen häufigen Besuch beim HTML-Validator empfehlen, und natürlich das Ausbessern der zahlreichen Fehler, auf die er dich hinweisen wird.

So long,
Martin

--
Zwischen Leber und Milz
passt immer noch'n Pils.
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Carlos: Bildgröße in div-boxen definieren