Sie sind nicht angemeldet.

1

Donnerstag, 13. Juli 2006, 02:36

div-Tag und Zeilenumbruch

Hallo,

mir stellt sich folgende Situation:

Ich möchte in html-Dateien meine Tabellen, die an sich keine Daten, sondern nur Fließtext enthalten, nicht mehr als Tabelle programmieren, sondern als codesparenden div-Bereich. Das klappt so weit auch ganz prima :]

Nur eine Kleinigkeit stört dabei: Am Ende des div-Bereiches wird stets ein Zeilenumbruch eingefügt, so dass die "Tabelle" unnötig verlängert wird und dadurch insgesamt einen optischen Schönheitsfehler erhält. Ich hoffe, es ist verständlich, was ich meine.

Google brachte auf meinem Weg zu einer Lösung zwar eine Menge Seiten dazu (andere schlagen sich also auch damit rum :D), aber irgendwie nicht wirklich eine Lösung für einen Anfänger wie mich. Scheinbar gibt es auch keine andere Lösung, als die kompletten, dateiaufbauschenden table-tags zu verwenden (?). Denn ich habe nicht verstanden, wie man den Zeilenumbruch beim div-Tag (am Ende) verhindern kann, wenn das überhaupt geht.

Wißt ihr, solche verdammten Kleinigkeiten sind es, die mich stundenlang in Trab halten und womöglich nicht richtig schlafen lassen. Das ist doch echt furchtbar oder. Wer hat sich so was nur ausgedacht? Wir fliegen zum Mond und zur ISS, aber so etwas wie einen Zeilenumbruch kriegt man nicht weg. Na ja, und wenn ich gar nicht weiter weiß, muss ich halt andere Leute, die sich besser auskennen, damit nerven :D

Vielleicht weiß hier jemand irgendwas.......... :(

Danke schon mal =)
Viele Grüße

kutte =)

2

Donnerstag, 13. Juli 2006, 16:30

Hallo,

poste doch mal ein bisschen Code. Ich verwende auch auf meinen meisten Projekten div-codes, aber bei mir ist das Problem noch nie aufgetreten.

Hast du den CSS Code, welcher die div-Bereiche genauer definiert in einer extra Datei ausgelagert? So mache ich das immer und bin bisher ziemlich gut damit gefahren!

Beste Grüße,
Fabian Karg

>>> www.flf-book.de
Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an ;)

3

Donnerstag, 13. Juli 2006, 20:32

Hallo Fabian,

ich mache erst seit kürzlich mit CSS "rum" und mir schien die Methode, den CSS-Code in einer Extradatei auszulagern und diese in den eigentlichen html-Dateien zu verlinken von Anfang an als am Optimalsten.

Um also mal ein konkretes Beispiel zu geben. Dies ist die Originaltabelle mit dem entsprechenden Code:

<TABLE WIDTH="800" BGCOLOR="#FFE4C4" BORDER="0" BORDERCOLOR="#000000" CELLPADDING="10" CELLSPACING="0">
<TR>
<TD BGCOLOR="#FFFFF0" WIDTH="800" STYLE="border: 3px solid #000000;" VALIGN="top"><P ALIGN="justify">
<SPAN CLASS="text">Test blabal bla blabla bla Text</SPAN></P></TD></TR></TABLE>

So, daraus möchte ich dies hier machen:

<div CLASS="spalte">Text blabla bla blabla bla Text</div>

In der Extra-CSS-Datei steht dazu folgendes:

.spalte {
padding: 10px 10px 10px 10px;
text-align: justify;
border-width: 3px;
border-style: solid;
background-color: #FFFFF0;
font-family:Verdana,Arial,Helvetica;
font-size:0.8em;
font-weight:normal;
color:#000000;
}

So, an sich funktioniert das so wie ich das will. Nur, das eben nach </div> ein neue leere Zeile eingefügt wird und das ist einfach - sorry - ätzend, weil es für meine Zwecke nicht passt. Denn meine Tabelle/Spalte hat nämlich eine andere Hintergrundfarbe als der Body. Dadurch sieht das dann sehr unschön aus, finde ich....... An allen Rändern ist der Abstand des Textes zum Rahmen nämlich 10px (padding), außer unten! Da beträgt der Abstand nämlich 10px plus die leere Zeile :(

Kannst du irgendwas anfangen damit?

Ach ja, dieser "Effekt" übrigens tritt beim IE nicht auf, allerdings beim Firefox ist die unsinnige Leerzeile sichtbar.
Viele Grüße

kutte =)

4

Freitag, 14. Juli 2006, 17:15

Hallo,

sehr komisch, wie gesagt, mir ist das noch nie passiert bzw. aufgefallen.

Spontan fallen mir drei Dinge ein:

- Du könntest es mit der Angabe margin:0px; versuchen, wenn das auch nicht klappt, dann

- könntest du die Elemente left, right, height und width definieren, wenn das auch nicht hilft,

- müsstest du den darunter liegenden Text ebenfallls mit einem div Tag definieren (inbes. left, right, height etc.).

Beste Grüße,
Fabian Karg

>>> www.flf-book.de

P.S.: Ich verwende immer noch die Angabe position:absolute; vielleicht liegt es auch daran?!
Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an ;)

5

Freitag, 14. Juli 2006, 20:37

Hallo Fabian,

ich dachte eigentlich, die Problematik mit dem Zeilenumbruch bei </div> wäre dir als alter "div-Hase" bekannt :) Laut meinen Google-Recherchen jedenfalls ist div ein Block-Element, das nach dem Ende-Tag generell einen Zeilenumbruch kriegt.

Nur, das eben der Firefox das anzeigt und der IE eben nicht, weil der IE ja nicht wirklich nach den richtigen Standards anzeigt (oder so ähnlich 8) )

Jedenfalls, das mit dem Attribut "height" kommt der Lösung sehr nahe. Dadurch geht der Zeilenumbruch tatsächlich weg, wenn offenbar auch nur augenscheinlich, aber er wird nicht angezeigt, und das ist das was ich erreichen will.

Im Prinzip ist es die Lösung, aber ich schreibe nur "sehr nahe". Also es ist so, dass sich "height" sozusagen unhandlich ist. Es ist nämlich so, dass ja jede Tabelle verschieden hoch ist. Nun ist also das Problem, dass ich nun zigmal austesten muss, wie viel px Höhe meine Tabellen haben. Da ich dafür keine Berechnung kenne, muss ich also jedesmal von Hand "ins Blaue hinein schätzen" und dann sehen, ob es im Firefox einigermaßen richtig angezeigt wird. So lange eben, bis es wirklich passt. Und das für jede Tabelle einzeln, und das dauert ne mächtige Zeit.

Hm, also wenn es dafür eine Lösung geben würde, wäre das Klasse. Ich kann zwar mittlerweile gut abschätzen, wie breit etwas ist, aber nicht wie hoch.

Aber Danke erstmal. Ich werde mal weiter experimentieren.

edit: So, ich hab jetzt die Lösung gefunden, die zu 100 % funzt: statt <div class> nehme ich einfach <p class> :]
Viele Grüße

kutte =)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »kutte« (14. Juli 2006, 22:00)


6

Samstag, 15. Juli 2006, 10:45

Zitat

Original von kutte
edit: So, ich hab jetzt die Lösung gefunden, die zu 100 % funzt: statt <div class> nehme ich einfach <p class> :]


Perfekt! Sehr gut zu wissen, aber da wäre ich im Leben nicht draufgekommen!

Dann kann ich dir auch sagen, warum mir das Problem noch nie untergekommen ist. Ich verwende immer das Attribut "height" ;)

Beste Grüße,
Fabian Karg

>>> www.flf-book.de
Zufrieden mit Service und Support? Dann schau Dir doch mal die Premiumfeatures an ;)

Thema bewerten