• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Link ist falsch formatiert

GymBo b

GymBo b

New member
Hallo,
ich habe vorgestern mal eine neue Seite gebaut. Das Grundgerüsst steht (also großteils des Designs etc.) schon.

Mein Problem ist nur, dass hier der Test-Link seltsam vormatiert ist. Ich denke mal, dass das irgendwie von den Links im Menü kommt.

Ich habe schon versucht mit mehreren Klassen zu arbeiten...ohne wirklichen Erfolg. Es wäre natürlich möglich eine Klasse für die "normalen" Links zu machen (damit sind alle Links gemeint, die nicht im Menü sind)...wäre aber ziemlich umständlich!

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<h1>Startseite</h1>

<ul id="Navigation" class="menu">
  <li class="menu"><a href="?dir=start" class="menu">Startseite</a></li>

  <li class="menu"><a href="gb/index.php" class="menu">Gästebuch</a></li>
  <li class="menu"><a href="link-me.php" class="menu">Verlinken</a></li>
  <li class="menu"><a href="tell-a-friend.php" class="menu">Tell a Friend</a></li>
  <li class="menu"><a href="kontakt.php" class="menu">Kontakt</a></li>
  <li class="menu"><a href="?dir=test" class="menu">Test-Link</a></li>
</ul>

<div id="Info">
  <h2>Info-Box</h2>

  <p>Hier ist eine kleine Box, wo man z. B. News reinschreiben kann.<br>Man kann sie nat&uuml,rlich auch für eine kleine Beschreibung der Homepage, als zusätzliches menü o. ä verwenden.</p>
</div>

<div id="Inhalt">

<h2>Test</h2>
<p>Test-Dokument</p>
<p><a href="#">Test-Link</a></div>

<p id="Fusszeile">© by GymBo b</p>

</body>
</html>
Das ist der HTML-Code der Seite (in vereinfachter Version)

Und die style.css:
Code: 
<!--
  body, p a {
    color: black; background-color: #FFCC00;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }

  h1 {
    font-size: 1.5em;
    margin: 0 0 0.7em; padding: 0.3em;
    text-align: center;
    background-color: #FA9805;
    border: 2px ridge #0A0A0A;
    color: #FFFFFF;
  }
  html>body h1 {
    border-color: #0A0A0A;  /* Farbangleichung an den Internet Explorer  */
  }

  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 0px;
    cursor: crosshair;
vertical-align:middle; line-height:2em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold; height: 2em;
  }
  ul#Navigation a.menu:link {
    color: #000000; background-color: #FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }
  ul#Navigation a.menu:visited {
    color: #000000; background-color: #FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }
  ul#Navigation a.menu:hover {
    color: #FFFFFF; background-color: #222222; cursor: crosshair;
  }
  ul#Navigation a.menu:active {
    color: #FFFFFF; background-color: FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }

  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #DDDDDD; border: 1px dashed #0A0A0A;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }

  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed #0A0A0A;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #FA9805; border: 1px solid #0A0A0A; color: #FFFFFF;
  }
-->
Hierbei müsste der Teil wichtig sein:
Code: 
  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 0px;
    cursor: crosshair;
vertical-align:middle; line-height:2em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold; height: 2em;
  }
  ul#Navigation a.menu:link {
    color: #000000; background-color: #FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }
  ul#Navigation a.menu:visited {
    color: #000000; background-color: #FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }
  ul#Navigation a.menu:hover {
    color: #FFFFFF; background-color: #222222; cursor: crosshair;
  }
  ul#Navigation a.menu:active {
    color: #FFFFFF; background-color: FFBE00; cursor: crosshair; border: 1px dashed #000000;
  }


Also meine Frage: was muss ich beim CSS ändern, dass ich den Test-Link (rechts) richtig formatieren kann?
 
Hi GymBo b!

[ot]Lange nich gesehen! Haste zum Geburtstag ordentlich auf die Wurst gehauen? Hatte abends angerufen, aber da warste schon fast im Nirvana.[/ot]

Spiel mal mit sowas 'rum:
#Inhalt a{padding:0;}

Liebe Grüße vom fiesen Onkel und Ahoi - Pit

P.S.: Respekt, Du machst galoppmäßige Fortschritte!
 
pit-r schrieb:
Hi GymBo b!

[ot]Lange nich gesehen! Haste zum Geburtstag ordentlich auf die Wurst gehauen? Hatte abends angerufen, aber da warste schon fast im Nirvana.[/ot]
Zum Vergrößern anklicken....
Ja...mir wurde erzählt, dass du angerufen hast :)
Der Geburtstag war richtig cool...wurder auch reich beschenkt :cool:

Spiel mal mit sowas 'rum:
#Inhalt a{padding:0;}
Zum Vergrößern anklicken....
Danke...geht :D

P.S.: Respekt, Du machst galoppmäßige Fortschritte!
Zum Vergrößern anklicken....
Danke :) Ich habe sogar meine ziemlich unfähige Mutter etwas in HTMl eingeweit! Die ist jetzt offizielle Homepageverwalterin ihrer Schule :D

Und Gruß zurück...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben