Jürgen Linder: Anker nebeneinander

SELF-Forum

Anker nebeneinander

Jürgen Linder Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

hallo,

ich habe mehrere Anker im Programm. Aber ich bekomme sie nicht nebeneinander. Die stehen immer untereinander und ich weiß nicht warum (kein <br> im Programm).

Code:

<html>
<head>
<style>
<!--
a.menu { display:block; margin-bottom:5px; text-align:center; width:250px;
         border-style:ridge; border-width:3px; padding:2px;
         text-decoration:underline; font-family: Arial Black;
         font-weight: bold; font-size: 24px; text-align: left;
         color: rgb(0,255,0); background-color: rgb(50,50,50);}
a.menu:link    { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:visited { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:hover   { color: rgb(255,0,0); background-color: rgb(255,255,255); }
a.menu:active  { color: rgb(0,255,0); background-color: rgb(50,50,50); }
-->
</style>
</head>

<body bgcolor=#FFFFFF>

  <a class="menu" href="Nachrichten.php"><center>Nachrichten</center></a>
  <a class="menu" ref="Gruppen.html"><center>Gruppen</center></span></a>
  <a class="menu" href="Mitgliedsantrag.html">
    <center>Mitgliedsantrag</center></a>
  <a class="menu" href="Kontakt.html"><center>Kontakt</center></a>
  <a class="menu" href="Impressum.html"><center>Impressum</center></a>
</Body>
</html>

Kann mir da jemand mit einem Tip helfen?

Danke und Gruß
Jürgen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Anker nebeneinander

    robertroth
    +1 Informationen zu den Bewertungsregeln

    Liebe Mitdenker, liebe Wissende, liebe Neugierige,

    ich habe mehrere Anker im Programm. Aber ich bekomme sie nicht nebeneinander. Die stehen immer untereinander und ich weiß nicht warum (kein <br> im Programm).

    display: block -> display: inline-block

    oder ganz weglassen und als normale Inline-Elemente behandeln.

    Code:

    <html>
<head>
<style>
<!--
a.menu { display:block; margin-bottom:5px; text-align:center; width:250px;
         border-style:ridge; border-width:3px; padding:2px;
         text-decoration:underline; font-family: Arial Black;
         font-weight: bold; font-size: 24px; text-align: left;
         color: rgb(0,255,0); background-color: rgb(50,50,50);}
a.menu:link    { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:visited { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:hover   { color: rgb(255,0,0); background-color: rgb(255,255,255); }
a.menu:active  { color: rgb(0,255,0); background-color: rgb(50,50,50); }
-->
</style>
</head>

<body bgcolor=#FFFFFF>

  <a class="menu" href="Nachrichten.php"><center>Nachrichten</center></a>
  <a class="menu" ref="Gruppen.html"><center>Gruppen</center></span></a>
  <a class="menu" href="Mitgliedsantrag.html">
    <center>Mitgliedsantrag</center></a>
  <a class="menu" href="Kontakt.html"><center>Kontakt</center></a>
  <a class="menu" href="Impressum.html"><center>Impressum</center></a>
</Body>
</html>

    Kann mir da jemand mit einem Tip helfen?

    Danke und Gruß
    Jürgen

    Spirituelle Grüße
    Euer Robert
    robert.r@online.de

    --
    Möge der wahre Forumsgeist ewig leben!
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

  2. Anker nebeneinander

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Jürgen Linder

    ich habe mehrere Anker im Programm. Aber ich bekomme sie nicht nebeneinander. Die stehen immer untereinander und ich weiß nicht warum (kein <br> im Programm).

    Deshalb:

    <!--
a.menu { display:block; … }

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Anker nebeneinander

    Der Martin
    +2 Informationen zu den Bewertungsregeln

    Moin,

    ich habe mehrere Anker im Programm. Aber ich bekomme sie nicht nebeneinander. Die stehen immer untereinander und ich weiß nicht warum (kein <br> im Programm).

    die Antwort steht gleich in der erten Regel deines Stylesheets: display:block für a.menu. Damit machst du die Links zu Blockelementen. Das ist offensichtlich nicht das, was du willst. Meinst du vielleicht display:inline-block?

    Aber auch sonst ist dein Code stark verbesserungswürdig:

    <html>

    DOCTYPE-Deklaration fehlt.

    <head>
<style>
<!--

    Ein HTML-Kommentar im Stylesheet? Das stammt bestimmt aus einem Museum. Das hat man "früher" mal gemacht, als es noch Browser gab, die das style-Element nicht kannten. Weg damit.

    <style>
<!--
a.menu { display:block; margin-bottom:5px; text-align:center; width:250px;
         border-style:ridge; border-width:3px; padding:2px;
         text-decoration:underline; font-family: Arial Black;
         font-weight: bold; font-size: 24px; text-align: left;
         color: rgb(0,255,0); background-color: rgb(50,50,50);}
a.menu:link    { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:visited { color: rgb(0,255,0); background-color: rgb(50,50,50); }
a.menu:hover   { color: rgb(255,0,0); background-color: rgb(255,255,255); }
a.menu:active  { color: rgb(0,255,0); background-color: rgb(50,50,50); }
-->
</style>
</head>

    Breitenangaben in px sind mehr und mehr problematisch, denk an die Vielfalt an Geräten und deren unterschiedliche Interpretation von Pixeln. Aähnliches gilt für die festzementierte Schriftgröße in px, und für font-family fehlt eine generische Ersatzschriftart, hier also Sans-Serif. Der Fontname Arial Black muss übrigens wegen des Blanks in Anführungszeichen gesetzt werden.
    Und meinst du, es sei eine gute Idee, besuchte und unbesuchte Links gleich zu stylen? Du nimmst dem Besucher damit ein Orientierungsmerkmal.

    <body bgcolor=#FFFFFF>

    Was soll das? Angaben zur Gestaltung bitte ins Stylesheet.

      <a class="menu" href="Nachrichten.php"><center>Nachrichten</center></a>
  <a class="menu" ref="Gruppen.html"><center>Gruppen</center></span></a>
  <a class="menu" href="Mitgliedsantrag.html">
    <center>Mitgliedsantrag</center></a>
  <a class="menu" href="Kontakt.html"><center>Kontakt</center></a>
  <a class="menu" href="Impressum.html"><center>Impressum</center></a>
</Body>
</html>

    Angaben zur Gestaltung (center) bitte ins Stylesheet. Davon abgesehen bietet es sich an, die Links in ein Containerelement zu gruppieren, entweder eine Liste (ul) oder auch ein nav-Element. Dann braucht auch nicht jedes a-Element eine Klasse, sondern nur das Containerelement (vielleicht nicht einmal das, wenn du nur ein nav-Element im Dokument hast).

    So long,
     Martin

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Anker nebeneinander

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Der Martin

      Aber auch sonst ist dein Code stark verbesserungswürdig:

      <html>

      DOCTYPE-Deklaration fehlt.

      Nicht nur die. Im html-Element sollte die Sprache angegeben werden, hier also

      <!DOCTYPE html>
<html lang="de">

      Außerdem fehlt im head das title-Element.

      Davon abgesehen bietet es sich an, die Links in ein Containerelement zu gruppieren, entweder eine Liste (ul) oder auch ein nav-Element.

      Wobei das Oder hier nicht exclusiv ist. Soll heißen beides ist möglich: a in li in ul in nav.

      Dann braucht auch nicht jedes a-Element eine Klasse, sondern nur das Containerelement (vielleicht nicht einmal das, wenn du nur ein nav-Element im Dokument hast).

      Wie ich schon sagte.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Anker nebeneinander

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Gunnar Bittersmann

        Außerdem fehlt im head das title-Element.

        Nicht nur das.

        Im head sollte als allererstes die Zeichencodierung angegeben werden.

        Außerdem sollte in einem neu erstellten Dokument

        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        nicht fehlen. Natürlich nachdem die von Dem Martin angemängelten Breitenangaben entfernt wurden.

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Anker nebeneinander

          robertroth
          +1 Informationen zu den Bewertungsregeln

          Liebe Mitdenker, liebe Wissende, liebe Neugierige,

          Außerdem sollte in einem neu erstellten Dokument

          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

          nicht fehlen. Natürlich nachdem die von Dem Martin angemängelten Breitenangaben entfernt wurden.

          was muss ich denn da angeben, wenn ich das Verkleinern der Ansicht nicht unterbinden will?

          Spirituelle Grüße
          Euer Robert
          robert.r@online.de

          --
          Möge der wahre Forumsgeist ewig leben!
          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln

          1. Anker nebeneinander

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@robertroth

            Außerdem sollte in einem neu erstellten Dokument

            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

            nicht fehlen. Natürlich nachdem die von Dem Martin angemängelten Breitenangaben entfernt wurden.

            was muss ich denn da angeben, wenn ich das Verkleinern der Ansicht nicht unterbinden will?

            Was meinst du mit „da“? Bei <meta name="viewport" content="width=device-width, initial-scale=1.0"/> wird nichts unterbunden.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Anker nebeneinander

          Orlok
          +1 Informationen zu den Bewertungsregeln

          Hallo,

          Außerdem sollte in einem neu erstellten Dokument

          <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

          nicht fehlen. […]

          AFAIK ist hier wenigstens eine Angabe überflüssig:

          Wird für width der Wert device-width angegeben, ist 1.0 der Defaultwert für initial-scale.

          „It is worth pointing out here that once one of the values for viewport width, height or initial scale is set, the browser will automatically infer values for the properties that are not set. For example, when setting the width to device-width, the initial scale value is automatically considered to be 1, and vice versa. It is only when you want to use a non-inferred value that it makes sense to set more than one property.“ - Opera

          „The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.“ - Mozilla

          Die Quellenlage ist aber zugegebenermaßen recht dünn...

          Gruß,

          Orlok

          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln