• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Sprichwörter und Redewendungen sind das Thema unseres Monatswettbewerbes. Nähere Informationen dazu gibt es natürlich auch, und zwar auf dieser Seite ---> Klick

Zeilenabstand in html

Virtualix

Jonagold
Registriert
14.06.08
Beiträge
19
Hallo,

nachdem ich mit einer in iWeb erstellten Website ziemlich auf die Nase gefallen bin (kaum ein Browser außer Safari stellte die Seiten fehlerfrei dar) hat sich ein Bekannter der Seiten angenommen und in html neu erstellt. Das Ergebnis kann sich zu 90 % sehen lassen, aber es gibt immer noch Dinge die leider nicht so umgesetzt wurden, wie ich es mir gewünscht hätte. Deshalb will ich mich selbst mal mit HTML und Co. beschäftigen. Die Seite Selfhtml hab ich schon gefunden, die ist auch sehr hilfreich. Aber wie ich z.B. einen Zeilenabstand beeinflussen kann, ist mir nicht klar. In einem Layoutprogramm kann ich ja locker mal von einfachem auf 1,5 oder 2 fachen Zeilenabstand gehen.
Geht das auch in html irgendwie? Kann ich notfalls nicht sichtbare Zeilen in kleinerer Schriftgröße einfügen um den gewünschten Effekt zu erreichen.

Wie könnte ich beim folgenden Code-Beispiel den Zeilenabstand beinflussen?

</tr>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 1</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</tr>
</br>


</tr>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 2</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</tr>
</br>

</tr>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 3</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</tr>
</br>
 

duffman

Galloway Pepping
Registriert
29.11.07
Beiträge
1.360
Versuch es mal mit margin (Außenabstand) und/oder padding (Innenabstand).
Ich weiß nicht so recht, was du meinst...

Am besten wäre es allerdings, von Tabellen ganz Abstand zu nehmen, da diese mittlerweile ziemlich oldschool sind.

Eine hilfreiche Webseite ist www.css4you.de
 

hello

Schöner von Nordhausen
Registriert
02.07.06
Beiträge
327
also mal ganz erlich, so was wie diesen code da kannst du ja im heutigen internet nicht mehr wirklich bringen, für sowas gibt es block-elemente und css

und jetzt zum zeilenabstand: ich denke du müsstest folgendes in das <td>-tag einfügen: style="line-height: [der gewünste zeilenabstand]

aber mit einem solchen code würde ich persönlich gar nicht anfangen zu arbeiten

lg
manuel
 

Peitzi

Blutapfel
Registriert
07.08.07
Beiträge
2.595
Jo Zeilenabstand ist line-height.
Einfach in der CSS in der richtigen Klasse oder ID einfügen.



Aber worum es mir geht:

Am besten wäre es allerdings, von Tabellen ganz Abstand zu nehmen, da diese mittlerweile ziemlich oldschool sind.


Dafür hätte ich ganz gerne eine Begründung, denn davon höre ich als Informatikstudent jetzt zum ersten mal. Hat auch noch nie einer unserer Dozenten erwähnt.
 

Samsas Traum

Pommerscher Krummstiel
Registriert
24.04.08
Beiträge
3.025
das was meine vorredner bisher von sich gegeben haben ist warscheinlich nicht ganz verständlich, daher würde ich empfeheln du beschäftigst dich ersteinmal ausgiebig mit html
(was macht man/was nicht ... tabellen sind schon lange nichtmehr standart, außer man benutzt sie wirklich als tabelle, und nicht als layout). und denn widme dich css ... gibt ne menge gute tutorials im inet, wobei ich bücher eher empfelen kann ...
 

xenxox

Macoun
Registriert
08.02.05
Beiträge
122
Dafür hätte ich ganz gerne eine Begründung, denn davon höre ich als Informatikstudent jetzt zum ersten mal. Hat auch noch nie einer unserer Dozenten erwähnt.

Dann teil deinen Dozenten mal bitte mit das sie offensichtlich inkompetent sind und sich ihrer schämen sollten. Die Begründung warum Tabellen nicht zum Layout verwendet werden darf ist ganz einfach: Mit HTML werden Textbereiche ausgezeichnet, eine Tabelle ist also für tabellarische Informationen und nicht fürs Layout.

Der Text wird ausgezeichnet und anschließend mittels CSS gestaltet.
 

Peitzi

Blutapfel
Registriert
07.08.07
Beiträge
2.595
Ich sehe jedoch noch immer keinen wirklichen Nachteil darin, ein Tabellenbasiertes Layout zu nutzen. CSS hin oder her, es kommt ja dennoch zwecks XHTML zum Einsatz.

Wo bestehen denn konkrete Nachteile beim Tabellenlayout?

Mir würde nur einfallen, dass eine Designänderung eines tabellarischen Aufbaus etwas mehr Zeit in Anspruch nimmt und mit CSS wohlmöglich etwas zügiger geht.

Aber sonst?
Bin für jeden Hinweis dankbar!
 

frozenbarbie

deaktivierter Benutzer
Registriert
03.07.08
Beiträge
287
Leute :)

wenn Virtualix nix ausser iWeb kennt, wird er wohl mit CSS etwas überfordert sein, obwohl das nat. die professionellste Lösung ist, aber nicht unbedingt für einen Neuling schnell zu fassen ;)

Wenn's wirklich ne tabelle ein soll, könnte man mit der Zeilenhöhe spielen:

Code:
<table>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' [B]height="40"[/B] style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 1</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</tr>
</br>


</tr>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' [B]height="40[/B]" style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 2</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</tr>
</br>

</tr>
<tr valign='top'>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
<td width='20' valign='middle'><img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0'></td>
<td width='460' [B]height="40"[/B] style='font-family:ArialMT,Arial,Helvetica,Verdana;font-size:10pt;color:#555555;'>
Das ist nur die Beispielzeile 3</td>
<td width='20'><img src='allgFiles/pixel_trans.gif' width='20' height='1' border='0'></td>
</table>

aber wie Duffman sagt, geht auch und besser ohne Tabelle (die im Beispiel ist ohnehin defekt ; ):

Code:
<font color="#555555" size="2" face="ArialMT,Arial,Helvetica,Verdana">
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 1<br />
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 2<br />  
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 3
</font>

denn du mehr Abstand möchtest, einfach mehr <BR>'s setzten:

Code:
<font color="#555555" size="2" face="ArialMT,Arial,Helvetica,Verdana">
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 1<br />
<br />
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 2<br />
<br />  
<img src='Wozu_files/shapeimage_1.gif' width='6' height='6' border='0' /> Das ist nur die Beispielzeile 3
</font>


FB
 

Virtualix

Jonagold
Registriert
14.06.08
Beiträge
19
Erst mal danke für die Antworten.
Wie erwähnt bin ich absoluter Newbie in dieser Sache.
Ich hab natürlich verschieden Statements gelesen, von Leuten die denken modernes Webdesign
sei dieses oder jenes...

Zum Beispiel ist durch das Recherchieren bei mir (der vielleicht falsche?) Eindruck entstanden, das ein möglichst einfach gehaltener html code für viele Browser brauchbar sei und einem komplizierten mit vielen Elementen angereichertem Code vorzuziehen sei.

Ich weiß nicht ob das stimmt, aber mir wurde halt erzählt, iWeb würde so viel CSS einbauen, dass die meisten Browser (noch) überfordert sind. Vielleicht war das aber auch Bullshit.
o_O

Es war halt ernüchternd, nach stundenlanger Arbeit festzustellen, dass das für die Tonne war.
Ich brauche halt etwas, das vor allem auf den meistegebrauchten Browsern auf WinPC´s und auch Macs fehlerfrei angezeigt wird.
 
Zuletzt bearbeitet:

frozenbarbie

deaktivierter Benutzer
Registriert
03.07.08
Beiträge
287
Ich weiß nicht ob das stimmt, aber mir wurde halt erzählt, iWeb würde so viel CSS einbauen, dass die meisten Browser (noch) überfordert sind. Vielleicht war das aber auch Bullshit.

Kein bullshit - stimmt leider. Quelle: own experience ;)

Ich brauche halt etwas, das vor allem auf den meistegebrauchten Browsern auf WinPC´s und auch Macs fehlerfrei angezeigt wird

dann bau für den Anfang einfaches, gutes, altes HTML, wie von mir vorgeschlagen :)
Wenn Du dann Fortschritte machst: CSS antesten :)

FB
 

xenxox

Macoun
Registriert
08.02.05
Beiträge
122
Ich sehe jedoch noch immer keinen wirklichen Nachteil darin, ein Tabellenbasiertes Layout zu nutzen. …Wo bestehen denn konkrete Nachteile beim Tabellenlayout?

  1. Tabellen sind für tabellarische Daten
  2. Es bläht das Markup auf -> geht auf die Performance
  3. Tabellen werden erst durch den UA gerendet wenn alle Inhalte vorhanden sind -> gefühlte schlechte Performance
  4. Extrem unflexibel
  5. Linearisierung der Inhalte quasi unmöglich
  6. Unnötige Request durch das Laden der blank.gifs -> geht auf die Performance
  7. Unötige und schlicht veraltete Arbeitsweise

Die Liste kann man mit ein wenig sicher noch länger machen und insbesonderer detaillierter auf die diversen Probleme der Tabellenlayouts bzw. der verschiedenen Nutzertypen, etc. mit diesen eingehen.
 

Zeisel

Spätblühender Taffetapfe
Registriert
07.08.07
Beiträge
2.809
Am besten wäre es allerdings, von Tabellen ganz Abstand zu nehmen, da diese mittlerweile ziemlich oldschool sind.
tabellen sind schon lange nichtmehr standart, außer man benutzt sie wirklich als tabelle, und nicht als layout
Habt ihr euch mal den Quelltext DIESER Seite angesehen?

Doch zum Thema:
Suchfunktion nutzen:
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=Zeilenh%F6he

Zeilenabstand findest Du hier:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height
Und so sieht es im Beispiel aus:
http://de.selfhtml.org/css/eigenschaften/anzeige/line_height.htm

Eine Referenz zu CSS hier:
http://de.selfhtml.org/navigation/css.htm

Um HTML zu programmieren musst Du Dich eine ganze Weile mit dem Thema auseinandersetzen.
http://de.selfhtml.org/ ist ein guter Einstieg, damit habe auch ich es gelernt.

edit: HTML ist nicht PDF und wird in jedem Browser etwas anders dargestellt.
Lies mal diesen Thread dazu.
 
Zuletzt bearbeitet:

Virtualix

Jonagold
Registriert
14.06.08
Beiträge
19

Zeisel

Spätblühender Taffetapfe
Registriert
07.08.07
Beiträge
2.809
http://www.hotdesign.com/seybold/index.html

und man beachte dass dieser link bereits 5 (!) jahre alt ist ;)

Nun, das ist eine Meinung, und man kann anderer sein. Tabellen eignen sich sehr wohl für das Layout einer Seite - es kommt mal wieder, wie so oft, auf den Zweck an. Um mal eben schnell ein par Informationen mit einem Editor übersichtlich aufzubereiten und ins Netz zu stellen sind Tabellen gut geeignet. Aufpassen muss man lediglich bei der teilweise unterschiedlichen Interpretation der verschiedenen Browser. Dieses Problem hat man jedoch mit CSS genauso, dieses hat jedoch für mich als Programmierer den großen Vorteil, mein Seitenlayout an einer zentralen Stelle zu verwalten - optimal in einer CSS-Datei. Das brauche ich jedoch bei 3-Seiten-Projekten nicht zwingend.

Trotz allem empfehle ich, von Anfang an CSS zu lernen, indem man es konsequent anwendet. Tabellen und CSS schließen sich im übrigen nicht aus!