Schriftgröße ändern
Menne
- css
-3 vonHandCoder0 Menne0 Martin Hölter0 Menne
0 Menne
Hallo,
wie kann ich die Button(Schriftgröße) verkleinern, so das diese auch im I.E. richtig angezeigt werden.
Hier meine Datei:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
body {background-image: url(../bilder/hintergrund.jpg);background-attachment:fixed;}
</style>
</head>
<style type="text/css">
body, p a {
font: normal 100.01% Verdana, sans-serif;
color: white; background-color: green;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: white; background-color: green;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: green; background-color: white;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: white; background-color: white;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: white;
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a href="#Beispiel">A Jugend</a></li>
<li><a href="#Beispiel">B Jugend</a>
<ul>
<li><a href="#Beispiel">B1 Jugend</a></li>
<li><a href="#Beispiel">B2 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">C Jugend</a>
<ul>
<li><a href="#Beispiel">C1 Jugend</a></li>
<li><a href="#Beispiel">C2 Jugend</a></li>
<li><a href="#Beispiel">C3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">D Jugend</a>
<ul>
<li><a href="#Beispiel">D1 Jugend</a></li>
<li><a href="#Beispiel">D2 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">E Jugend</a>
<ul>
<li><a href="#Beispiel">E1 Jugend</a></li>
<li><a href="#Beispiel">E2 Jugend</a></li>
<li><a href="#Beispiel">E3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">F Jugend</a>
<ul>
<li><a href="#Beispiel">F1 Jugend</a></li>
<li><a href="#Beispiel">F2 Jugend</a></li>
<li><a href="#Beispiel">F3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">G Jugend</a></li>
</ul>
<div></div>
</div>
</body>
</html>
Danke
Menne
Hallo, Zeile vier
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css">
* {font-weight:normal; font-size:12pt;}
body {background-image: url(../bilder/hintergrund.jpg);background-attachment:fixed;}
body, p a {
font: normal 100.01% Verdana, sans-serif;
color: white; background-color: green;
}
div#Rahmen {
width: 47.1em;
padding: 0.8em;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: white; background-color: green;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: green; background-color: white;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: white; background-color: white;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: white;
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a href="#Beispiel">A Jugend</a></li>
<li><a href="#Beispiel">B Jugend</a>
<ul>
<li><a href="#Beispiel">B1 Jugend</a></li>
<li><a href="#Beispiel">B2 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">C Jugend</a>
<ul>
<li><a href="#Beispiel">C1 Jugend</a></li>
<li><a href="#Beispiel">C2 Jugend</a></li>
<li><a href="#Beispiel">C3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">D Jugend</a>
<ul>
<li><a href="#Beispiel">D1 Jugend</a></li>
<li><a href="#Beispiel">D2 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">E Jugend</a>
<ul>
<li><a href="#Beispiel">E1 Jugend</a></li>
<li><a href="#Beispiel">E2 Jugend</a></li>
<li><a href="#Beispiel">E3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">F Jugend</a>
<ul>
<li><a href="#Beispiel">F1 Jugend</a></li>
<li><a href="#Beispiel">F2 Jugend</a></li>
<li><a href="#Beispiel">F3 Jugend</a></li>
</ul>
</li>
<li><a href="#Beispiel">G Jugend</a></li>
</ul>
<div></div>
</div>
</body>
</html>
tschüs
Klasse danke für die schnelle Antwort.
Hat geklappt.
Jetzt hab ich nur das Problem, das die Unetermenüs im IE größer dargestellt werden. Im Firefox ist es Okay. Habe 9pt genommen
Danke
Menne
Hallo, Zeile vier
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
> ~~~css
<style type="text/css">
> * {font-weight:normal; font-size:12pt;}
>
> body {background-image: url(../bilder/hintergrund.jpg);background-attachment:fixed;}
>
> body, p a {
> font: normal 100.01% Verdana, sans-serif;
> color: white; background-color: green;
> }
>
> div#Rahmen {
> width: 47.1em;
> padding: 0.8em;
> }
> * html div#Rahmen { /* Korrektur fuer IE 5.x */
> width: 48.7em;
> w\idth: 47.1em;
> }
> div#Rahmen div {
> clear: left;
> }
> ul#Navigation {
> margin: 0; padding: 0;
> text-align: center;
> }
>
> ul#Navigation li {
> list-style: none;
> float: left; /* ohne width - nach CSS 2.1 erlaubt */
> position: relative;
> margin: 0.4em; padding: 0;
> }
> * html ul#Navigation li { /* Korrektur fuer den IE */
> margin-bottom: -0.4em;
> }
>
> ul#Navigation li ul {
> margin: 0; padding: 0;
> position: absolute;
> top: 1.6em; left: -0.4em;
> display: none; /* Unternavigation ausblenden */
> }
> * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
> left: -1.5em;
> lef\t: -0.4em;
> }
> ul#Navigation li:hover ul {
> display: block; /* Unternavigation in modernen Browsern einblenden */
> }
> ul#Navigation li ul li {
> float: none;
> display: block;
> margin-bottom: 0.2em;
> }
>
> ul#Navigation a, ul#Navigation span {
> display: block;
> width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
> padding: 0.2em 1em;
> text-decoration: none; font-weight: bold;
> border: 1px solid black;
> border-left-color: white; border-top-color: white;
> color: white; background-color: green;
> }
> * html ul#Navigation a, * html ul#Navigation span {
> width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
> w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
> }
> ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
> border-color: white;
> border-left-color: black; border-top-color: black;
> color: green; background-color: white;
> }
> li a#aktuell { /* aktuelle Rubrik kennzeichnen */
> color: white; background-color: white;
> }
> ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
> background-color: white;
> }
> </style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}window.onload=hoverIE;
}
</script>
<![endif]-->
>
> ~~~html
</head>
> <body>
>
> <div id="Tmenu">
> <ul id="Navigation">
> <li><a href="#Beispiel">A Jugend</a></li>
> <li><a href="#Beispiel">B Jugend</a>
> <ul>
> <li><a href="#Beispiel">B1 Jugend</a></li>
> <li><a href="#Beispiel">B2 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">C Jugend</a>
> <ul>
> <li><a href="#Beispiel">C1 Jugend</a></li>
> <li><a href="#Beispiel">C2 Jugend</a></li>
> <li><a href="#Beispiel">C3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">D Jugend</a>
> <ul>
> <li><a href="#Beispiel">D1 Jugend</a></li>
> <li><a href="#Beispiel">D2 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">E Jugend</a>
> <ul>
> <li><a href="#Beispiel">E1 Jugend</a></li>
> <li><a href="#Beispiel">E2 Jugend</a></li>
> <li><a href="#Beispiel">E3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">F Jugend</a>
> <ul>
> <li><a href="#Beispiel">F1 Jugend</a></li>
> <li><a href="#Beispiel">F2 Jugend</a></li>
> <li><a href="#Beispiel">F3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">G Jugend</a></li>
> </ul>
> <div></div>
> </div>
>
>
> </body>
> </html>
tschüs
Hi!
* {font-weight:normal; font-size:12pt;}
pt ist eine Einheit für Ausdrucke, nicht für Monitore - da sollte man am besten relative Einheiten (wie em) verwenden, zur Not pixelbasierte (z.B. px).
Alles hat seine Vor- und Nachteile, welche im Archiv zur Genüge diskutiert wurden.
Gruß aus Iserlohn
Martin
Hallo,
danke für Deine Antwort und schöne Grüße aus Menden(die Welt ist klein).
Aber hat mich nicht weitergebracht. Wie bekomme ich das dür den I.E. hin?
Danke
Menne
Hi!
* {font-weight:normal; font-size:12pt;}
pt ist eine Einheit für Ausdrucke, nicht für Monitore - da sollte man am besten relative Einheiten (wie em) verwenden, zur Not pixelbasierte (z.B. px).
Alles hat seine Vor- und Nachteile, welche im Archiv zur Genüge diskutiert wurden.
Gruß aus
Martin
Kann ich nicht auch einfach die % zahl ändern?
In dieser Zeile
font: normal 100.01% Verdana, sans-serif;
Hallo, Zeile vier
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
> ~~~css
<style type="text/css">
> * {font-weight:normal; font-size:12pt;}
>
> body {background-image: url(../bilder/hintergrund.jpg);background-attachment:fixed;}
>
> body, p a {
> font: normal 100.01% Verdana, sans-serif;
> color: white; background-color: green;
> }
>
> div#Rahmen {
> width: 47.1em;
> padding: 0.8em;
> }
> * html div#Rahmen { /* Korrektur fuer IE 5.x */
> width: 48.7em;
> w\idth: 47.1em;
> }
> div#Rahmen div {
> clear: left;
> }
> ul#Navigation {
> margin: 0; padding: 0;
> text-align: center;
> }
>
> ul#Navigation li {
> list-style: none;
> float: left; /* ohne width - nach CSS 2.1 erlaubt */
> position: relative;
> margin: 0.4em; padding: 0;
> }
> * html ul#Navigation li { /* Korrektur fuer den IE */
> margin-bottom: -0.4em;
> }
>
> ul#Navigation li ul {
> margin: 0; padding: 0;
> position: absolute;
> top: 1.6em; left: -0.4em;
> display: none; /* Unternavigation ausblenden */
> }
> * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
> left: -1.5em;
> lef\t: -0.4em;
> }
> ul#Navigation li:hover ul {
> display: block; /* Unternavigation in modernen Browsern einblenden */
> }
> ul#Navigation li ul li {
> float: none;
> display: block;
> margin-bottom: 0.2em;
> }
>
> ul#Navigation a, ul#Navigation span {
> display: block;
> width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
> padding: 0.2em 1em;
> text-decoration: none; font-weight: bold;
> border: 1px solid black;
> border-left-color: white; border-top-color: white;
> color: white; background-color: green;
> }
> * html ul#Navigation a, * html ul#Navigation span {
> width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */
> w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
> }
> ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
> border-color: white;
> border-left-color: black; border-top-color: black;
> color: green; background-color: white;
> }
> li a#aktuell { /* aktuelle Rubrik kennzeichnen */
> color: white; background-color: white;
> }
> ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
> background-color: white;
> }
> </style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}window.onload=hoverIE;
}
</script>
<![endif]-->
>
> ~~~html
</head>
> <body>
>
> <div id="Tmenu">
> <ul id="Navigation">
> <li><a href="#Beispiel">A Jugend</a></li>
> <li><a href="#Beispiel">B Jugend</a>
> <ul>
> <li><a href="#Beispiel">B1 Jugend</a></li>
> <li><a href="#Beispiel">B2 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">C Jugend</a>
> <ul>
> <li><a href="#Beispiel">C1 Jugend</a></li>
> <li><a href="#Beispiel">C2 Jugend</a></li>
> <li><a href="#Beispiel">C3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">D Jugend</a>
> <ul>
> <li><a href="#Beispiel">D1 Jugend</a></li>
> <li><a href="#Beispiel">D2 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">E Jugend</a>
> <ul>
> <li><a href="#Beispiel">E1 Jugend</a></li>
> <li><a href="#Beispiel">E2 Jugend</a></li>
> <li><a href="#Beispiel">E3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">F Jugend</a>
> <ul>
> <li><a href="#Beispiel">F1 Jugend</a></li>
> <li><a href="#Beispiel">F2 Jugend</a></li>
> <li><a href="#Beispiel">F3 Jugend</a></li>
> </ul>
> </li>
> <li><a href="#Beispiel">G Jugend</a></li>
> </ul>
> <div></div>
> </div>
>
>
> </body>
> </html>
tschüs