nicht angemeldet
Warum ist TABLE größer als das eingefügte Bild ?
Hi, für diesen unschönen Effekt habe ich bisher keine Erklärung ... Das Bild ist 83 Pixel hoch, unter dem Bild wird jedoch ein einige Pixel breiter Streifen in der Hintergrundfarbe dargestellt. Wie kann ich das vermeiden ?
Gruß,
Andre
.PageHeaderStyle
{
background: #000033;
color: #999999;
margin-top: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
font-family: verdana, arial, sans-serif;
font-style: normal;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
<table class="PageHeaderStyle" height="83" width="100%">
<tbody>
<tr>
<td class="HeaderStyle" width="200" valign="top" align="middle">
<img src="/CSDB/Library/Images/LogoOnBlue.gif" border="0" alt="CSDB"/>
</td>
<td valign="center" align="right">
CSDB
</td>
</tr>
</tbody>
</table>
-
Hi, für diesen unschönen Effekt habe ich bisher keine Erklärung ... Das Bild ist 83 Pixel hoch, unter dem Bild wird jedoch ein einige Pixel breiter Streifen in der Hintergrundfarbe dargestellt. Wie kann ich das vermeiden ?
Liegt möglicherweise daran, daß Bilder normalerweise auf der "Schreibzeile" stehen (mir fällt der richtige Name im Moment nicht ein), nicht am unteren Rand eines Zeilenblocks. Der Abstand, den Du unter Deinem Bild siehst, ist der, mit dem zum Beispiel die Kringel vom g oder j eine Zeile "unterkellern".
Vermeiden kannst Du das, indem Du aus der Grafik ein Blockelement machst: style="display:block".
Gruß,
soenk.e-
Hallo, danke für den Tip. Dies führt leider nicht zum gewünschten Erfolg ... Weitere Ideen ?
Gruß,
Andre-
Hallo, danke für den Tip. Dies führt leider nicht zum gewünschten Erfolg ... Weitere Ideen ?
Nein, aber möglicherweise wirst Du im Forumsarchiv fündig: http://selfsuche.teamone.de/cgi-bin/such.pl?suchausdruck=img+display%3Ablock+td&case=on&feld=alle&index_4=on&hits=100. Das Problem taucht jedenfalls mit schöner Regelmäßigkeit auf :)
Möglicherweise hängt es aber auch gar nicht damit zusammen, sondern betrifft einfach die zeitweise etwas undurchsichtige Art und Weise, wie Browser Tabellen berechnen - da hilft dann nur noch basteln.Vielleicht probierst Du es auch mal ganz anders, schmeißt die dödelige Layout-Tabelle raus und positionierst die Elemente direkt per CSS. Etwa so in dem Dreh:
<style type="text/css">
img#logo
{
float:left;
}
h1
{
font:normal normal normal 16px/83px Verdana,Arial,sans-serif;
padding:0; margin:0;
background-color:#003;
color:#999;
text-align:center;
}
</style></head><body>
<img id="logo" alt="Logo" src="backblue.gif" width=200 height=83>
<h1>CSDB</h1>Blablabla
Eventuell mußt Du Deine Grafik etwas in der Größe nachbearbeiten. Dank float:left wird sie sich links einordnen, die Überschrift <h1> liegt rechts daneben. Die Überschrift liegt zwar wie gewünscht bei 200px von links (bzw. von da aus in der Mitte), aber die Grafik wird nicht mittig in den 200/82 Pixeln liegen wenn sie kleiner als dieser Bereich ist.
Setzt Du die Browser in den Standardmodus (http://www.hut.fi/~hsivonen/doctype.html), bekommst Du mit der CSS-Layoutmethode sehr verlässliche Ergebnisse (aktuelle Browser wie IE6 Netscape 6, Mozilla oder Opera vorausgesetzt, CSS-Standard unter http://www.w3.org/TR/CSS2/).
Davon abgesehen wird HTML-Datei erfreulich ausladend entschlackt, weil die aufwendigen Tabellenkonstrukte wegfallen, und das Dokument ist besser mit Browsern lesbar, die keine oder nur eingeschränkte grafische Darstellung bieten (Textbrowser, Blindenschrift).Man muß sich allerdings auch erstmal in diesen neuen Weg einarbeiten. Zum Thema "Trennung von Inhalt (HTML) und Layout (CSS)" wurde hier im Forum schon häufig diskutiert, bemühe einfach die Suchfunktion.
Gruß,
soenk.e -
Hallo, danke für den Tip. Dies führt leider nicht zum gewünschten Erfolg ... Weitere Ideen ?
Hallo!
Das sollte aber wirklich dein Problem sein. Hast du es ins <img> geschrieben?
<img ... style="display:block;">Tschüs
-
-
-
Hallo Andre,
.PageHeaderStyle
{
background: #000033;-> background-color:...
color: #999999;
sicherheitshalber solltest du vielleicht die Leerzeihen zwieschen 'color:' und '#999999' weglassen (ns4 könnte sonst spinnen), außerdem reicht in dem Fall #999 statt #999999.
margin-top: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;-> margin:0;
text-decoration: none;
seit wann hat eine tabelle ein text-decoration?
}
<td class="HeaderStyle" width="200" valign="top" align="middle">
wie sieht die Klasse "HeaderStyle" aus? in der sollte sowas wie padding:0; und margin:0; stehen.
<img src="/CSDB/Library/Images/LogoOnBlue.gif" border="0" alt="CSDB"/>
mhh... border="0" (->in html4.01 strict nicht mehr drin) und .../> (->gehört zu xhtml) was jetzt? :-)
evtl. musst du dem img auch noch margin:0; verpassen oder einfach mal die Zeilenumbrüche in dem Tabellenfeld rausmachen -> ...<td...><img...></td>...Grüße aus Nürnberg
Tobias-
Hi Tobias und Andre,
background: #000033;
-> background-color:...background ist genauso erlaubt. background faßt mehrere Background-Eigenschaften zusammen (so wie margin die Eigenschaften margin-left, margin-top, margin-bottom und margin-right zusammenfaßt oder border die Eigenschaften border-style, border-width, border-color...). Dabei ist es durchaus zulässig, nicht alle der zusammengefaßten Eigenschaften zu setzen.
margin-top: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
-> margin:0;Hier schlägst Du das Zusammenfassen ja selbst vor...
text-decoration: none;
seit wann hat eine tabelle ein text-decoration?sagt Dir der Wert "inherit" etwas, der bei (fast) allen Properties möglich ist?
<td class="HeaderStyle" width="200" valign="top" align="middle">
align in einer td hat die möglichen Werte left|center|right|justify|char, aber kein middle
<img src="/CSDB/Library/Images/LogoOnBlue.gif" border="0" alt="CSDB"/>
mhh... border="0" (->in html4.01 strict nicht mehr drin) und .../> (->gehört zu xhtml) was jetzt? :-)vielleicht xhtml 1.0 transitional?
<td valign="center" align="right">
valign wiederum kennt den Wert middle (und top|bottom|baseline), aber kein center...
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.-
Hallo Andreas,
-> background-color:...
background ist genauso erlaubt. background faßt mehrere Background-Eigenschaften zusammen [...] Dabei ist es durchaus zulässig, nicht alle der zusammengefaßten Eigenschaften zu setzen.*grumel* natürlich - das weiß ich eigentlich auch... da habe ich jetzt nur nicht dran gedacht - gestern, kam das gleiche, da habe ich dran gedacht :-)
text-decoration: none;
seit wann hat eine tabelle ein text-decoration?
sagt Dir der Wert "inherit" etwas,ehrlichgesagt: nein. *schäm* :-)
der bei (fast) allen Properties möglich ist?
das man das angeben kann ist mir ja klar, nur macht es (imho) wenig Sinn das bei einer Tabelle anzugeben.
<img src="/CSDB/Library/Images/LogoOnBlue.gif" border="0" alt="CSDB"/>
mhh... border="0" (->in html4.01 strict nicht mehr drin) und .../> (->gehört zu xhtml) was jetzt? :-)
vielleicht xhtml 1.0 transitional?damit geht es, ja :-) - ich wage es nur zu bezweifeln, dass Andre diesen doctype drin hat :-)
Grüße aus Nürnberg
Tobias-
Nachtrag:
sagt Dir der Wert "inherit" etwas,
ehrlichgesagt: nein. *schäm* :-)habe es gerade beim Stöbern gefunden: http://www.w3.org/TR/REC-CSS2/cascade.html#value-def-inherit.
d.h. das man dann meinetwegen 'td { text-decoration:inherit; }' schreiben kann, und das die text-decoration dann automatisch 'none' ist (also wie im übergeordneten Element)?Grüße aus Nürnberg
Tobias-
Hi,
sagt Dir der Wert "inherit" etwas,
ehrlichgesagt: nein. *schäm* :-)
habe es gerade beim Stöbern gefunden: http://www.w3.org/TR/REC-CSS2/cascade.html#value-def-inherit.
d.h. das man dann meinetwegen 'td { text-decoration:inherit; }' schreiben kann, und das die text-decoration dann automatisch 'none' ist (also wie im übergeordneten Element)?Wie im übergeordneten Element.
Es wird eben nicht der default-Wert der Eigenschaft benutzt, sondern der Wert, der der Eigenschaft im übergeordneten Element zugeordnet wurde.
(Das kann dort natürlich der default-Wert sein, muß es aber nicht).cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
-
-
-
-