Wie kann ich die Abstände zwischen den Links vergrößern


#1

Wie kann ich die Abstände zwischen den Links in der obersten Zeile vergrößern?
ubuntuli.de/index.htm
ich finde bei SELFHTML 8.1.2 kein Passendes Thema.
Wenn der Hintergrund der Links anders wäre auch gut.


#2

Wenn es um Abstände aller Art geht, kannst du gut mit CSS arbeiten. Dir eröffnen sich generell viele gestalterische Möglichkeiten, wenn du dir ein wenig dieser Sprache aneignest.

Konkret in deinem Fall kannst du in die a-Tags noch folgendes Attribut einfügen:

style="margin-right: 20px;" Du musst eventuell ein bisschen mit der Pixelzahl herumexperimentieren.

Du hast übrigens noch jeweils ein herrenloses Gleich-Zeichen in den font-Tags.


#3

genau genommen sind die font tags nicht einmal geschlossen, sollten heutzutage sowieso nicht mehr verwendet werden da für sowas CSS ist, als auch das der letzte link nach dem p geschlossen wird…


#4

Also wenn du dich weitergehend mit HTML befassen möchtest, UBUNTU14, würde ich dir empfehlen, deine Webseite mithilfe eines Validators überprüfen zu lassen: validator.w3.org/. Damit kannst du Schwachstellen erkennen, die du nicht ganz sauber programmiert hast und die u. U. in einigen Browsern zu falscher Darstellung führen.

Und, wie WhiteTiger schon richtig angemerkt hat, bietet CSS inzwischen so viele Möglichkeiten, dass es Sinn macht, das Gestalterische vom Inhaltlichen zu trennen und Dinge wie Schriftart, -farbe und -größe in Stylesheets auszulagern. Damit wird dein Code übersichtlicher und du bekommst leichteren Überblick über dein Webdesign.

Du kannst dir dazu ja mal was unter dem von mir oben genannten Link durchlesen. font-, i- und andere rein gestalterische HTML-Tags, die nichts mit dem logischen Aufbau einer Webseite zu tun haben, findest du im (professionellen) Webdesign heute kaum noch.


#5

Hoi,

Gerade mal in deinen Validator paar Webseiten von mir reingehauen und überprüft, siehe da ca. 20 Errors. Dann habe ich Facebook.com gecheckt, auch 58 Errors… Kann ich mir aber um ehrlich zu sein nicht so ganz vorstellen… Ist nicht unbedingt nützlich son Tool…

bplaced hat übrigens auch 31 Errors und davon ganze 30 warnings!

Habe mal eine Seite checken lassen wo nur die index.html vorhanden ist mit Title, usw. Selbst da werden mir 2 Errors angezeigt. Wie gesagt, ich würde auf so Tools keinen großen Wert legen…

Gruß


#6

Naja, es gibt eine Spezifikation von korrektem HTML und diese stammt vom W3C-Konsortium (das auch diesen Validator anbietet). Da sich hieran auch die Browser inzwischen sogar mehr recht als schlecht halten, macht es durchaus Sinn, daran auch seine Programmierung auszurichten.

Da HTML möglichst praktikabel sein soll, versuchen die gängigen Browser, falsche und unklare Programmierung so umzusetzen, dass der Nutzer im besten Fall das sieht, was der Entwickler tatsächlich gemeint hat, oder im anderen Fall etwas, was der Nutzer zumindest sehen kann, aber nicht den eigentlichen Sinn wiedergibt. So kann unsaubere Programmierung durchaus zu unterschiedlicher Darstellung in den verschiedenen Browsern führen und manchmal auch zu Ergebnissen, die der Entwickler so gar nicht beabsichtigt hat.

Validität ist daher kein Schönschreibwettbewerb, sondern im professionellen Bereich ein veritables Muss.


#7

Daß die meisten Inhalte im Netz technisch grob fehlerhaft oder mangelhaft sind, ist gemeinhin bekannt, vor Jahren hat Google mal Daten im Rahmen der Entwicklung von HTML5 veröffentlicht,
danach sind wohl weit über 90% der denen bekannten veröffentlichten HTML-Dokumente technisch fehlerhafter Schrott. Zur Strafe gibt es deshalb jetzt HTML5, worin definiert ist, wie man solchen Schrott zur Präsentation bringt. Diese Spezifikation ist so umfangreich und komplex, daß normale Autoren daran wenig Spaß haben, wie gehabt ist also für diese schwer zu prognostizieren, wie technisch fehlerhafter Schrott präsentiert wird, zumal sich Darstellungsprogramme natürlich auch nicht durchgehend danach richten, was in der HTML5-Empfehlung steht ;o)
Von daher ist es unbedingt ratsam, vorhandene Fehler in Dokumenten vor der Veröffentlichung zu beheben. Dazu ist der Validator vom W3C sehr nützlich. Mindestens ebenso nützlich ist es, statt HTML-Markierungssuppe einfach XHTML zu verwenden, Strukturfehler werden da vom Darstellungsprogramm gleich mit einer Fehlermeldung behandelt, ein einfacher Test vor einer Veröffentlichung mit einem gängigen Darstellungsprogramm reicht also, um groben Unfug zu erkennen und zu korrigieren, etwas subtileren Unfug kann man dann mit dem Validator finden.
Der findet wiederum auch nicht alles, kann zudem auch Fehler machen, was aber für den einfachen Anwender nicht so relevant ist, das ist dann mehr ein Spaß für Experten, die die Empfehlungen für die Formate wirklich kennen und damit auch erkennen können, wo selbst solch ein Validator einmal irrt (ist nicht so oft).


#8

[quote=“jayON3”][]
bplaced hat übrigens auch 31 Errors und davon ganze 30 warnings!
[][/quote]in dem falle würde sich das meiste im übrigen in Rauch auflösen, hätte man HTML 5 genutzt^^

Aber man hat ja das “Glück” das Browser von den Web Entwicklern nicht viel halten und somit erraten was gemeint ist. [size=85](P.S. die Tatsache das Browser Fehler ignorieren und das im Ausmaß von HTML, führt u.a. dazu das Browser langsam sind… Fehler beachten macht dich auch nicht immer schneller, im Gegenteil, aber hier geht es darum das Browser wirklich erraten müssen was gemeint ist, und nicht danach gehen was dort wirklich im source steht)[/size]

Javascript ist übrigens im “strict” modus auch schneller^^ [size=85](zumindest mit manchen Javascript engines, und oder aufrufen)[/size]


#9

Achso, um den Hintergrund des Links einzufärben, kannst du die CSS-Eigenschaft background-color benutzen. In etwa so:

Ich meine allerdings, dass Außenabstand (margin), wo auch immer der Sinn dahinter stecken mag, mit eingefärbt wird. Da musst du mal schauen, wie du das dir nach deinen eigenen Vorstellungen bastelst.


#10

Vielen Dank für eure Tipps.
Mir sind durch eure Hinweise beim bearbeiten meiner Seiten im schon einige Sachen aufgefallen die ich sofort korrigiert habe. Ich muss zugeben, die Zeilen 10-14 sind geklaut. Danke für deine Tipps Thor, ich merke schon das ich alleine mit HTML keine großen Sprünge machen kann. Ich denke das was ich bis jetzt über HTML weiß reicht für einen Schüler. Ich hebe gerade eine Seite gefunden mit einem Grundkurs CSS wo erst mal die Grundlagen erklärt werden. Ich habe die Mängel die Du und andere erkannt habe erst mal korrigiert. Mit validator.w3.org/ bin ich gerade dabei den Rest zu Bearbeiten. Zeile 20 muss ich erst mal solange stehen lassen bis ich css einiger maßen gut kann. Der Text soll zentriert sein. Zeile 18 verstehe ich jetzt nicht, ich brauche doch einen Körper. > ist rot gekennzeichnet aber weshalb? Die Links „Seite 1.htm; Seite 2.htm; Seite 3.htm“ in der obersten Zeile habe ich mit selfhtml812 zusammen gebastelt. Die kann ich erst korrigieren wenn ich CSS kann. Attribute für Zeile 41 kann ich erst dann geben wenn ich rechts daneben die Tabelle für meine Seiten habe. Dann kommt in die oberste Zeile ein anderer Text.
Dann wird „images/620px-gnu_and_tux-svg.png“ nach links verschoben und etwas kleiner. Zeile 44 erst wenn ich CSS kann. Zeile 59 verstehe ich nicht. Ich wollte damit „

“ Zeile 44 schließen.


#11

Aber die
's davor gehören da nicht hin.

[quote=“UBUNTU14”]Die Links „Seite 1.htm; Seite 2.htm; Seite 3.htm“ in der obersten Zeile habe ich mit selfhtml812 zusammen gebastelt. Die kann ich erst korrigieren wenn ich CSS kann.
[/quote]

Wichtiger wäre, die Tags richtig zu verschachteln ("… violates nesting rules."). Leerzeichen solltest du maskieren, oder in URLs am besten gar nicht verwenden.

Attribute haben nichts mit irgendwelchen Tabellen oder anderem Text zu tun. Was der Validator bemängelt, ist schlicht und einfach, dass du kein alt-Attribut für das Bild festgelegt hast (vulgo Ersatztext).

Wieder falsch verschachtelt.

Du verschachtelt konsequent vieles falsch. Ein Beispiel:
Falsch:

Richtig(er):

[code]


Text

[/code]

Würdest du deinen Code ordentlich einrücken, würde es dir vermutlich eher auffallen. Siehe dazu auch: de.wikipedia.org/wiki/Extensible … eformtheit (+ den Muster-Aufbau danach)

Mfg :wink2:


#12

ich hatte die letzten Tage leider keine Zeit hier rein zu sehen. musste erst Probleme klären :motz:


#13

Ziel erst mal erreicht. Eure Tipps waren gut. ich konnte sie leider nicht direkt umsetzen, also habe ich alternativen gesucht und gefunden.
Zeile 15 ist nicht neu “style.css” aber ausbaufähig.

[quote]
[/quote]


#14

Bevor ich anfange Fehler falsch zu korrigieren wollte ich mal etwas wissen. Jetzt ist bestimmt der richtige Zeitpunk CSS zu lernen!
Ich habe bis jetzt Elemente in meine Seiten geschrieben ohne zu wissen dass das CSS Elemente sind. Beispiel 1.

[quote]
„Line 31, Column 48: The font element is obsolete. Use CSS instead.“[/quote]

das hätte ich schon beim ersten Test vor einer Woche merken müssen. Unwichtige Dinge habe ich gelöscht.

Ich verstehe diesen Fehler nicht

[quote]">
Use CSS instead.“[/quote]
kann mir bitte jemand sagen was das für ein Fehler ist.
ich soll css benutzen? ich dachte ich schliesse mit > die Zeilen die ich mit < geöffnet habe.


#15

Bevor ich anfange Fehler falsch zu korrigieren wollte ich mal etwas wissen. Jetzt ist bestimmt der richtige Zeitpunk CSS zu lernen!
Ich habe bis jetzt Elemente in meine Seiten geschrieben ohne zu wissen dass das CSS Elemente sind. Beispiel 1 …
„Line 31, Column 48: The font element is obsolete. Use CSS instead.“

das hätte ich schon beim ersten Test vor einer Woche merken müssen. Unwichtige Dinge habe ich gelöscht. Ich verstehe diese Fehler nicht
">
Use CSS instead.“


#16

der einzige Zweck des HTML Elements ist, die Schrift in einem anderen Stil anzuzeigen. HTML Elemente sollen aber nicht das aussehen (Schriftart, Farbe, Größe, Positionen, etc.) beschreiben, sondern lediglich die Bedeutung (Überschriften, Paragraphen, Listen, etc.).

Alle HTML Elemente, die keine eigene Bedeutung haben, sondern nur etwas über das Aussehen aussagen, wurden somit aus dem HTML Standard entfernt und stattdessen wurde CSS entworfen, was einzig und allein für das Aussehen der einzelnen HTML Elemente zuständig ist.

Also: HTML beschreibt was ein bestimmter Text/Teil der Seite ist, und CSS beschreibt wie dieser Teil letztendlich aussieht.

Die Fehlermeldung heißt also nichts anderes, dass du für das Aussehen (die Schriftart/-farbe) lieber eine CSS Definition nutzen sollst, statt dem HTML Element.


#17

Ich habe noch einen weiteren Grundkurs CSS als Video gefunden. Dort habe ich festgestellt das ich ohne weitere Hilfsmittel nicht weiter komme. Der Editor alleine reicht nicht mehr. NVU hilft mir nicht wirklich weiter. Dort wird Scriptly benutzt. Dieses Programm kann ich unter Linux leider nicht nutzen weil es für Windows ist. Alternativ habe ich Bluefish installiert, denn den kenne ich noch von Windows.
ich danke dir “Balmung”. ich beginne am besten erst mal mit index.htm
dort konnte ich zwar einigen Mängel beseitigen aber nicht wirklich alle. 28 Fehler auf index ist zu viel. ich bau die Seite wieder neu auf.


#18

Hallo UBUNTU14

Für den Anfang kannst du ja KompoZer nutzen, der hat ein css modul :wink: , läuft mit dieser Anleitung auch unter Ubuntu 14.10 und 15.04

Einen Kostenlosen Kurs wird im Forum auch angeboten.

Gruß
Camou !coffee


#19

Also für CSS braucht man sicher keine speziellen Programme, ein Texteditor reicht, und darunter hat man bei Linux ja reichlich Auswahl, ich verwende für XHTML, SVG, CSS, PHP etc meist Kate von KDE, gibt aber natürlich auch für Gnome welche oder unabhängig davon etwa emacs.

Wenn in dem Video mit einem CSS Grundkurs behauptet wurde, man braucht da spezielle Programme, so taugt das Video vermutlich nichts oder ist ein Werbevideo für eben dieses Programm oder wird von Microsoft gesponsort oder ähnliches. Kurzum, kann man vergessen.
Ob Videos so praktisch sind, um CSS etc zu lernen, wage ich ja auch mal zu bezweifeln, da
braucht man ja präzise Definitionen einerseits und Beispiele zur praktischen Anwendung andererseits, beides ist auch verschiedenen Gründen in einem Video praktisch nicht unterzubringen, kein zeitunabhängiger Zugriff auf den Inhalt, kaum möglich, Dateien anzuhängen, mit denen man herumspielen könnte, bedingt durch die Pixelgraphik zudem hauptsächlich ein Datenstrom mit irrelevanten Informationen, die vom Wesentlichen ablenken ;o)


#20

Danke Camou. Der KompoZer ist bei Ubuntu 14.04 nicht mehr im Softwarecenter. X.10 Versionen benutze ich nicht mehr weil die nur 8 Monate unterstützt werden. Bei 12.04 ist er drin, das weiß ich noch. Habe ihn bis vor einem Jahr noch benutzt. Ich könnte ihn mit sudo apt-get installieren. Wäre kein Problem.
Hallo hoffmann. Ich habe bis jetzt Gedit, Linux Standard, benutzt um meine Seiten zu bearbeiten weil Programme, egal welches, immer ihre Spuren hinterlassen. Kate habe ich auch im Softwarecenter.

danke für den Tipp. Dann sollte ich vielleicht die PDF – Version benutzen?
Bei diesem Video brauche ich Bluefish Editor.