Text in Nav. springt (wegen fettem current state)

[Yapyap]

Hallo Forum,

ich habe folgendes Problem: in meiner listenbasierten horizontalen
Subnavigation hätte ich gerne den aktiven Link fett, damit man sieht, wo
man sich gerade befindet. Also einen current state indicator.

Wie das geht, ist kein Problem, und auch wie ich das in Templates
integriere, weiß ich mittlereile. Nun stelle ich aber fest, dass durch die fette
Schrift des current states die Links rechts davon (nach rechts) springen. Ist
ja eigentlich auch ganz logisch. Ich suche nun eine Lösung ohne Springen,
bei der gleichzeitig noch gewährleistet ist, dass alles möglichst flexibel
bleibt und sich das Layout anpassen kann, wenn der Benutzer z. B. den
Schriftgrad verstellt.

Vielen Dank für eure Tipps!

Liebe Grüße
Peter

[Laus]

Hallo Peter

Nun stelle ich aber fest, dass durch die fette
Schrift des current states die Links rechts davon (nach rechts) springen.

Da du keinen Link angegeben hast wo man dies sehen und nachvollziehen kann mal ganz allgemein. Hast du die Links einfach aneinander gefügt oder ist dazwischen noch genügend Platz für eine feste Breite der Links. Versuch mal ihnen ein

Code: Alles auswählen

width: passende länge em; height: passende hohe em;

zuzuweisen dann dürften sich eigentlich die nachfolgenden Links nicht mehr verschieben und durch die Angabe in em müsste auch die Flexibilität gewährleistet bleiben.

Gruß Xaver

[Yapyap]

Hallo Xaver,

vielen Dank für deine Antwort!

An sich löst das schon das beschriebene Problem, aber ich habe etwas
vergessen zu erwähnen: die Links sollen gleiche Zwischenabstände haben,
wenn ich sie aber in eine Box mit fester Größe setze, ist das nicht mehr
gegeben.
Die Links sitzen alle horzontal in einer Reihe und haben einen gemeinsamen
Hintergrund, so dass es komisch aussieht, wenn sie alle den gleichen Platz
einnehmen, egal, wie lang die Worte sind.

Aber: ich habe es über das Design gelöst, und zwar sind die Links jetzt
alle grau und bold, und der jeweils aktive schwarz.

Liebe Grüße
Peter

[AndréM]

Hallo Peter
nimm doch einfach 2 Tabellen in der ersten Tabelle erstellst du deinen Link und definiert ihn exakt über CSS in der zweiten Tabelle fügst du dein Link ein und definiert da über CSS den gewünschten Abstand.

Untereinander:

Code: Alles auswählen

<table id="table2">
  <tr>
    <td>
      <table id="table1">
        <tr>
          <td></td>
        </tr>
       </table>

    </td>
  </tr>
  <tr>
    <td>
      <table id="table1">
        <tr>
          <td></td>
        </tr>
      </table>
   </td>
  </tr>
</table>


Nebeneinander:

Code: Alles auswählen

<table id="table2">
  <tr>
    <td>
      <table id="table1">
        <tr>
          <td></td>
        </tr>
       </table>
     </td>
     <td>
       <table id="table1">
         <tr>
           <td></td>
         </tr>
       </table>
      </td>
     </tr>
    </table>


der Css Code könnte dann so aussehen, die einzelnen Menüs etc kannste dann nach deinen Wünschen anpassen.

Code: Alles auswählen

#table1 a , #table1 a:visited , #table1 a:active {display:block;
background-color:#CC3333;
color:#EFE3BA;
text-decoration:none ;
font: normal 12px tahoma;
line-height:14px;
text-decoration:none ;
padding: 0px 5px 0px 5px;
text-align:left;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
width: passende länge em; height: passende hohe em;
}

#table1 a:hover{
background-color:#A2143B;
color:#FFFF00;
text-decoration:none ;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
width: passende länge em; height: passende hohe em;
}



Bei beiden Inneren Tabellen wie oben von Laus beschrieben darauf auchten das die Tabelle groß genug für deinen Link ist damit er sich nicht mehr verschiebt.

Edit: Mir ist da gerade noch etwas eingefallen

Kannst natürlich auch die erste Tabelle (table1) wie oben unter CSS festlegen und den Zwischenraum immer einzeln in HTML schreiben (<td width="10">) und für die Tabelle table2 legst du dann in CSS nur den Hintergrundfest. Dürfte beides möglich sein.

Code: Alles auswählen

<table id="table2">
  <tr>
    <td>
      <table id="table1">
        <tr>
          <td></td>
        </tr>
       </table>
     </td>
     <td width="10">
     </td>
     <td>
      <table id="table1">
        <tr>
          <td></td>
        </tr>
       </table>
     </td>
     </tr>
    </table>


Grüße André

[Yapyap]

Hallo André,

danke für deine Mühe, das ist sehr nett!

Ich muss mir das später mal anschauen, was da genau
passiert, zurzeit bin ich bei etwas ganz anderem und muss mich
etwas sputen und erst mal weiterkommen.

Grundsätzlich bin ich aber bei den verschachtelten Tabellen etwas
skeptisch, da ich diese für Layout-Zwecke nicht mehr verwenden
möchte und das Markup möglichst logisch strukturiert, barrierefrei
und vor allem flexibel und "bulletproof" halten will.
Kann aber auch sein, dass es das trotz der Tabellen ist, so gut kann
ich das im Moment nicht beurteilen und werde es mir auf jeden Fall
noch anschauen.

Liebe Grüße
Peter

[AndréM]

Man könnte das ganze auch noch in eine if abfrage oder case anweisung packen. Nehmen wir mal an das die Standartgröße für die schrift 10 ist und dein besucher möchte diese erhöhen auf 12, 14, 16 oder auch 18, dann fügst du halt immer unterschiedliche css dateien oder HTML Tamples ein. Vorteil dabei wäre dein design wäre immer so wie du es haben möchtest, den so 100%ig dynaisch bekommt man das design nicht das es bei allen schriftgrößen immer gleich gut aussieht. Poste einfach mal dein Link wenn du dein Problem wieder bearbeitest und nicht weiterkommst. Ansonsten hoffe ich mal das ich dir ein paar Anregungen geben konnte.

Grüße André