nicht angemeldet
Tabellen/DIV-Hintergrund bündig zum body
Hallo,
irgendwie klappt das nicht richtig (zumindest im IE, ich hab hier leider keinen anderen zur Verfügung, aber das Schrottteil soll es ja auch zeigen):
Ein Body mit margins=0 und spacings=0, darin eine Tabelle mit zwei Zeilen und je einer Zelle.
Jede Zelle hat eine (zueinander passende) Hintergrundgrafik, die genau aneinander liegen müssen.
Mit background-position: center top (und center bottom für die untere Zeile) erscheint zumindest keine Lücke mehr zwischen den Zellen. Die hätten eh nicht sein sollen, erscheinen aber.
Allerdings soll die obere Grafik auch oben bündig sein, ohne background-position ist sie das aber dann ist die Lücke zwischen den beiden Zeilen.
hier der CSS-Code:
---
BODY{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
table{
border: 0px;
width: 997px;
border-spacing: 0px; /*versteht der IE nicht*/
border-collapse: collapse; /*versteht der IE*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
td{
background-repeat: no-repeat;
}
td.zeile1{
background-position:center bottom;
}
td.zeile2{
background-position:center top;
}
--
und der HTML Code:
<body>
<table width="997">
<tr>
<td background="/gfx/zeile1_komplett.gif" class="zeile1">
<img src="/gfx/spacer.gif" width="50" height="77" />
</td>
</tr>
<tr>
<td background="/gfx/zeile2_komplett.gif" class="zeile2">
<img src="/gfx/spacer.gif" width="50" height="75" />
</td>
</tr>
</table>
usw.
---
Der Spacer (transparentes 1x1px-gif) tut not weil sonst die Tabellenzelle ohne Inhalt "kollabiert" und nicht den ganzen Hintergrund anzeigt ("richtige" Grafiken kommen dann später rein). Wenn ich dem oberen spacer drei pixel weniger Höhe angeb als die Hintergrundgrafik hoch ist (also 74 statt 77px), passt es allerdings. Ist doch nicht normal oder?
-
hi,
deine "problembeschreibung" ist mir irgendwie zu konfus, um mich da jetzt reinzudenken.
beschreibe bitte mal nachvollziehbar, was das problem ist - und stelle ein online-beispiel bereit.Ist doch nicht normal oder?
nein, tabellen zum layouten zu missbrauchen, ist heutzutage wirklich nicht mehr normal.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
nein, tabellen zum layouten zu missbrauchen, ist heutzutage wirklich nicht mehr normal.
ich weiss, aber mit DIVs isses dasselbe. Daher auch die Überschrift.
Problem:
eine zerschnittene Hintergrundgrafik, die über mehrere Einheiten (Zellen oder DIVs) zusammengefügt ist. In den Einheiten stehen dann Links in Form von img-tags. Alles soll absolut bündig oben und links sein. Also wenn man im body eine BG-Farbe angibt, ist diese NICHT zu sehen, auch nicht ein pixel hoch.Ich hab zwei Zeilen. Jede hat den zueinander passenden Teil der Hintergrundgrafik. Aber: Trotz definition von border=0 border-spacing=0 und border-collapse=collapse, margins=0 und paddings=0 für Body und Table (bzw. DIV) erscheint eine Lücke zwischen den Zellen. Entweder ist es oben und links bündig und die Lücke ist zwischen den zellen, oder es ist zwischen den zellen bündig und oben ist ein Pixel rand (=durscheinende BG-Farbe des Body).
-
-
Hallo mazzo,
ich frage mich, warum du die Hintergrundgrafik zerschneidest, nur um sie
dann wieder bündig zusammenzusetzen.Zeilenumbrüche und Tabulatoren im Quelltext werden vom Browser als jeweils
ein Leerzeichen interpretiert.<tr>
<td background="/gfx/zeile1_komplett.gif" class="zeile1">Leerzeichen
<img src="/gfx/spacer.gif" width="50" height="77" />
Leerzeichen
</td>
</tr>
<tr>
<td background="/gfx/zeile2_komplett.gif" class="zeile2">Leerzeichen
<img src="/gfx/spacer.gif" width="50" height="75" />
Leerzeichen
</td>
</tr>
</table>Außerdem ist img ein Inlineelement, welches sich im Textfluss auf der Linie
befindet. Text hat aber auch noch eine Unterlänge.
Also, entferne die Leerzeichen/Zeilenumbrüche innerhalb der TDs.
Dann versuche dein Glück mit Grafiken ausrichten mit CSS oder mit der richtig
gewählten Display Eigenschft.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
hi,
Zeilenumbrüche und Tabulatoren im Quelltext werden vom Browser als jeweils
ein Leerzeichen interpretiert.nein, _browser_ sollten das eigentlich nicht tun - und m.W. macht es auch nur der IE.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
Hallo wahsaga,
Zeilenumbrüche und Tabulatoren im Quelltext werden vom Browser als jeweils
ein Leerzeichen interpretiert.nein, _browser_ sollten das eigentlich nicht tun - und m.W. macht es auch nur der IE.
Doch!
Browser sollten das auch tun, nur wohl nicht überall.
Und da übertreibt der IE etwas. ;)Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
Zeilenumbrüche und Tabulatoren im Quelltext werden vom Browser als jeweils
ein Leerzeichen interpretiert.nein, _browser_ sollten das eigentlich nicht tun - und m.W. macht es auch nur der IE.
Doch!
Browser sollten das auch tun, nur wohl nicht überall.
Und da übertreibt der IE etwas. ;)Einfach mal die relevanten Stellen des Standards angucken:
http://www.w3.org/TR/html401/struct/text.html#h-9.1
Note that a sequence of white spaces between words in the source document may result in an entirely different rendered inter-word spacing (except in the case of the PRE element). In particular, user agents should collapse input white space sequences when producing output inter-word space.Also: Sequenzen von Whitespace (LF, CR, Space, Tab, ...) werden (außer in pre und ähnlichem) zu einem Leerzeichen in der Ausgabe.
http://www.w3.org/TR/html401/appendix/notes.html#notes-line-breaks
SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.Ein Zeilenumbruch direkt nach einem öffnenden oder direkt vor einem schließenden Tag muß ignoriert werden.
Aber Achtung: Einrückungen im Quelltext durch Leerzeichen oder Tabs sind whitespaces, die nicht ignoriert werden dürfen/müssen.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
danke für die Präzisierung.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
Zwei Beispiele:
Beispiel mit styleangaben (fast nur) in HTML
Beispiel mit styleanagben nur in CSS
vielleicht wirds da deutlicher. Der Hintergrund soll sowohl bündig zur linken oberen Ecke sein UND auch zueinander passen, also "auf Kante". Ich hab auch mit background-position: center bottom; versucht (und center top für die zeile drunter) aber dann entsteht die Lücke über der ersten Zeile. Obwohl der Zellenhintergrund und das "Pfeilbild" genau 100px breit sind, entsteht eine Lücke, wenn ich das Pfeilbild mit einer kleineren height angebe, ist die Lücke weg, aber die Hintergrundbilder passen nicht genau zueinander.
Als normales <img> mit <a href> drumrum sollen dann Bilder an bestimmten stellen auf dem Hintergrund eingefügt werden, unten links soll die Navigation hin. daher auch das Konstrukt mit dem Zerschneiden der Grafik (welches hier ein _Beispiel_ ist, also nicht wundern was da für ne Popelgrafik erscheint).
Ich seh meinen Fehler nicht, von Kommentaren a la "guck mal in w3c.org" oder "das steht unter Positionierung in SelfHTML" bitte ich abzusehen. Das ist mir durchaus bekannt ;-)
-
Hi,
404 not found
404 not found
(index schreibt man ohne t)
In den Tabellenzellen ist jeweils noch Platz für Unterlängen des Texts, der ja auf der Unterkante des Bildes steht, also für die Teile von Buchstaben wie g, j, p, q, y, die unter der Zeile hängen.
Dieser Platz wird üblicherweise auch dann schon erzeugt, wenn die Zelle neben Bildern nur Leerzeichen enthält.
Mit
<td colspan="2" background="zeile1.gif"><img src="pfeil.gif" alt="Pfeil"></td>
sollte er verschwunden sein.Ggf. mit line-height beseitigen ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
404 not found
(index schreibt man ohne t)
Entschuldigung, Tippfehler... Danke für das eigenständige nachbessern!
In den Tabellenzellen ist jeweils noch Platz für Unterlängen des Texts, der ja auf der Unterkante des Bildes steht, also für die Teile von Buchstaben wie g, j, p, q, y, die unter der Zeile hängen.
herrjeh, wir brauchen Keilschrift!
Dieser Platz wird üblicherweise auch dann schon erzeugt, wenn die Zelle neben Bildern nur Leerzeichen enthält.
Mit
<td colspan="2" background="zeile1.gif"><img src="pfeil.gif" alt="Pfeil"></td>
sollte er verschwunden sein.Irre! Danke! Man darf den td-tag und das darin _nicht_ einrücken sondern alles hintereinander in eine Zeile schreiben, ich fass es nicht. Gibts ne Möglichkeit sowas zu unterbinden ohne den Quellcode über drei Monitore zu strecken?
Ggf. mit line-height beseitigen ...
cu,
AndreasDu bist mein Held des Tages, was sag ich - des Jahres!
herzlichen Dank nochmal - das sind so Sachen wo man sich echt abstrampelt und an den eigenen Fähigkeiten zweifelt.Mazzo
-
Hi,
Irre! Danke! Man darf den td-tag und das darin _nicht_ einrücken sondern alles hintereinander in eine Zeile schreiben, ich fass es nicht. Gibts ne Möglichkeit sowas zu unterbinden ohne den Quellcode über drei Monitore zu strecken?
Zeilenumbrüche innerhalb des Whitespace, der sich innerhalb der tags, aber außerhalb der Attributwerte befindet, sind unkritisch.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-