XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Tabellenfelderzwischenraeume xhtml (http://xhtmlforum.de/showthread.php?t=43818)

heinzel 10.01.2007 09:32

Tabellenfelderzwischenraeume xhtml
 
Hallo,

Ich habe eine Tablle die mit Bildern gefuellt ist.
Ich moechte 100% xhtml codieren. Bin aber blutiger css- und xhtml-Anfaenger!

Wie bekomme ich die Zwischenraeume zwischen den Tabellenfeldern weg?
! im Internetexplorer und im Firefox !

Es sollte eigendlich ganz einfach sein, aber ich komme nicht auf die Loesung.
Es nervt mich inzwischen ganz gewaltig!(Ein Monat lang keine Loesung)

hier der
Code:

<?xml version="1.0" encoding="GB2312" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Problem</title></head>
<body>

<table  style="border-collapse:collapse;border-style:none; padding:0px; border-spacing:0px; margin:0px" >

 <tr>
  <td>
    <img src="bild1.bmp" alt=""/>
  </td>
 </tr>

  <tr >
  <td>
    <img src="bild2.bmp" alt=""/>
  </td>
 </tr>

</table>

</body>
</html>


Ich habe den Code xhtml validiern koennen!
"xhtml1-strict.dtd" sollte bleiben.

mfG.
Dirk

halbmond 10.01.2007 09:51

versuch mal das

*{
border:0px;
}

od.

*{
border:none;
}

ich glaube, es funktioniert beides, bin mir aber gerade nicht sicher :roll:

heinzel 10.01.2007 10:13

Funktioniert nicht . Aber Danke fuer den schnellen Loesungsversuch
 
ich habs zu dem style.. von der Tabelle hinzugefuegt.
Funktioniert nicht .
Aber trotzdem Danke fuer den super schnellen Loesungsversuch.

andir 10.01.2007 10:28

Code:

table td {
line-height: 0;
}

löst dein Problem.
img ist ein inline-Element. Die Browser stellen -wie für Text, immer etwas Platz zur Verfügung. Such mal im Forum nach baseline oder lies

SELFHTML: Stylesheets / CSS-Eigenschaften / Ausrichtung und Absatzkontrolle

oder

vertical-align: Vertikale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Mit dem Nullen der Line-height ist dein Problem aus der Welt.

heinzel 15.01.2007 12:12

Funktioniert bei mir leider wegen Beschriftung nicht
 
Zitat:

Zitat von andir (Beitrag 320415)
Code:

table td {
line-height: 0;
}

löst dein Problem.

Danke fuer die schnelle Hilfe
und Entschuldigung fuer diese spaete Antwort von mir.
Aber eine Leitungsproblem suedlich von Tiwan bereitet mir, hier in China, viele Probleme.

In meinem Fall funktioniert dein Vorschlag leider nicht.
Ich habe auf meiner Website zusaetzlich die Bilder beschriftet.
Daher mein minimierter Beispielcode ein wenig erweitert:
Code:

<?xml version="1.0" encoding="GB2312" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Problem</title></head>
<body>
<table  style=" border-collapse:collapse;border-style:none; padding:0px; border-spacing:0px; margin:0px" >
<!-- "line-height: 0;" -->
 
        <tr>
                <td>
                <div  style="position: relative; left: 0; top: 0">
                        <a href="problem.html" title="Culture Business Consulting/Support">

                                <img  src="bild1.bmp" alt=""/>
               
                        <font color="111111" size=3 id=cb style="position: absolute; left: 5%; top: 10px; text-decoration:none">
                        <b>Culture<br> Business<br>Consulting / Support</b></font>
                        </a>
                </div>
                </td>
               
        </tr>
       
    <tr >
                <td >
                <img  src="bild2.bmp" alt=""/>
                </td>
        </tr>
</table>
</body>
</html>

Ich weiss es ist kein schoener css/xhtml Stil.
(Ich habe ein paar noch unschoenere Themendiskusionen/Beitraege zu dem Thema css/xhtml Stil hier gelesen).
Aber ich kann es leider noch nicht besser.
Und ein totaler Neuaufbau der Seite ist wegen Zeitmangel keine Loesungsmoeglichkeit.

Ich bin Dankbar fuer jeden praktischen, fuer meine Seite Intercultural Consulting and Trading Ltd.**-* China, Deutschland Germany ...* verwendbaren, Loesungsvorschlag.

Dank vom immer noch verzweifelten,
Dirk

andir 15.01.2007 12:34

Deine Seite ist für mich gerade nicht erreichbar, deswegen muss ich ein wenig raten.

Sehe ich das richtig, dass das Bild lediglich als Hintergrund für eine Art Navigation dienen soll?

Warum setzt Du dann a nicht als display:block und weist das Bild im CSS als Hintergrund zu?

heinzel 16.01.2007 06:25

Das Bild(und die Tabelle) ist Hintergrund fuer den Link und ist auch wichtiger Bestandteil fuer die Aufteilung der gesamtenSeite. Es soll sich beim Vergroessern und Verkleinern des Fensters dem Tabellenfeld anpassen.
Am liebsten haette ich es in der Hoehe und in der Breite. Soll aber erst mit der naechsten css Version funktionieren.
Beim Erstellen der Seite kannte ich nur html.

Meine Seite ist nicht erreichbar!:shock:
Liegt es an meiner Seite?

display:block kannte ich bis jetzt nicht. :oops:
Hast du es mit meinem minimierten Code ausprobiert?

Danke fuer den Tip,
Dirk

PS
"xhtml strict" sollte bleiben bin aber inzwische bereit es zu opfern

andir 16.01.2007 12:08

Erreichbarkeit: Der zentrale Router im Haus hatte seine Probleme gestern ;)

Bist Du sicher, dass Du das soo umsetzen willst :shock:
Das wird eine heftige Aufgabe - kein "Kästchen"gleicht dem anderen und dann auch noch skaliert - bei meinen 1280x1024 verzerrt das bereits ordentlich,es pixelt ziemlich ;) jemand der einen Laptop an ~1400, ~1600 oder gar ~1900 Pixelbreite betreibt ( diese widescreenTeile), bekommt ein Haus zu sehen wie es nach dem Drauftreten durch einen Riesen aussehen könnte.


Hintergrundbilder kannst Du per css derzeit noch nicht skalieren, das kommt erst später, also muss man das wie Du es gerade machst, per <img> einbinden, was wiederum dafür sorgt, dass das mit dem Text nicht so hinhaut :)

Die Probleme des Skalierens sind ja jetzt bekannt. Die Dateigröße der Seite wird nicht gering sein mit so vielen Bildern - hat man den in China einen Breitbandzugang oder wenigstens die Zielgruppe?

Wenn Dir die Hausmetapher so gut gefällt... hm, keine Alternativen überlegt?
Zum Beispiel eine andere Hintergrundfarbe? Das Türkis ist so 1996.....
Vielleicht eher ein dunkleres Himmelblau mit Farbverlauf ins Helle oder Dunkle ( Hintergrundfarbe + Hintergrundbild body) oder ein warmes Rot ( wenn das in China nicht eine negative Bedeutung hat)

Ohne in den Code zu gucken nehme ich an, dass ein Tabelle im Hintergrund liegt welche die Bildchen zusammensetzt/verwaltet und der Text darübergelegt ist. Das haut natürlich nicht hundertprozentig hin.

Eine brauchbare "Zwischenlösung" mit einem konstruktiven Mix aus Tabellen. CSS und divs sehe ich da nicht wirklich mit dieser Gestaltung. Am Ende dieses Posts folgt eine Lösung mit CSS, die mit dieser einfachen Aufgabe funktioniert, allerdings, ohne dass die Hintergrundbilder mitskalieren, damit: ausgeschieden.

Wegen deines Zeitmangels ;) schlage ich vor, einfach die alte Seite leicht aufzuhübschen, CSS zu lernen, Tabellen fürs Layouten aus dem Fenster zu schmeissen und in aller Ruhe neu zu coden.

Alles andere ist bruchstückhaft. Fürs Coden mit XHTML und CSS muss man sich von eigenen Gewohnheiten trennen, nicht in Tabellen und deren Verhalten denken ( alles 100% Höhe und Breite z.B. - muss das wirklich sein?, das Haus über die ganze Seite...) und so weiter und so weiter.

Interessante CSS-Designs ( auf dem gleichen Quellcode basierend) finden sich z.B. unter csszengarden.com.
Interessante Artikel zum Webdesign finden sich auf alistapart.com, digital-web.com, thinkvitamin.com ( dürfte zu früh sein).
Viele verschiedene Ideen zur Neugestaltung einer Seite finden sich, wenn man browsershots.org ansurft und sich dort die letzten Tests der User ansieht.

CSS-Templates finden sich bei der Suchmaschine deines Vertrauens, obwohl die auch nicht immer das Gelbe vom Ei sind.

Fazit dieses sehr langen Posts: Im derzeitigen Stadium sind halbe Sachen nichts Ganzes. Finger weg vom Gefrickel, alte Seite noch ein bisschen durchziehen und im Hintergrund lieber ganz neu anfangen.


Code:

<?xml version="1.0" encoding="GB2312" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Problem</title>
<style type="text/css">
<!--

td {
width: 6em;
height: auto;
display: block;
background: url(bild.gif);
}
td div a {
color: white;
}

//-->
</style>


</head>
<body>
<table summary="Irgendwas" style=" border-collapse:collapse;border-style:none; padding:0px; border-spacing:0px; margin:0px" >
<!-- "line-height: 0;" -->
 
        <tr>
                <td>
                                <!-- <img  src="bild.gif" alt=""/> -->
            <a href="problem.html" title="Culture Business Consulting/Support">
                             
                                   
                        <b>Culture<br /> Business<br />Consulting / Support</b>
                        </a>
                                </td>
               
        </tr>
       
    <tr >
                <td >
                <!-- <img  src="bild.gif" alt=""/> --><span>Zweites td im Code, R&auml;nder fallen zusammen</span>
                </td>
        </tr>
</table>

</body>
</html>


LineMan 17.01.2007 11:47

ansonsten ist das vielleicht auch ein thema für dich

Images, Tables, and Mysterious Gaps - MDC

heinzel 18.01.2007 05:35

Es funktioniert! LineMan ist mein Held !
 
Es funktioniert,:D :D :D

Ich musste nur
<style type="text/css">
td img {display: block;}
</style>
oder <style type="text/css">
img {display: block;}
</style>
(den Unterschied muss ich noch herausfinden)

einfuegen und es funktioniert.:!:
Die Zwischenraume sind weg.:!: :D :D

LineMan ist Suuuper!!!!
Images, Tables, and Mysterious Gaps - MDC


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:26 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023