Liebe Community
Ich habe ein Whitespace-Problem in der Navigation meiner Homepage Michael Ritter . Und zwar entsteht zwischen den per hover ausklappbaren Menü-Unterpunkten ein unerwünschter Zwischenraum auf, und zwar nur in folgendem Sonderfall: Nämlich, wenn der Text von zwei aufeinanderfolgenden Menü-Unterpunkt-Beschriftungen zwei Linien umfasst. In jeder anderen Konstellation (Aufeinandertreffen von zwei Beschriftungen, die beide nur 1 Linie hoch sind, oder Aufeinandertreffen einer 1 Linie hohen auf eine 2 Linien hohen Beschriftung) gibt es diesen Zwischenraum nicht (das das stimmt, ist an der Navigation ersichtlich; der Problemfall befindet sich rechts im Menü "Archiv" bezüglich der beiden dort eingefügten Unterpunkte).
Es gibt sicher verschiedene Lösungen fürs Problem. Ich wäre nur um ggf. Inputs froh. Das Ausprobieren mit der Schriftgrösse (font-size) oder das zusätzliche Verwenden von line-height haben das Problem auf Anhieb entweder nicht gelöst oder andere Darstellungsprobleme verursacht (z. B. "Untereinanderschieben" von ausklapparen Menü-Unterpunkten bzw. deren Beschriftungen). Das bedeutet aber natürlich nicht, dass dieser Weg völlig ausgeschöpft ist. Mit den vom Forum erwarteten Recherchen kam ich nicht zum Ziel, was vorab daran liegt, dass es entweder ein blöder Spezialfall ist, oder dass mehr als 1 Linie hohe Beschriftungen von Menü-Unterpunkten nicht so gängig sind (?). Ich möchte gerne an der Möglichkeit zwei Linien hohen Beschriftungen für Menü-Unterpunkte festhalten.
Der CSS-Code lautet (der aus meiner Sicht wichtigste Codeblock fett):
Ich bin auf Inputs gespannt und erwarte selbstredend keine Gratis-Fertig-Lösungen.
Lg Xeno
Ich habe ein Whitespace-Problem in der Navigation meiner Homepage Michael Ritter . Und zwar entsteht zwischen den per hover ausklappbaren Menü-Unterpunkten ein unerwünschter Zwischenraum auf, und zwar nur in folgendem Sonderfall: Nämlich, wenn der Text von zwei aufeinanderfolgenden Menü-Unterpunkt-Beschriftungen zwei Linien umfasst. In jeder anderen Konstellation (Aufeinandertreffen von zwei Beschriftungen, die beide nur 1 Linie hoch sind, oder Aufeinandertreffen einer 1 Linie hohen auf eine 2 Linien hohen Beschriftung) gibt es diesen Zwischenraum nicht (das das stimmt, ist an der Navigation ersichtlich; der Problemfall befindet sich rechts im Menü "Archiv" bezüglich der beiden dort eingefügten Unterpunkte).
Es gibt sicher verschiedene Lösungen fürs Problem. Ich wäre nur um ggf. Inputs froh. Das Ausprobieren mit der Schriftgrösse (font-size) oder das zusätzliche Verwenden von line-height haben das Problem auf Anhieb entweder nicht gelöst oder andere Darstellungsprobleme verursacht (z. B. "Untereinanderschieben" von ausklapparen Menü-Unterpunkten bzw. deren Beschriftungen). Das bedeutet aber natürlich nicht, dass dieser Weg völlig ausgeschöpft ist. Mit den vom Forum erwarteten Recherchen kam ich nicht zum Ziel, was vorab daran liegt, dass es entweder ein blöder Spezialfall ist, oder dass mehr als 1 Linie hohe Beschriftungen von Menü-Unterpunkten nicht so gängig sind (?). Ich möchte gerne an der Möglichkeit zwei Linien hohen Beschriftungen für Menü-Unterpunkte festhalten.
Der CSS-Code lautet (der aus meiner Sicht wichtigste Codeblock fett):
Code:
* {
margin:0;
padding:0;
}
html {
background-color:#B4DC00;
height:100%;
}
body {
background-color:#FFFFFF;
font-family:Verdana, sans-serif;
margin:20px auto;
width:960px;
min-height:95%;
}
p {
margin:0 20px 20px 20px;
padding-bottom:10px;
}
table {
margin:0 20px 20px 20px;
border:none;
border-collapse:collapse;
}
td {
padding:4px;
padding-right:10px;
text-align:left;
}
th {
text-align:left;
padding:4px;
}
h1, h2, h3 {
margin:0 20px 10px 20px;
}
h1 {
font-size:120%;
}
h2 {
font-size: 115%;
}
h3 {
font-size: 110%;
}
ul {
padding-bottom:20px;
}
a, span {
text-decoration:none;
}
img {
text-align:center;
border:0;
}
a:link {
color:#0000FF;
}
a:visited {
color:#FF4B4B;
}
a:hover { color:#FF0000;
}
span {
color:#0000FF;
}
.linkliste li {
margin:0 0 0 37.5px;
}
.linkliste {
margin:0 0 20px 0;
}
#navi {
list-style-type:none;
padding-bottom:0;
float:left;
width:100%;
background-color:#EAF7A8;
margin:0 0 20px 0;
border-radius:10px;
box-shadow:3px 3px 8px #777777;
}
#navi li {
float:left;
position:relative;
display:block;
line-height:1.5;
width:110px;
text-align:center;
font-size:15px;
}
#navi span {
background-color:#FFFF00;
}
#navi li a, span {
padding:10px;
display:block;
background-color:#EAF7A8;
border-radius:10px;
}
#navi li a:hover {
color:#FF0000;
background-color:#FFD700;
border-radius:0;
}
#navi li:first-child a:hover {
border-radius:10px 0 0 10px;
}
#navi li ul {
position:absolute;
left:-999999px;
top:auto;
}
#navi li:hover ul {
left:0;
}
[B]#navi li ul li {
display:block;
text-align:left;
width:100%;
font-size:11.5px;
text-align:left;
border-radius:0;
} [/B]
#navi li ul li a {
border-radius:0;
}
#navi li ul li:last-child a {
border-radius:0 0 10px 10px;
}
#navi li ul li:first-child a:hover {
border-radius:0;
}
#hauptbild {
float:left;
margin-bottom:5px;
}
#anfang {
margin-bottom:20px;
font-size:200%;
}
#header {
padding:20px 0 60px 0;
margin-bottom:10px;
background-color:#B4DC00;
}
#content {
margin-bottom: 10px;
min-height:960px;
}
#footer {
padding:10px 0 0 0;
background-color:#B4DC00;
}
#footer p {
background-color:#EAF7A8;
height: 35px;
margin:0 0 20px 0;
padding-left: 20px;
line-height:280%;
font-size:15px;
border-radius:10px;
box-shadow:3px 3px 8px #777777;
}Ich bin auf Inputs gespannt und erwarte selbstredend keine Gratis-Fertig-Lösungen.
Lg Xeno
