Frage Link in Linkbox mittig anordnen klappt nicht

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anorica

Neues Mitglied
3 November 2017
3
0
1
22
Hallo,

ich bin dabei eine Website mit html5 zu erstellen (möglichst ohne CSS) und habe eine Art Navigationsleiste erstellt, indem ich eine Tabelle gemacht habe und die verschiedenen Links zu den anderen Seiten jeweils in eine Zeile gemacht habe (also ist die Tabelle eine lange Spalte mit zehn Zeilen).

Da ich aber wollte, dass man die komplette Zelle anklicken kann habe ich folgenden Tag benutzt:

<a href="*link*" style="display:block; width:120px; height:40px"> *link* </a>

Jetzt habe ich leider das Problem, dass der Link nicht mehr in der Mitte der Zelle steht sondern oben. Ich habe es mit valign="middle" versucht aber ganz egal wo ich es einfüge es tut sich nichts.

Den Link kann man aber immer hin in der ganzen Box anklicken.

Ich hoffe sehr mir kann hier jemand helfen, und bin jetzt schon für jede Antwort dankbar :)
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Lustigerweise benutzt du bereits CSS.
In einem style-Attribut stehen immer CSS-Attribute.
Das einzige was du machst, ist (unpraktischerweise) das CSS inline reinzuschreiben, anstatt in externe Files oder style Tags.
 

Anorica

Neues Mitglied
3 November 2017
3
0
1
22
Danke, dass mit dem padding hat mir schon mal sehr geholfen aber weil ich manche Spalten mit nur einem Wort drin habe und andere in denen zwei Worte (gewollt) untereinander stehen müsste ich zwei verschiedene Abständ haben. Ich bin leider noch Anfänger und hab keine Ahnung, wie ich das umsetzen kann :oops:

Ich hoffe ihr versteht meine Frage :D
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Mit Flexlayout ist das vertikale Zentrieren kein Problem mehr. Verwende dieses CSS für das Element, das deinen Link umgibt, also wahrscheinlich das td-Element:
Code:
<td style="display: flex; align-items: center; justify-content: center;" ..

Ich empfehle, dich über die verschiedenen Möglichkeiten zu informieren, wie man CSS einbindet:
https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS

Und: Tabellen für Layoutzwecke zu verwenden ist veraltet. Informiere dich besser über Flex-Layout:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
  • Like
Reaktionen: Anorica

Sailor

Aktives Mitglied
14 Juli 2017
512
67
28
Ich traue es mich fast nicht zu sagen... aber ohne CSS wirst du nichts!!
In diesem Fall (1 Wort oder 2 Worte in 2 Reihen) musst du 2 unterschiedliche CSS Klassen definieren... in einem externen oder internen Stylesheet.
Intern geht so (in den <head> </head> Bereich einfügen:
Code:
<style>
  .einWort {
     padding-top: 20px;
     padding-bottom: 20px;
   }
  .zweiWorte {
     padding-top: 10px;
     padding-bottom: 10px;
   }
</style>
Die Pixelwerte (px) musst du noch nach deinen Bedürfnissen anpassen.

Und dann vergibst du diese Klasse jeweils dem Element, wie es benötigt wird...
zB
<a href="*link*" class="einWort" style="display:block; width:120px; height:40px"> *link* </a>
Du kannst und solltest deine anderen Style-Anweisungen, die ja jetzt noch im HTML Tag enthalten sind, auch in die class-Definition hineinschreiben.
Code:
  .einWort {
     padding-top: 20px;
     padding-bottom: 20px;
    display: block;
    width: 120px;
    height: 40px;
   }
Dann würde dein Link Tag so aussehen:
<a href="*link*" class="einWort"> *link* </a>

Bitte beachten! Bei der Definition des Klasse im <style></style> wird ein . (Punkt) vor den Klassennamen gesetzt (ohne Leerzeichen dazwischen) - im HTML Tag wird dann aber class="einWort" ohne den Punkt eingetragen.

Na ja... aber wenn du kein CSS magst ;)!
 
  • Like
Reaktionen: Anorica

Anorica

Neues Mitglied
3 November 2017
3
0
1
22
Danke für die Antworten, hat mir echt weiter geholfen! :)

Es ist nicht so, dass ich kein CSS mag, aber unser Prof ist echt streng wenns um CSS geht und wenn da nur der kleinste Fehler drin ist bekommt man Punkte abgezogen und da ich mich erst seit zwei Wochen überhaupt mit Websiten erstellen beschäftige hab ich micht das noch nicht so ganz getraut. Aber da es wohl nicht anders geht werd ich mich dann doch mal an CSS setzen :D

Nochmal danke an alle Antworten :)
Ich wünsch euch noch nen schönen Tag :)