nicht angemeldet
Hallo,
Ich habe ein kleines Problem auf meiner Seite www.opera-tutorial.de. Ich möchte die Schriftgröße in den aufklappbaren Untermenüs verkleinern, ohne das die Breite der Menüs geändert wird. Die Breite wird über em an dieser Schriftgröße ausgerichtet. Ich habe schon versucht, die Untermenüs wieder etwas zu verbreitern, dabei kommt aber nur Murks raus.
Eine andere Möglichkeit, die ich getestet habe, war den Rahmen der Hauptmenüpunkte zu verlängern, wenn das Menüs ausgeklappt wird, so das es nicht auffällt, wenn die Untermenüs zu kurz sind. Leider habe ich dazu keine Möglichkeit gefunden.
Würd mich freuen, wenn jemand eine Lösung hat. Hier das verkürzte CSS
html {
font: 100.01% Trebuchet MS, "Sans-Serif";
margin: 0;
padding: 1em
}
div#Rahmen {
top: 2em;
width: auto;
margin: auto;
padding: .8em
}
div#Rahmen div {
clear: left
}
ul#Navigation {
font-size: 1.1em;
max-width: 42em;
right: 2em;
margin: auto;
padding: 0
}
ul#Navigation li {
float: left;
list-style: none;
position: relative;
border-style: dotted;
border-width: 2px 2px 0 0;
margin: .4em
}
* html ul#Navigation li {
margin-bottom: -.4em;
margin-right: 0
}
*:first-child+html ul#Navigation li {
margin-bottom: -.1em
}
ul#Navigation li ul {
background: none;
display: none;
font-size: 1em;
font-variant: normal;
position: absolute;
text-align: left;
top: 1.5em;
border-width: 0;
margin: 0;
padding: 0
}
ul#Navigation li:hover ul {
display: block
}
ul#Navigation li ul li {
display: block;
float: none;
left: 0;
z-index: 2;
border-width: 0 2px 0 0;
margin: 0
}
ul#Navigation a {
display: block;
text-decoration: none;
width: 7.5em;
padding: .2em 1em
}
und das verkürzte HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Opera Tutorial- Übersicht</title>
<link rel="stylesheet" href="stylesheets/style.css" media="screen" type="text/css" />
</head>
<body>
<h1>Opera-Tutorial</h1>
<div id="Rahmen">
<ul id="Navigation">
<li id="menueins">
<a href="anfang.php" class="liste">Zum Anfang</a>
<ul>
<li><a href="opera.php">Was ist Opera?</a></li>
<li><a href="standardbrowser.php">Opera als Standardbrowser</a></li>
<li><a href="symbolleiste.php">Die Symbole</a></li>
<li><a href="startseite.php">Startseite festlegen</a></li>
<li><a href="download.php">Downloads</a></li>
<li><a href="lesezeichen.php">Lesezeichen</a></li>
<li><a href="update.php">Opera updaten</a></li>
</ul>
</li>
</ul>
</div>
<div id="inhalt">
<p class="zusammenfassung">Ein Text</p>
<p>Und hier noch mehr Text</p>
</div>
</body>
</html>
Gruß und Danke schonmal
suit