phänomen zeilenhöhe
Christoph Rey
- html
hallo allerseits
ich habe ein phänomen, nach dessen ursache ich seit nahezu einer woche suche und keine lösung finde.
ich habe ein 17 pt hohes textmenü, in das ich rechts 3 grafische elemente mit rollover effekt einfügen will. das grafische element ist auch genau 17 pt hoch, zudem habe ich diese höhe in html auch noch definiert. wenn ich das ding jedoch implementiere, wird die zeile automatisch höher und zwar um schätzungsweise 2 pt. wenn ich dann das grafische element um 2 pt kleiner (15 pt gross) erstelle dann bleibt zwar die menüzeile in der originalgrösse, dafür habe ich unter dem grafischen element einen ca. 2 pt breiten streifen.
ich habe das ganze vereinfacht und abgekürzt, das sieht wie folgt aus:
<html>
<head>
</head>
<body bgcolor="#646464" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<table border="0" align="left" valign="top" cellpadding="0" cellspacing="0">
<tr>
<td background="./../pictures/background/1_pix_me.gif" width="500" height="17"> </td>
<td> <a href="./be_sm5.html"> <img src="./../pictures/navigation/home_lnk.gif" width="17" height="17" border="0"> </a> </td>
</tr>
</table>
</body>
</html>
wirklich interessant ist, dass, wenn ich in der a href zeile, wo der rollover hinkommt, ebenfalls die td background variante verwende
<td background="./../pictures/navigation/home_lnk.gif" width="17" height="17" border="0"> </td>
dann klappt es, d.h. dann bleibt die menüzeile in der richtigen grösse.
ist das ganze ziemlich strange oder bin ich in einer gewaltigen überlegungsfehler-schleife?
für eure hilfe wäre ich echt dankbar. gruss
christoph
guten morgen,
ist das ganze ziemlich strange oder bin ich in einer gewaltigen überlegungsfehler-schleife?
je nun, ob wir unter "strange" dasselbe versztehen, ist zweifelhaft, aber zu der "Überlegungsfehler-Schleife" würde ich erstmal ein kräftiges "ja" sagen. Es gibt mehrere Dinge dazu:
1. solltest du möglichst auf "pt" verzichten, und stattdessen, wenns denn unbedingt sein muß, Pixel angeben, also "px" (es gibt aber durchaus Konzeptionen, in denen "pt" sinnvoll ist)
2. solltest du dringend deine Seite konsequent auf CSS umstellen ( wie das geht, steht in SELFHTML sowie in mehreren hundert Forumsbeiträgen, die sich im Archiv nachlesen lassen)
3. solltest du unbedingt angeben, welchen Browser du benutzt hast
Grüße aus Berlin
Christoph S.
PS: noch ein Christoph im Forum - wieviele davon gibts denn jetzt? Ich mag mich nicht mit meinem zweiten Vornamen zu Wort melden ...
hallo christoph
sorry, mein fehler war, dass ich zwar px meinte aber aus versehen pt geschrieben habe. das ganze ist in pixel definiert und das ganze ist auch konsequent mit css aufgebaut.
aber wie gesagt habe ich hier eine vereinfachte version des codes geschickt. verhält sich aber genauso wie der code mit css. die problematik mit dem grafischen element und der zeilenhöhe bleibt immer dieselbe.
als browser verwende ich den ie6, neuster stand (alle sp/patches installiert).
also, wenn mir jemand einen tip hat, vielen dank.
gruss aus der schweiz
christoph k.
ps - warte noch 15 jahre, dann wird jeder zweite im forum lucas oder alexander, bzw. laura oder jana ;-)
Hi Christoph,
<td background="./../pictures/navigation/home_lnk.gif" width="17" height="17" border="0"> </td>
du versuchst aber nicht mit width und height hier die größe des hintergrunds zu bestimmen, oder?
Dave
hallo dave
worauf zielt deine frage ab? ich bin nicht sicher, ob ich sie richtig verstehe aber falls ja, dann diese erklärung.
ich habe ganz unbescholten damit begonnen, dass ich eine tabelle in der grösse 950 x 590 px definiert habe. diese habe ich dann horizontal in mehrere zeilen unterteilt und die td's mit dem entsprechenden hintergrund hinterlegt. für diesen hintergrund musste ich ja jeweils definieren, wie hoch die zeile ist. eine dieser zeilen ist die menüzeile, die eben 17 pixel hoch ist. in css habe ich für die schrift genau diese zeilenhöhe definiert. das einzige problem ist, dass ich, sobald ich das grafikelement implementiere, die 17 px autmatisch höher werden, obwohl das grafikelement genau 17 px hoch ist und ich die höhe zusätzlich noch definiere. sicherheitshalber habe ich nachfolgend den originalcode eingefügt.
vielen dank fürs ansehen. gruss
christoph
<table border="0" align="center" width="950" height="590" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" align="left" valign="top" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" background="../pics/bg/1_pix_hg.gif" width="950" height="32"> </td>
</tr>
<tr>
<td colspan="2" background="../pics/hl/headline_lehm.gif" width="950" height="75"> </td>
</tr>
<tr>
<td colspan="2" background="../pics/bg/1_pix_hg.gif" width="950" height="36"> </td>
</tr>
<tr>
<td background="../pics/bg/1_pix_me.gif" width="850" height="17">
<!-- Start Hauptmenü / Untermenü -->
<table border="0" align="left" valign="top" cellpadding="0" cellspacing="0">
<tr>
<td> <a class="selmmenue"> Lehm </a> </td>
<td> <a href="../w2/li.asp" class="mmenue"> Licht </a> </td>
<td> <a href="../w3/ho.asp" class="mmenue"> Holz </a> </td>
<td> <a href="../w4/st.asp" class="mmenue"> Strom </a> </td>
<td background="../pics/1_pix_me.gif" width="11" height="17">
<td> <a href="../w1/ma.asp" class="smenue"> Material </a> </td>
<td> <a href="../w1/ve.asp" class="smenue"> Verarbeitung </a> </td>
<td> <a href="../w1/ra.asp" class="smenue"> Raumklima </a> </td>
</tr>
</table>
<!-- Ende Hauptmenü / Untermenü -->
</td>
<td background="../pics/bg/1_pix_black.gif" width="50" height="17">
<!-- Start FixMenü -->
<table border="0" align="left" valign="top" cellpadding="0" cellspacing="0">
<tr>
<td> <img src="./../pics/navi/home_lnk.gif" width="17" height="17" border="0"> </td>
</tr>
</table>
<!-- Ende Fixmenü -->
</td>
</tr>
<!-- hier befindet sich der effektive inhalt der website -->
</table>
</td>
</tr>
</table>
Hallo,
ich habe ein phänomen, nach dessen ursache ich seit nahezu einer woche suche und keine lösung finde.
ich habe ein 17 pt hohes textmenü, in das ich rechts 3 grafische elemente mit rollover effekt einfügen will. das grafische element ist auch genau 17 pt hoch, zudem habe ich diese höhe in html auch noch definiert. wenn ich das ding jedoch implementiere, wird die zeile automatisch höher und zwar um schätzungsweise 2 pt. wenn ich dann das grafische element um 2 pt kleiner (15 pt gross) erstelle dann bleibt zwar die menüzeile in der originalgrösse, dafür habe ich unter dem grafischen element einen ca. 2 pt breiten streifen.
Das "Phänomen ist dadurch begründet, dass Bilder als Inline-Elemente auf der Text-Grundlinie dargestellt werden.
<img src="http://java.sun.com/j2se/1.3/docs/api/java/awt/doc-files/FontMetrics-1.gif" border="0" alt="">
Der Abstand, den Du siehst, ist die Unterlänge, die für die Buchstaben p g q ... benötigt wird.
Eine Lösung wäre, das Bild als Block-Element darzustellen.
<html>
<head>
</head>
<body>
<table>
<tr>
<td style="border-bottom:1px solid black;"><img src="bild.gif" alt="Bild" style="width:40px; height:40px; border:0 none;">Text mit Unterlängen</td>
</tr>
<tr>
<td style="border-bottom:1px solid black;"><img src="bild.gif" alt="Bild" style="width:40px; height:40px; border:0 none; display:block; float:left;">Text mit Unterlängen</td>
</tr>
</table>
</body>
</html>
viele Grüße
Axel
hallo
also nur zur info - der tip von axel war goldrichtig, nur falls jemand mal für dasselbe problem die lösung sucht.
nochmals vielen dank.
gruss
christoph