1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Zeilenabstand in html

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Virtualix, 03.07.08.

  1. Virtualix

    Virtualix Jonagold

    Dabei seit:
    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>
     
  2. duffman

    duffman Galloway Pepping

    Dabei seit:
    29.11.07
    Beiträge:
    1.361
    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
     
  3. hello

    hello Schöner von Nordhausen

    Dabei seit:
    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
     
  4. Peitzi

    Peitzi Blutapfel

    Dabei seit:
    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:


    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.
     
  5. Samsas Traum

    Samsas Traum Pommerscher Krummstiel

    Dabei seit:
    24.04.08
    Beiträge:
    3.030
    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 ...
     
  6. xenxox

    xenxox Macoun

    Dabei seit:
    08.02.05
    Beiträge:
    122
    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.
     
  7. Peitzi

    Peitzi Blutapfel

    Dabei seit:
    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!
     
  8. frozenbarbie

    frozenbarbie Morgenduft

    Dabei seit:
    03.07.08
    Beiträge:
    168
    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
     
  9. frozenbarbie

    frozenbarbie Morgenduft

    Dabei seit:
    03.07.08
    Beiträge:
    168
    Sehr richtig; insbes. für einen Neuling.

    was meinst Du was er grade tut und warum er die Frage gepostet hat?! ;)


    FB
     
  10. Virtualix

    Virtualix Jonagold

    Dabei seit:
    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.
     
    #10 Virtualix, 04.07.08
    Zuletzt bearbeitet: 04.07.08
  11. frozenbarbie

    frozenbarbie Morgenduft

    Dabei seit:
    03.07.08
    Beiträge:
    168
    Kein bullshit - stimmt leider. Quelle: own experience ;)

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

    FB
     
  12. xenxox

    xenxox Macoun

    Dabei seit:
    08.02.05
    Beiträge:
    122
    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.
     
  13. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    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.
     
    #13 Zeisel, 06.07.08
    Zuletzt bearbeitet: 06.07.08
  14. Hairy

    Hairy Sonnenwirtsapfel

    Dabei seit:
    07.08.07
    Beiträge:
    2.397
  15. Virtualix

    Virtualix Jonagold

    Dabei seit:
    14.06.08
    Beiträge:
    19
  16. dahui

    dahui Carmeliter-Renette

    Dabei seit:
    22.10.06
    Beiträge:
    3.303
    http://www.hotdesign.com/seybold/index.html

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

    das ganze gibt es auch auf deutsch
    http://seybold.jan-andresen.de/index.php
     
  17. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    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!
     

Diese Seite empfehlen