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

Wie alle Links im Menü gleich lang machen?

bigvik

bigvik

Neues Mitglied
Hallo Gemeinde,

ich murkse gerade etwas mit CSS herum, und komme an einer Stelle nicht weiter.

Ich frage mich, wie ich dafür sorge, dass ALLE Links so lang sind wie "Link Nummer Zwei".

Für Vorschläge und Ideen (aber auch gerne andere Tipps zu meinem Code) bin ich sehr dankbar!

Hier der HTML-Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Testseite</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" type="text/css" href="standard.css" />
  </head>
  <body>
    <ul class="menu">
      <span class="linkspan"><li><a href="http://www.google.de/">Link Nummer Eins</a></li></span>
      <span class="linkspan"><li><a href="http://www.google.de/">Link Nummer Zwei_ei</a></li></span>
      <span class="linkspan"><li><a href="http://www.google.de/">Link Nummer Drei</a></li></span>
      <span class="linkspan"><li><a href="http://www.google.de/">Link Nummer Vier</a></li></span>
    </ul>
    </body>
</html>
und hier der CSS-Code:

Code: 
body {
  background-color: #FFFF99;
}

.menu {
  margin: 30px;
  padding: 30px;
  background-color: #FFCC00;
  width: 300px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
}


.linkspan {
    padding: 5px;
    
}

  
a {
    background-color: #FFFF99;
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    margin: 3px;
    padding: 3px 6px 3px 6px;
    border: 2px;
    border-style: outset;
    border-color: black;
}

a:link {
  text-decoration: none;
  color: #DD0000;
}

a:hover {
  text-decoration: none;
  background-color: #DD0000;
  color: #FFFF99;
  border-style: inset;
  border-color: black;
}
Beste Grüße, der Vik :)
 
Zuletzt bearbeitet:
Donnerwetter. So schnell hatte ich nicht mit einer Antwort gerechnet, sonst hätte ich gestern nochmal reingeschaut. Wie dem auch sei, danke für die schnelle Antwort! :)

efwe schrieb:
.linkspan {
padding: 5;

was fuenf?
gruss
Zum Vergrößern anklicken....

Ups, sorry. Ich meine natürlich px. Ist mir nicht aufgefallen, weil mein Firefox den Fehler toleriert hat.

efwe schrieb:
eine feste breiteden links geben?:shock:
Zum Vergrößern anklicken....

Gute Idee! ;)

In welchem Element und mit welchen Befehlen? Ich bin leider wirklich überfordert damit!

Danke für alle Antworten, der Vik
 
HTML: 
<ul class="menu">
      <li><a href="http://www.google.de/">Link Nummer Eins</a></li>
      <li><a href="http://www.google.de/">Link Nummer Zwei_ei</a></li>
      <li><a href="http://www.google.de/">Link Nummer Drei</a></li>
      <li><a href="http://www.google.de/">Link Nummer Vier</a></li>
    </ul>
CSS:
Code: 
.menu {
  margin: 30px;
  padding: 30px;
  background-color: #FFCC00;
  width: 300px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
}


ul.menu li{
    padding: 5px;
width:50px; // feste Breite
}

Brauchst also kein Span drum herummachen.
 
Zuletzt bearbeitet:
Danke für die Antwort!

Bei mir sind die Links leider trotzdem unterschiedlich lang (auch wenn ich die Spans aus dem HTML rausnehme und die Span-Anweisung im CSS auskommentiere).

Ich habe jetzt in einer Vorlage ein Link-Menü gefunden, dass nicht als Liste sondern als Tabelle aufgezogen ist. Damit werde ich jetzt mal experimentieren.

Gruß, der Vik :)
 
Nimm dafür keine Tabelle.
Liste ist schon richtig und mit width:; bist du schon ziemlich nah am Ziel.

Alle Links sind trotz width:50px; unterschiedlich lang?
Passen die Links überhaupt in 50px? Hast du den Wert erhöht?
Passt alles abgesehen davon, dass die "Links" (du meinst li?) ungleich lang sind?

Oder meinst du, dass die Links tatsächlich gleich lang sein sollen, auch wenn eines mehr Zeichen hat, indem die Schriftgröße bei dem längeren Link kleiner ist?
Das wäre Schwachsinn.


Vorschau:links.png
HTML: 
<style type="text/css">
.menu {
  margin: 30px;
  padding: 30px;
  background-color: #FFCC00;
  width: 300px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  list-style-type:none;
}


ul.menu li{
    padding: 5px;
    width: 150px;
}
</style>
</head>

<body>
<ul class="menu">
      <li><a href="http://www.google.de/">Link Nummer Eins</a></li>
      <li><a href="http://www.google.de/">Link Nummer Zwei_ei</a></li>
      <li><a href="http://www.google.de/">Link Nummer Drei</a></li>
      <li><a href="http://www.google.de/">Link Nummer Vier</a></li>
    </ul>
Wobei du der li kein width zuweisen müsstest, wenn die Links nicht größer als ul.menu width sind!?


Edit: Achso, sorry! -.- Warte mal.

Das geht mit display:block; oder einfacher mit einem Hintergrundbild.

Hier ein Beispiel.
Sorry für meine vielen Edits. :D

Oder mit meinem Durcheinander:
Code: 
.menu {
  margin: 30px;
  padding: 30px;
  background-color: #FFCC00;
  width: 300px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  list-style-type:none;
}

ul.menu li {
    padding: 5px;
    display: block;
    width: 250px;
    border: 2px;
}

ul.menu li a {
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    margin: 3px;
    padding: 3px 6px 3px 6px;
    border-style: outset;
    border-color: black;
    background-color: #FFFF99;
}

ul.menu li a:hover {
  text-decoration: none;
  background-color: #DD0000;
  color: #FFFF99;
  border-style: inset;
  border-color: black;
}
 
Zuletzt bearbeitet:
Ich empfehle es so zu machen:
Code: 
<ul>
 <li><a href="index.htm">Home</a></li>
 <li><a href="about.htm">Über uns</a></li>
 …
</ul>
mit folgendem CSS:
Code: 
li a {
 width:50px;
 display:block;
 background:#f60;
 color:#fff;
}
So sind die Links auch über die ganze Breite der Menüpunkte klickbar.

Grüße
 
Ich danke Euch für Eure Antworten! :)

Bitte entschuldigt, dass ich mich erst jetzt melde, aber ich hatte die letzten Tage partout keine Zeit und Nerven um in's Netz zu schauen - lediglich meine Mails habe ich abgerufen.

Gruß, Vik
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben