nicht angemeldet
Schrift verkleinern - Breite beibehalten
suitHallo,
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
-
Wenn Du eine feste Breite willst, dann definiere auch im CSS eine feste Breite (in px, nicht in em).
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes-
Wenn Du eine feste Breite willst, dann definiere auch im CSS eine feste Breite (in px, nicht in em).
Gruß, LX
Nein, ich möchte, dass die Seite problemlos skalierbar bleibt, von daher fällt die Methode für mich raus.
-
Nein, ich möchte, dass die Seite problemlos skalierbar bleibt, von daher fällt die Methode für mich raus.
ich verstehe dein problem nicht
du willst eine skalierbare seite die sich der schriftgröße anpasst, du willst aber gleichzeitig, dass das nicht im menü passiert, aber willst, das es problemlos skalierbar bleibt
das nennt sich endlosschleife ;)
-
Ich möchte ja nicht die Skalierbarkeit verändern, sondern nur das Verhltniss von Schriftgröße zur Umgebeung ;) Das sollte doch eigentlich Möglich sein.
Gruß
Nein, ich möchte, dass die Seite problemlos skalierbar bleibt, von daher fällt die Methode für mich raus.
ich verstehe dein problem nicht
du willst eine skalierbare seite die sich der schriftgröße anpasst, du willst aber gleichzeitig, dass das nicht im menü passiert, aber willst, das es problemlos skalierbar bleibt
das nennt sich endlosschleife ;)
-
Ich möchte ja nicht die Skalierbarkeit verändern, sondern nur das Verhltniss von Schriftgröße zur Umgebeung ;) Das sollte doch eigentlich Möglich sein.
das verhältnis eines elements zur schriftgröße wird in em angegeben
wobei a = b
a entspricht der schriftgröße in pixel
b entspricht 1 embei 16 px im browser entspricht dies also 1 em
2 em sind 32 pixel
je nach schriftgröße des elements weicht dieser dann aber ab
wenn das elternelement eine schriftgröße von 8px hat entspricht 1 em 8 px, 2 em 16 px usw
ich verstehe deine frage immer noch nicht btw
-
Ich möchte ja nicht die Skalierbarkeit verändern, sondern nur das Verhltniss von Schriftgröße zur Umgebeung ;) Das sollte doch eigentlich Möglich sein.
das verhältnis eines elements zur schriftgröße wird in em angegeben
wobei a = b
a entspricht der schriftgröße in pixel
b entspricht 1 embei 16 px im browser entspricht dies also 1 em
2 em sind 32 pixel
je nach schriftgröße des elements weicht dieser dann aber ab
wenn das elternelement eine schriftgröße von 8px hat entspricht 1 em 8 px, 2 em 16 px usw
ich verstehe deine frage immer noch nicht btw
Vielen Dank für die ausführliche Antwort, auch wenn ich das alles schon wusste.
Das Problem bei mit ist, dass ich es nicht schaffe, die Schriftgröße zu ändern, ohne die Größe des Elternelements mit zu verändern, was unschöne Effekte gibt, weil das Menü viel schmaler als der Menüpunkt wird. Bisher ist es mir nicht gelungen, das abzustellen und ich habe keinen Lösungsansatz mehr.
Gruß
-
Das Problem bei mit ist, dass ich es nicht schaffe, die Schriftgröße zu ändern, ohne die Größe des Elternelements mit zu verändern, was unschöne Effekte gibt, weil das Menü viel schmaler als der Menüpunkt wird. Bisher ist es mir nicht gelungen, das abzustellen und ich habe keinen Lösungsansatz mehr.
kann man das irgendwo in einem beispiel isolieren? normalerweise hat die schriftgröße eines elements keine direkte auswirkung auf sein elternelement - zumindest nicht in dem ausmaß
zwar werden boxen (je nach eigenschaften) durch den inhalt gestreckt, aber das beschriebene verhalten wäre mir neu
-
Naja, erstens habe ich den Code weiter oben angezeigt. Ansonst gucke auf der betroffen Seite opera-tutorial.de die Schrift im Dropdown-Menü an. Sie ist genause groß wie die Überschriften der Menüs (die Kapitälchen)...
Vielen Dank für deine Mühe
Das Problem bei mit ist, dass ich es nicht schaffe, die Schriftgröße zu ändern, ohne die Größe des Elternelements mit zu verändern, was unschöne Effekte gibt, weil das Menü viel schmaler als der Menüpunkt wird. Bisher ist es mir nicht gelungen, das abzustellen und ich habe keinen Lösungsansatz mehr.
kann man das irgendwo in einem beispiel isolieren? normalerweise hat die schriftgröße eines elements keine direkte auswirkung auf sein elternelement - zumindest nicht in dem ausmaß
zwar werden boxen (je nach eigenschaften) durch den inhalt gestreckt, aber das beschriebene verhalten wäre mir neu
-
Hallo Das,
Ich verstehe das Problem auch nicht so wirklich. Wenn du die Schriftgröße halbieren willst, musst du natürlich die em-breite (und eventuelle Abstände) des Elementes verdoppeln, damit die Breite gleich bleibt.
Beispiel:
ul#Navigation li ul li {font-size:0.5em;} ul#Navigation li ul li a{width:15em;padding-left:2em;padding-right:2em;}Jonathan
-
-
-
-
-
-
-
-
-
Hallo!
[...] Ich möchte die Schriftgröße in den aufklappbaren Untermenüs verkleinern, ohne das die Breite der Menüs geändert wird. [...]
Hab mir jetzt deinen Code nicht so genau angeschaut wiel mir das zu mühsam ist. Wenn du die Breite der _Listenelemente_ mittels em Setzt, dann sollte die Schriftgröße der Hyperlinks innerhalb der Listenelemente nichts an der Breite der Listenelemente ändern. Nur wenn du die Schriftgröße für die Listenelemente änderst verändert sich deren Breite.
--
LG,
Snafu-
Hallo!
[...] Ich möchte die Schriftgröße in den aufklappbaren Untermenüs verkleinern, ohne das die Breite der Menüs geändert wird. [...]
Hab mir jetzt deinen Code nicht so genau angeschaut wiel mir das zu mühsam ist. Wenn du die Breite der _Listenelemente_ mittels em Setzt, dann sollte die Schriftgröße der Hyperlinks innerhalb der Listenelemente nichts an der Breite der Listenelemente ändern. Nur wenn du die Schriftgröße für die Listenelemente änderst verändert sich deren Breite.Sollte... ich habe schon den recht genauen Selektor ul #Navigation li ul li a verwendet. Ich kann es mal mit spans versuchen, auch wenn das den Code unnötig aufblähen würde...
-
-
Hallo
ul#Navigation a {
display: block;
text-decoration: none;
width: 7.5em;
padding: .2em 1em
}Hier ist die einzige Breitenangabe, die ich finde. Da die Liste gefloatet ist, passt sie sich der Breite ihres Inhalts an also der Breite der Links an. Wenn du jetzt die Schriftgröße änderst, werden diese dadurch schmaler. Du müsstest nicht eine Breite für die Links sondern für die Listenpunkte angeben, dann dürfte es auch problemlos möglich sein die Schriftgröße der Links zu ändern. ~~~css ul#Navigation a { color: maroon; display: block; text-decoration: none; padding: .2em 1em } ul#Navigation li { width: 8.5em; } ul#Navigation li ul a{ font-size:0.7em; }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!