ungenaue tabelle...

janomerico · 12. Juni 2003

Hallo Leute,

Also zuerst funktionierte noch alles, aber nachdem ich den Code übersichtlicher machte, war einiges ein bisschen verschoben, obwohl ich nichts am eigentlichen Code geändert habe. Bitte helft mir!

Also hier ist mal der Link zu meiner Seite:

Ohne Tabellen-Rahmen

Und hier nochmal mit Tabellen-Rahmen, damit man es besser sieht..

PS: Wenn ihr euch fragt, wieso einiges gross und anderes wieder klein geschrieben ist (im Quelltext): Ich hab das mit Photoshop gemacht, und Änderungen von mir habe ich halt klein geschrieben. Und wenn ich schon davon erzähle, kennt ihr ein Programm dass alle Grossbuchstaben in Kleinbuchstaben verwandelt? Wenn das hier verboten ist, dann tut es mir natürlich Leid!

Danke.

MfG
janomerico

Budda · 12. Juni 2003

Nabend ...

Warum sich das verscheib weiß ich nicht, habe grad eine keine Zeit im Code nach potentiellen Fehlern zu suchen, aber für solche Feinabstimmungen sind spacer eigentlich immer ziemlich sinnvoll

ciaom Budda

janomerico · 12. Juni 2003

Guten Abend,

Hmm...Was sind denn Spacer?

Budda · 12. Juni 2003

Ein Spacer ist ein transparentes Gif mit 1x1px ... das kann man dann so groß ziehen wie man es braucht und so können dann kleine "Differenzen" bereinigt werden.

janomerico · 12. Juni 2003

Hmm...Aber ich will einfach mal wissen, wieso es denn jetzt anders ist. kann es vielleicht daran liegen, dass ich, wo z.B.
<img src"..."></td>
stand, das so geändert habe:
<img src"...">

</td>

Also mit einer Leerzeile dazwischen?

Andreas Gaisbauer · 12. Juni 2003

Nein, daran kanns eigentlich nicht liegen... Hast du vielleicht die alte Datei noch vorliegen? Wenn ja, dann lad sie doch bitte auch mal hoch, oder hänge sie an deinen Post an - würds mir dann später heute N8 noch anschauen...

ciao

Tim C. · 12. Juni 2003

Also du packst die Bilder in die <td>'s. Wenn du allerdings nirgendwo definiert hast, dass die Ausrichtung innerhalb dieser <td> auf top steht, wird der Inhalt in dieser zelle vertikal immer mittig angeordnet.

Also änder mal

Code:

<TD ROWSPAN="3" width="150" height="265">
   <IMG SRC="dorfauswahl_01.jpg" WIDTH="150" HEIGHT="265">
</TD>

in

Code:

<TD ROWSPAN="3" style="width:150px; height: 265px; vertical-align: top;">
   <IMG SRC="dorfauswahl_01.jpg" WIDTH="150" HEIGHT="265">
</TD>

Den ganzen Kram, wie ich, über CSS zu lösen, ist zwar im Moment noch Geschmackssache, aber im Rahmen von XHTML oder sogar schon bei HTML 4.01 (weiss ich nicht mehr genau ab wo das war), soll man eh, alles was geht via CSS lösen.
Wenn du eine Lösung ohne CSS willst, dann verwendet statt style="vertical-align: top;" das HTML-Attribut valign="top".

janomerico · 12. Juni 2003

leuchte, ich habs versucht, aber dann war die linie nur oben richtig, unten aber nicht. Aber wenn du dir die Datei mit Border anschaust, dann siehst du, dass es dazwischen manchmal freiräume hat, nur wieso? eigentlich müsste es ein schönes Rechteck geben...

Hier ist der Link zu einer älteren Version, die noch ganz gut klappt. Aber die ist eben leider noch nicht vollständig

und an den Zeilenumbrüchen bei den <TD>'s kanns wohl doch nicht liegen (siehe datei mit zeilenumbrüchen

crono, hier noch der Code der älteren version:

PHP:

<HTML>
<HEAD>
<TITLE>dorfauswahl</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
function aendern() {
 document.getElementById("zuaendern").style.display = "none";
 

}
//-->
</script>


</HEAD>
<BODY BGCOLOR=#E6E6E6 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (dorfauswahl.psd) -->
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
	<TR>
		<TD ROWSPAN=3>
			<IMG SRC="dorfauswahl_01.jpg" WIDTH=150 HEIGHT=265 ALT=""></TD>
		<TD>
			<map name="FPMap1">
            <area href="verweis_konoha" shape="rect" coords="1, 0, 47, 25">
            <area href="verweis_kiri" shape="rect" coords="112, 0, 144, 25">
            <area href="verweis_kumo" shape="rect" coords="213, 0, 254, 25">
            <area href="verweis_iwa" shape="rect" coords="326, 0, 352, 25">
            <area href="verweis_suna" shape="rect" coords="427, 0, 459, 25">
            </map>
			<IMG SRC="dorfauswahl_02.gif" WIDTH=460 HEIGHT=26 ALT="" usemap="#FPMap1" border="0"></TD>
		<TD ROWSPAN=3>
			<IMG SRC="dorfauswahl_03.jpg" WIDTH=150 HEIGHT=265 ALT=""></TD>
	</TR>
	<TR>
		<TD>
	
<div style="display:inline;" id="zuaendern">
	    		<map name="FPMap0">
            <area href="javascript:aendern()" shape="polygon" coords="38, 91, 58, 91, 86, 90, 97, 104, 124, 106, 152, 97, 163, 74, 174, 42, 156, 43, 145, 35, 152, 7, 40, 7">
            <area href="verweis_suna" shape="polygon" coords="39, 204, 160, 203, 162, 194, 155, 187, 160, 162, 144, 137, 95, 117, 80, 104, 40, 120">
            <area href="verweis_konoha" shape="polygon" coords="239, 205, 258, 176, 207, 174, 191, 193, 184, 152, 160, 135, 165, 122, 161, 106, 168, 94, 194, 95, 202, 94, 234, 95, 240, 106, 254, 109, 266, 127, 263, 164, 274, 171, 276, 184, 265, 204">
            <area href="verweis_kiri" shape="polygon" coords="349, 159, 360, 165, 374, 165, 382, 148, 373, 131, 356, 133, 349, 154">
            <area href="verweis_kumo" shape="polygon" coords="258, 66, 266, 78, 310, 78, 343, 66, 355, 67, 364, 38, 364, 9, 302, 9, 290, 28">
            <area href="verweis_oto" shape="polygon" coords="227, 92, 224, 84, 227, 76, 240, 77, 252, 89, 259, 103, 274, 110, 282, 109, 276, 127, 230, 91">
            <area href="verweis_regen" shape="polygon" coords="128, 128, 135, 116, 127, 105, 144, 102, 144, 114, 153, 118, 161, 118, 158, 130, 147, 133, 131, 126, 131, 127">
            <area href="verweis_m" shape="polygon" coords="144, 110, 162, 81, 163, 92, 157, 112, 150, 118">
            <area href="verweis_pfeil" shape="polygon" coords="170, 57, 189, 57, 187, 91, 167, 93, 164, 81, 173, 56, 173, 57">
            </map>
			<IMG SRC="dorfauswahl_04.gif" WIDTH=460 HEIGHT=213 ALT="" usemap="#FPMap0" border="0"></div></TD>
	</TR>
	<TR>
		<TD>
			<map name="FPMap2">
            <area href="verweis_oto" shape="rect" coords="0, 0, 30, 25">
            <area href="verweis_ame" shape="rect" coords="141, 0, 176, 25">
            <area href="verweis_kusa" shape="rect" coords="282, 0, 325, 25">
            <area href="verweis_taki" shape="rect" coords="432, 0, 459, 25">
            </map>
			<IMG SRC="dorfauswahl_05.gif" WIDTH=460 HEIGHT=26 ALT="" usemap="#FPMap2" border="0"></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

janomerico · 12. Juni 2003

und hier der fehlerhafte Code, weswegen auch immer:

PHP:

<HTML>

<HEAD>

<TITLE>dorfauswahl</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
function aendern(y) {
document.getElementById("dorfauswahl_konoha_div").style.display = "none";
document.getElementById("dorfauswahl_suna_div").style.display = "none";
document.getElementById("dorfauswahl_kiri_div").style.display = "none";
document.getElementById("dorfauswahl_div").style.display = "none";
document.getElementById(y).style.display = "inline";
}
//-->
</script>

</HEAD>

<BODY BGCOLOR="#E6E6E6" text="#FFFFFF">

<TABLE WIDTH="760" height="265" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="center">
 <TR>

  <TD ROWSPAN="3" width="150" height="265">
   <IMG SRC="dorfauswahl_01.jpg" WIDTH="150" HEIGHT="265">
  </TD>

  <TD width="460" height="26">

   <map name="navi_oben_dorfauswahl">
    <area href="javascript:aendern('dorfauswahl_konoha_div')" shape="rect" coords="1, 0, 47, 25">
    <area href="javascript:aendern('dorfauswahl_kiri_div')" shape="rect" coords="112, 0, 144, 25">
    <area href="javascript:aendern('dorfauswahl_kumo_div')" shape="rect" coords="213, 0, 254, 25">
    <area href="javascript:aendern('dorfauswahl_iwa_div')" shape="rect" coords="326, 0, 352, 25">
    <area href="javascript:aendern('dorfauswahl_suna_div')" shape="rect" coords="427, 0, 459, 25">
   </map>

   <IMG SRC="dorfauswahl_02.gif" WIDTH="460" HEIGHT="26" usemap="#navi_oben_dorfauswahl" border="0">

  </TD>

  <TD ROWSPAN="3" width="150" height="265">

   <IMG SRC="dorfauswahl_03.jpg" WIDTH="150" HEIGHT="265">

  </TD>

 </TR>
 <TR>

  <TD width="460" height="213">

   <div style="display:inline;" id="dorfauswahl_div">

    <map name="dorfauswahl">
     <area href="javascript:aendern('dorfauswahl_iwa_div')" shape="polygon" coords="38, 91, 58, 91, 86, 90, 97, 104, 124, 106, 152, 97, 163, 74, 174, 42, 156, 43, 145, 35, 152, 7, 40, 7">
     <area href="javascript:aendern('dorfauswahl_suna_div')" shape="polygon" coords="39, 204, 160, 203, 162, 194, 155, 187, 160, 162, 144, 137, 95, 117, 80, 104, 40, 120">
     <area href="javascript:aendern('dorfauswahl_konoha_div')" shape="polygon" coords="239, 205, 258, 176, 207, 174, 191, 193, 184, 152, 160, 135, 165, 122, 161, 106, 168, 94, 194, 95, 202, 94, 234, 95, 240, 106, 254, 109, 266, 127, 263, 164, 274, 171, 276, 184, 265, 204">
     <area href="javascript:aendern('dorfauswahl_kiri_div')" shape="polygon" coords="349, 159, 360, 165, 374, 165, 382, 148, 373, 131, 356, 133, 349, 154">
     <area href="javascript:aendern('dorfauswahl_kumo_div')" shape="polygon" coords="258, 66, 266, 78, 310, 78, 343, 66, 355, 67, 364, 38, 364, 9, 302, 9, 290, 28">
     <area href="javascript:aendern('dorfauswahl_oto_div')" shape="polygon" coords="227, 92, 224, 84, 227, 76, 240, 77, 252, 89, 259, 103, 274, 110, 282, 109, 276, 127, 230, 91">
     <area href="javascript:aendern('dorfauswahl_ame_div')" shape="polygon" coords="128, 128, 135, 116, 127, 105, 144, 102, 144, 114, 153, 118, 161, 118, 158, 130, 147, 133, 131, 126, 131, 127">
     <area href="javascript:aendern('dorfauswahl_kusa_div')" shape="polygon" coords="144, 110, 162, 81, 163, 92, 157, 112, 150, 118">
     <area href="javascript:aendern('dorfauswahl_taki_div')" shape="polygon" coords="170, 57, 189, 57, 187, 91, 167, 93, 164, 81, 173, 56, 173, 57">
    </map>

    <IMG SRC="dorfauswahl_04.gif" WIDTH="460" HEIGHT="213" usemap="#dorfauswahl" border="0">

   </div>

   <div style="display:none;" id="dorfauswahl_konoha_div">

    <map name="dorfauswahl_konoha_map">
     <area href="verweis_konoha_clans" shape="rect" coords="103, 149, 145, 168">
     <area href="verweis_konoha_techniken" shape="rect" coords="42, 111, 109, 134">
     <area href="verweis_konoha_charaktere" shape="rect" coords="65, 79, 133, 99">
     <area href="verweis_konoha_grundinfos" shape="rect" coords="21, 43, 93, 64">
     <area href="verweis_konoha_gruppen" shape="rect" coords="353, 65, 407, 84">
     <area href="verweis_konoha_kleidung" shape="rect" coords="324, 103, 443, 125">
    </map>

    <img border="0" src="dorfauswahl_konoha_04.gif" usemap="#dorfauswahl_konoha_map" width="460" height="213">

   </div>

   <div style="display:none;" id="dorfauswahl_suna_div">

    <map name="dorfauswahl_suna_map">
     <area href="verweis_suna_kleidung" shape="rect" coords="248, 150, 365, 172">
     <area href="verweis_suna_gruppen" shape="rect" coords="276, 106, 338, 127">
     <area href="verweis_suna_techniken" shape="rect" coords="271, 24, 334, 42">
     <area href="verweis_suna_charaktere" shape="rect" coords="152, 22, 218, 40">
     <area href="verweis_suna_grundinfos" shape="rect" coords="29, 23, 100, 42">
    </map>

    <img border="0" src="dorfauswahl_suna_04.gif" usemap="#dorfauswahl_suna_map" width="460" height="213">

   </div>

   <div style="display:none;" id="dorfauswahl_kiri_div">

    <map name="dorfauswahl_kiri_map">
     <area href="verweis_kiri_techniken" shape="rect" coords="260, 73, 322, 93">
     <area href="verweis_kiri_kleidung" shape="rect" coords="259, 109, 375, 130">
     <area href="verweis_kiri_charaktere" shape="rect" coords="135, 110, 202, 130">
     <area href="verweis_kiri_grundinfos" shape="rect" coords="136, 67, 203, 92">
    </map>

    <img border="0" src="dorfauswahl_kiri_04.gif" usemap="#dorfauswahl_kiri_map" width="460" height="213">

   </div>

  </TD>

 </TR>
 <TR>

  <TD width="460" height="26">

   <map name="navi_unten_dorfauswahl">
    <area href="javascript:aendern('dorfauswahl_oto_div')" shape="rect" coords="0, 0, 30, 25">
    <area href="javascript:aendern('dorfauswahl_ame_div')" shape="rect" coords="141, 0, 176, 25">
    <area href="javascript:aendern('dorfauswahl_kusa_div')" shape="rect" coords="282, 0, 325, 25">
    <area href="javascript:aendern('dorfauswahl_taki_div')" shape="rect" coords="432, 0, 459, 25">
   </map>

   <IMG SRC="dorfauswahl_05.gif" WIDTH="460" HEIGHT="26" usemap="#navi_unten_dorfauswahl" border="0">

  </TD>

 </TR>
</TABLE>

</BODY>
</HTML>

und hier nochmal die Datei mit, wo man den Tabellenrahmen sieht: indexmitborder.html

und wie man hier genau sieht, die mittlere Zelle, sowohl vertikal als auch horizontal, also das Bild da drinn, ist nicht ganz in der Mitte, nur wieso?

Danke für eure Hilfe!

PS: Tut mir Leid wegen dem Doppelpost, aber der Text war zu lange.

Tim C. · 12. Juni 2003

Also, probier mal folgendes:
1) style="padding: 0 0 0 0;" (in der <td> in der die Karte ist)
2) entferne mal unnötige Leerzeilen, die nur zur Übersichtlichkeit da sind.

Sowas dürfte zwar an und für sich nicht sein, aber ich habe es auch schon
bei mir erlebt, dass Bilder die horizontal direkt aneinander anschließen
sollten, das solange nicht getan haben, bis ich alle <img> Tags in eine
Zeile geschrieben habe.

ungenaue tabelle...

janomerico

Erfahrenes Mitglied

Budda

Erfahrenes Mitglied

janomerico

Erfahrenes Mitglied

Budda

Erfahrenes Mitglied

janomerico

Erfahrenes Mitglied

Andreas Gaisbauer

Erfahrenes Mitglied

Tim C.

Erfahrenes Mitglied

janomerico

Erfahrenes Mitglied

janomerico

Erfahrenes Mitglied

Tim C.

Erfahrenes Mitglied

Neue Beiträge