a in div vertical ausrichten?
0 0 0 0 0 
Gernot Back
0 0 
Detlef G.
0
a in div vertical ausrichten?
Hallo, ich will einen Link in einem div vertical ausrichten und mit einem hover versehen, doch ich bekomme den Link nicht mittig, ohne das das hover nicht mehr so ist, wie ich es will.
Hier könnt ihr sehen, was ich meine.
Danke und Gruß
_fabi
-
Hallo _fabi
das ist ein schöner Link, aber eine unklare Beschreibung. Welchen Link auf der Seite "vertikal ausrichten"? Meinst Du die Naviagtion? Wieso "vertikal"? Bitte eine 2te Beschreibung, danke!
Claus-
Meinst Du die Naviagtion?
Ja genau, die Links in der Navigationsleiste will ich mittig von den "Kästen" ausrichten.
gruß
_fabi
-
Ja genau, die Links in der Navigationsleiste will ich mittig von den "Kästen" ausrichten.
Ändere dort zuerst das Markup.
Mache eine Liste, wie es dir empfohlen wurde (in dem https://forum.selfhtml.org/?t=189982&m=1265808, in welchem du bleiben solltest).
Deine Aufgabe besteht dann bicht darin, a Elemente bezüglich den li Elementen zu zentrieren, sondern die mit display:block formatierten a Elemente mit einem geeigneten padding zu versehen.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Beat hat recht. Mache eine Liste mit deinen links
<ul> <li> <a class="navilink" href="dingsda">NaviThema</a> </li> <li> <a class="navilink" href="dingsda">NaviThema</a> </li> </ul>Und dann gibtst du dem ganzen
.navilink { display: block; padding: auto 7px; /* oder etwas, das deinen Link in der Mitte positioniert */ }Grüße,
Claus -
Hallo Beat,
Deine Aufgabe besteht dann bicht darin, a Elemente bezüglich den li Elementen zu zentrieren, sondern die mit display:block formatierten a Elemente mit einem geeigneten padding zu versehen.
Fabi braucht da nicht unbedingt mit Padding zu arbeiten. Den Text in einzeiligen Elementen kann man auch dadurch zentrieren, dass man auf Innenabstände in der Vertikalen (also Padding-Top und Padding-Bottom) ganz verzichtet bzw. diese auf Null setzt und stattdessen dem Element identische Werte in Height und Line-Height verpasst.
Auch ein display:block ist bei den A-Elementen nicht unbedingt erforderlich, wenn sie einen Line-Height-Wert haben, der dem Height-Wert ihres padding-top- und -bottom-losen umgebenden Mutter-Blockelements entspricht.
Gruß Gernot
--
super me-
Auch ein display:block ist bei den A-Elementen nicht unbedingt erforderlich, wenn sie einen Line-Height-Wert haben, der dem Height-Wert ihres padding-top- und -bottom-losen umgebenden Mutter-Blockelements entspricht.
In der Regel möchtest du, dass ein ganzes Feld, und nicht nur der Wortbereich bei Navigationslinks klickbar ist. Deshalb display:block
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hallo Beat,
Auch ein display:block ist bei den A-Elementen nicht unbedingt erforderlich, wenn sie einen Line-Height-Wert haben, der dem Height-Wert ihres padding-top- und -bottom-losen umgebenden Mutter-Blockelements entspricht.
In der Regel möchtest du, dass ein ganzes Feld, und nicht nur der Wortbereich bei Navigationslinks klickbar ist. Deshalb display:block
... was bei Inline-Elementen, die man in ihrer Default-Display-Eigenschaft "inline" belässt, in der horizontalen Achse sowieso auch über Padding zu erreichen ist und in der vertikalen Achse dann, wenn man ihm über eine entsprechende Line-Height ausreichenden Platz gibt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Zweidimensionales Padding bei Inline-Elementen</title> <style type="text/css"> [code lang=css] a { line-height:4.45em; padding:1.5em; background:pink; }</style>
</head>
<body>
<p>
<a href="#">1. Link</a>
<a href="#">2. Link</a><br />
<a href="#">3. Link</a>
</p>
</body>
</html>[/code]Gruß Gernot
--
super me
-
-
Hallo Gernot
… und stattdessen dem Element identische Werte in Height und Line-Height verpasst.
Vielleicht sollte noch angemerkt werden, dass dies bei Elementen, die wesentlich höher als der enthaltene Text sind, nur sinnvoll ist, wenn dieser niemals umbricht. Ansonsten ergeben sich hässliche Riesenzwischenräume zwischen den Zeilen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
Allgemeiner Tipp zur Seite:
Ist zwar nur ein Detail, aber ich würde die Angabe
div.navigation a:active { background-color: #FFFFFF; }entfernen.
Wenn jemand auf einen Link klickt und es sich dann doch anders überlegt und während er klickt die Maus wegzieht, hast Du an der Stelle einen leeren weißen Kasten.
-
Allgemeiner Tipp zur Seite:
Ist zwar nur ein Detail, aber ich würde die Angabe
div.navigation a:active {
background-color: #FFFFFF;
}> > entfernen. bzw beim setzen eines Hintergrundes auch immer eine geeignete Kontrastfarbe für color: setzen. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische
-