Register Navigation springt bei Mouseover

[inservo]

Hallo zusammen,

ich bin gerade dabei, ein von Dreamweaver mitgeliefertes Layout anzupassen. JEtzt habe ich mittels einer ungeordneten Liste eine Registernavigation erstellt, was auch soweit passt. Allerdings tauchen jetzt zwei Fragen auf, die ich irgendwie nicht lösen kann (Suchen habe ich schon funktioniert, aber offenbar verwende ich die falschen Suchbegriffe):

1. Ich möchte jede Registerkarte in der gleichen Breite haben
2. Bei a:hover wird der linke "1px solid black" Rand, "3px solid black". Soweit so gut aber dabei springt der ganze Inhalt nach rechts.

Hat jemand eine Idee, wie ich das abstellen bzw. eine feste Breite einstellen kann?

Danke schonmal vorab!

[zulujaner]

Hallo inservo,

also ohne deinen Quellcode zu sehen kann man nur "kluge" Ratschläge geben.

Wenn das Menü beim hovern breiter wird, würde ich den Ausgangszustand, also den normalen Link, schon auf die breite wie beim hovern setzen.

Also den normalen Link plus 2pixel mehr. Dann sollte sichs ausgleichen.
Kommt natürlich drauf an wie der Hover Effekt angewendet wird.

Also nen Quelltext wäre nicht schlecht...


Grüsse zulujaner

[inservo]

Hallo Zulujaner,

das ist leider genau mein Problem. Die Breite der Register orientiert sich offensichtlich an dem Inhalt, sprich an den Links. Ich vermute, wir reden jetzt hier über Basics, aber irgendwie komme ich trotzdem nicht weiter. Hier ist der Quellcode.

Hier der XHTML-Code:

<div id="navigation">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Team</a></li>
   </ul>
</div>

Hier ist der CSS-Code:

.thrColLiqHdr #navigation {
	background-color:#3c2201;
	color:#FF0000;
}

.thrColLiqHdr #navigation ul {
	list-style:none;
}

.thrColLiqHdr #navigation li {
	display:inline;
}

.thrColLiqHdr #navigation a {
	padding: 5px 5px 0 5px;
	text-decoration:none;
	background-color: #FFFFFF;
	color:#000000;
	border-left:1px solid black;
	border-top: 1px solid black;
	border-right: 1px solid black;
	width:120px;
}

.thrColLiqHdr #navigation a:hover, a:focus {
	border-left:3px solid black;
}

Wundert Euch bitte nicht über die Klasse ".thrColLiqHdr", die wird von Dreamweaver mitgegeben, da es sich um ein "vordefiniertes" Layout handelt.

[zulujaner]

Hallo inservo,

ja so geht das nicht. Bei Inline Elementen kannst du keine Breite zuordnen. Dieser Wert wird ignoriert. Macht ja auch keinen Sinn bei Fliesstext zu sagen wie Breit er sein soll.

Als Lösung würde ich sagen wenn du nen Effekt haben möchtest. Mach beide linken Ränder gleich breit. Entweder 1px oder 3px. Beim hover änderst dann nur die Farbe des linken Randes und fertig ist die Geschichte.
Bei der Methode springt dann nix mehr hin und her.

.thrColLiqHdr #navigation a {
	padding: 5px 5px 0 5px;
	text-decoration:none;
	background-color: #FFFFFF;
	color:#000000;
	border-left:3px solid red;
	border-top: 1px solid black;
	border-right: 1px solid black;
}

.thrColLiqHdr #navigation a:hover, a:focus {
	border-left:3px solid black;
}

Andere Möglichkeit wäre alles in Blockelemente zu ändern und die über float in einer Zeile anordnen zu lassen.
Bei Blockelementen kannst du dann auch ne Breite angeben. Weis jetzt nicht ob das den Aufwand rechtfertigt...

Grüsse zulujaner

[inservo]

Hallo zulujaner,

danke für Deine Antwort. Ich hatte schon fast vermutet, dass es sich hier um fehlendes Grundlagenwissen meinerseits handelt

Habe es jetzt, wie Du beschrieben hast, mit 3px solid black als Standardzustand gelöst, der sich dann bei Mouseover in 3px solid red ändert.

Danke nochmals...

i.

[mogidala]

evtl könnte man auch beim normalzustand ein padding von 2px hinzugeben (padding+rahmen=3px), beim hovern das padding dann weg und dafür den rahmen dicker.