IPB

Willkommen, Gast ( Anmelden | Registrierung )

 
Reply to this topicStart new topic
> Hüpfendes Menu, Fett - Schmal - Fett - Schmal
Andreas
Beitrag 20.07.2006 - 13:33
Beitrag #1


____________________
Gruppensymbol

Gruppe: Admin
Beiträge: 1.220
Mitglied seit: 20.10.2001
Mitglieds-Nr.: 3



Hi,

bei der Bastelei an http://web209.can12.de/spa30/home.php bin ich nun an einem weiteren Problem angelangt. Das Menu oben "springt". Warum ist mir klar, die Links werden durch die gehoverte Fettschrift breiter. Mit folgendem Code kann ich das Ganze auch beruhigen, aber es ist nicht so, wie ich mir die Geschichte vorstelle. Schöner wäre, wenn der Abstand zwischen den Links fix wäre.

Hat jemand dafür schon mal 'ne Lösung gebastelt? Alles was mir einfällt, klappt immer nur mit festen Höhen oder wahlweise Breitenangaben :-/

HTML
/* Hier kommt der Code für das Menu oben */
#menu_oben ul {
text-align: center;
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 5px 0px 5px 0px;
}

#menu_oben li
{
display: inline;
width: 85px;
text-align: center;
margin: 0px 5px 0px 5px;
}

#menu_oben li a
{
padding: 1px 0px 1px 5px;
color: #ffffff;
text-decoration: none;
border-left: 2px solid #ffffff;
}

#menu_oben li a:hover
{
font-weight: bold;
color: #ffffff;
font-size: 90%
}

#menu_oben li a#current
{
font-weight: bold;
font-size: 90%;
}


Nachtrag: die 90% habe ich eingefügt, weil ansonsten der Contentbereich beim Hovern rauf und runter springt. Ansonsten finde ich die Fettschrift als Hovereffekt gut, aber es ist immer so blöd zu basteln.

Gruß

Andreas - langsam darf's ruhig mal regnen!
Go to the top of the page
 
+Quote Post
Auge
Beitrag 20.07.2006 - 16:07
Beitrag #2


Anwärter auf W3.org Mitgliedschaft
*****

Gruppe: User
Beiträge: 550
Mitglied seit: 28.11.2001
Wohnort: Berlin Friedrichshain
Mitglieds-Nr.: 107



ZITAT(Andreas @ 20.07.2006 - 14:33) *
bei der Bastelei an http://web209.can12.de/spa30/home.php bin ich nun an einem weiteren Problem angelangt. Das Menu oben "springt". Warum ist mir klar, die Links werden durch die gehoverte Fettschrift breiter. Mit folgendem Code kann ich das Ganze auch beruhigen, aber es ist nicht so, wie ich mir die Geschichte vorstelle. Schöner wäre, wenn der Abstand zwischen den Links fix wäre.

Hat jemand dafür schon mal 'ne Lösung gebastelt? Alles was mir einfällt, klappt immer nur mit festen Höhen oder wahlweise Breitenangaben

Um (zumindest) feste Breitenangaben wirst du nicht herumkommen. Allerdings müsstest diese den Links verpassen, denn nachdem du <li> zum Inlineelement gemacht hast, reagiert es nicht auf deine Breitenzuweisung. Das tut <a> allerdings auch nicht, außer man macht es mit display:block; oder mit float:...; zum Blockelement, womit eventuell benutzte Farbänderungen bei :hover, :focus, :active sich auf die gesamte angegebene Breite des Links auswirken würden.

Grundsätzlich kannst du dich mal auf Listamatic umschauen. Dort werden -zig Beispiele für die CSS-Formatierung von vertikalen als auch horizontalen Navigationslisten gezeigt.

ZITAT(Andreas @ 20.07.2006 - 14:33) *
Nachtrag: die 90% habe ich eingefügt, weil ansonsten der Contentbereich beim Hovern rauf und runter springt. Ansonsten finde ich die Fettschrift als Hovereffekt gut, aber es ist immer so blöd zu basteln.

Auch wenn du Fettschrift zum hovern "nett" findest (incl. dem damit verbundenen Herumdoktorn an den Schriftgrößen), solltest du überlegen andere "Markierungen" einzusetzen. Das Springen wird mit dem Wechsel von Normal- zu Fettschrift zwangsläufig bleiben. Da du sowieso mit einem 2px breiten border-left arbeitest, kannst du den und/oder die Hintergrund- und Schriftfarbe oder ein Hintergrundbild ändern.

Übrigens:
- Der eventuelle Versuch, z.B. mit li:hover zu arbeiten, scheitert an der ungenügenden Unterstützung von :hover durch den MSIE, der das nur auf Links anwenden kann.
- Wenn dein a#current der Link "zur" gerade geladenen Seite sein sollte, warum dann nicht auf die Auszeichnung als Link verzichten? Den braucht's doch garnicht, man (als Besucher) ist ja schon da.

Tschö, Auge
Go to the top of the page
 
+Quote Post
Andreas
Beitrag 20.07.2006 - 16:30
Beitrag #3


____________________
Gruppensymbol

Gruppe: Admin
Beiträge: 1.220
Mitglied seit: 20.10.2001
Mitglieds-Nr.: 3



Die bisherige Linkliste ist ja eine modifizierte von Listamatic wink.gif Den Links innerhalb der Liste ein float:left mitzugeben und sie dann mit einer festen Breite zu versehen ist schon mal eine gute Idee. Das mache ich zu Hause.

Ich persönlich würde auch keine Fettformatierung verwenden. Ist zwar schick, aber mir zu "wackelig" - aber der Kunde ist König. Also bastel' ich noch ein bißchen.

Das #current steht als Link da, weil ich das Menu mit 'nem kleinen PHP Schnippsel erzeuge. Da wären das dann 2 zusätzliche IFs ... machbar, aber ich finde das z.B. überflüssig. Wenn der aktive Link markiert ist, weiß man das man auf der Seite ist. Der muß dann nicht auch noch nichtklickbar sein. Da sehe ich keinen Usabilityvorteil mehr.

Anderseits überlege ich, den einzelnen Links eine individuelle Breite mitzugeben. Ich bastel die ja eh per Script, dann kann ich da auch noch 'ne Breite ins Array schreiben.

Mal sehen ... die Frau ist heute abend weg und der Nachwuchs schläft (hoffentlich).
Go to the top of the page
 
+Quote Post
Auge
Beitrag 22.07.2006 - 15:49
Beitrag #4


Anwärter auf W3.org Mitgliedschaft
*****

Gruppe: User
Beiträge: 550
Mitglied seit: 28.11.2001
Wohnort: Berlin Friedrichshain
Mitglieds-Nr.: 107



Hallo

ZITAT(Andreas @ 20.07.2006 - 17:30) *
Ich persönlich würde auch keine Fettformatierung verwenden. Ist zwar schick, aber mir zu "wackelig" - aber der Kunde ist König. Also bastel' ich noch ein bißchen.

Wenn die (feste) Breite so gewählt ist, dass der Text auch bei fetter Formatierung drin Platz hat, sollte das keine Probleme verursachen. Dann springt ausschließlich der Text und nicht der Link (inclusive der gesamten Leiste).

ZITAT(Andreas @ 20.07.2006 - 17:30) *
Anderseits überlege ich, den einzelnen Links eine individuelle Breite mitzugeben. Ich bastel die ja eh per Script, dann kann ich da auch noch 'ne Breite ins Array schreiben.

Geht auch, ich persönlich bevorzuge aber gleiche Breiten in Linkl(e)isten.

ZITAT(Andreas @ 20.07.2006 - 17:30) *
Mal sehen ... die Frau ist heute abend weg und der Nachwuchs schläft (hoffentlich).

Na denn, gute Nacht. :-)

Tschö, Auge
Go to the top of the page
 
+Quote Post
Conny
Beitrag 22.07.2006 - 19:33
Beitrag #5


Kommt Zeit, kommt Rat, kommt Conrad!
Gruppensymbol

Gruppe: Mods
Beiträge: 1.169
Mitglied seit: 21.11.2001
Wohnort: Altenkirchen, Westerwald
Mitglieds-Nr.: 42



Hi,
wackelicher Text, weil sie von Normal auf Fett 'umspringt', läßt sich u.U. dadurch eingrenzen, wenn Du den fetten Text 1 Pixel kleiner machst... (vllt. auch 2)

cu
Conny
Go to the top of the page
 
+Quote Post
Andreas
Beitrag 22.07.2006 - 21:24
Beitrag #6


____________________
Gruppensymbol

Gruppe: Admin
Beiträge: 1.220
Mitglied seit: 20.10.2001
Mitglieds-Nr.: 3



ZITAT(Conny @ 22.07.2006 - 20:33) *
wackelicher Text, weil sie von Normal auf Fett 'umspringt', läßt sich u.U. dadurch eingrenzen, wenn Du den fetten Text 1 Pixel kleiner machst...
Hab's für den IE6 mit 90% gemacht. Da sieht der Text genau gleich groß aus, aber es springt nix. In IE7, Opera und Firefox springt nix, aber der Menutext sieht beim Hovern etwas kleiner aus - wobei das als Effekt nicht unbedingt störend ist.

Ohne die Verkleinerung springt in den modernen Browsern nix, aber die IE6 zickt rum. Mit der aktuellen Lösung ist der Kunde zufrieden :-)
Go to the top of the page
 
+Quote Post
jomal
Beitrag 24.07.2006 - 12:52
Beitrag #7


unser täglich Posting gib uns heute
***

Gruppe: User
Beiträge: 230
Mitglied seit: 28.01.2006
Wohnort: Braunschweig
Mitglieds-Nr.: 5.804



Hallo Andreas,
ich habe mir eben mal spaßeshalber diene Site angesehen.
Zufällig kam ich mit dem Mauszeiger an die obere Begrenzung Deines Links.
Ein seltsamer Effekt, der Link flackert wie wild.
Ich habe dann mal bei meinen Links probiert, ob es genauso ist (ich verwende JPGs als Schaltflächen, naja...)
Bei mir flackert aber nichts. smile.gif
Browser Mozilla Firefox 1.5.0.4

Gruß
jomal
Go to the top of the page
 
+Quote Post
Google Bot
Beitrag
Beitrag #


Google Ads









Go to the top of the page
 
Quote Post

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 29.03.2024 - 2:45

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here