html css Schriftgrößenanpassung ans div

Landra · Sep 16, 2007

Ich möchte, dass die Schrift sich der Größe des div anpasst, egal welches betriebssystem oder welcher browser benutzt wird. Ich find in meinem Handbuch nun seit vielen Versuchen keine funktionierende Lösung, die ich umzusetzen weiß. Kann mir da wer helfen?

Datei:

<div id="divmenue"><ul class="ulmenue">
<li class="limenue"><a href="../../datei.html">Home</a></li>
.
.
.
</ul>

<div id="divmenuefotos"><ul class="ulmenue">
<li class="liuntermenue"><a href="../datei.html">Fotos</a></li>
.
.
.
</ul></div></div>

css:

#divmenue
{
position:absolute;
top:80px;
left:40px;
width:110px;
}

.ulmenue
{
list-style: none;
margin-top:10px;
padding-left:0px;
}

.limenue
{
width:100px;
height:25px;
margin-top: 2px;
background-color:#BBBBBB;
border-style:solid;
border-color:#777777;
border-width:1px;
padding-top:3px;
}

#divmenuefotos
{
position:absolute;
top:96px;
left:105px;
width:110px;
}

.liuntermenue
{
width:90px;
height:20px;
margin-top:2px;
background-color:#BBBBBB;
border-style:solid;
border-color:#777777;
border-width:1px;
padding-top:3px;
padding-left:0px;
}
.
.
.

Tasmas · Sep 16, 2007

für sowas gibt es scriptsprachen wie php

Landra · Sep 16, 2007

Hab ich Dich da jetzt richtig verstanden: Das geht nur mit php. Nicht mit html/css. Die Lösung lautet: lerne php!

Kannst Du mir netterweise eine Literaturempfehlung geben?

IsNull · Sep 16, 2007

http://tut.php-quake.net/ << try it

Landra · Sep 16, 2007

Dankeschön

valenterry · Sep 16, 2007

Original von Landra
Hab ich Dich da jetzt richtig verstanden: Das geht nur mit php. Nicht mit html/css. Die Lösung lautet: lerne php!

Dank deiner [iro]extrem präzisen[/iro] Beschreibung, kann ich zwar nicht genau nachvollziehen, was du zu erreichen versuchst, wenn es dir aber darum geht, dass die Schrift exakt in das div passt (ohne Abstände oder Übertreten), dann lautet das Stichwort "Relativität". Anstatt mit "px" oder "%" musst du mit "em" arbeiten. Dann ist es egal, ob der Benutzer im Browser die Schrift vergrößert/verkleinert.
Das ganze funktionert aber nur, wenn der Inhalt statisch ist, d.h. wenn sich der Text im div nicht dynamisch ändert. Falls er das tut, wird es ein bisschen schwieriger, dann muss entweder PHP her oder Javascript. Du siehst: es ist am besten, wenn du sagst, was genau du machen und erreichen willst.

Landra · Sep 16, 2007

*ähem, grins verlegen*

2. Versuch:

Mein Problem ist, dass die Schrift bei mir am Rechner unter Ubuntu Firefox rechts über den Kästchenrand des Menüpunktes herausragt. Dies tut es nicht unter xp Firefox, Opera, Explorer.

es geht um diese website: http://www.white-unicorn.de/gewerbe/gewerbe.html

I. Ich möchte erreichen, dass die Größe der Menükästchen immer gleich bleibt mit width:110px

II. Die Schriftgröße hab ich momentan in im body font-size: 0.9em angegeben. Weil ich das so verstanden hatte, dass das relativ zum Menüpunkt-Kasterl die Schriftgröße anpasst. Hab aber die Vermutung, dass damit nur die Höhe gemeint ist. Hab aber nirgends einen anderen Befehl als font-size gefunden.

body
{
font-family: Maiandra GD; Verdana;
font-size: 0.9em;
background-image: url(bild.jpg);
}

III. Der Text ist festgelgt z.B.

<li class="limenue"><a href="../../datei.html">Home</a></li>

das meintest Du mit nicht dynamisch, oder?

IV. Ich möchte erreichen, dass sich die max. Wortbreite der Menükästchen-Breite von 110px anpasst. egal unter welchen Einstellungen im Browser. Auch wenn die angegebenen Schriftarten nicht zu finden sind...

valenterry · Sep 16, 2007

Original von Landra
I. Ich möchte erreichen, dass die Größe der Menükästchen immer gleich bleibt mit width:110px

Was ist mit Älteren, die die Schrift lieber ein bisschen größer haben wollen? Willst du ihnen aufzwingen, welche Schriftgröße zu lesen haben? Was ist mit denjenigen, die sich eine Mindestgröße im Browser eingestellt haben? Was ist mit denjenigen, deren Browser das "festsetzen" der Schriftgröße verhindert?

II. Die Schriftgröße hab ich momentan in im body font-size: 0.9em angegeben. Weil ich das so verstanden hatte, dass das relativ zum Menüpunkt-Kasterl die Schriftgröße anpasst. Hab aber die Vermutung, dass damit nur die Höhe gemeint ist. Hab aber nirgends einen anderen Befehl als font-size gefunden.

Auch das ist mir wenig verständlich. Warum gibst du für die gesamte Seite 0.9em vor? Eigentlich sollte man den Inhaltstext in der Größe nicht verändern. Ordne diese 0.9em lieber nur der Navigation zu. Btw: CSS kennt keine "Befehle".

body
{
font-family: Maiandra GD; Verdana;
font-size: 0.9em;
background-image: url(bild.jpg);
}

Du hast in diesem Codeabschnitt hier und auch sonst auf deiner Seite noch einige Fehler drin.
Es muss heißen "font-family: 'Maiandra GD' Verdana;".

IV. Ich möchte erreichen, dass sich die max. Wortbreite der Menükästchen-Breite von 110px anpasst. egal unter welchen Einstellungen im Browser.

Falls du trotz meiner Ratschläge weiterhin eine feste Schriftgröße haben willst, musst du dich afaik Javascript bemühen. Alles andere funktioniert nicht browserunabhängig.

Eydeet · Sep 16, 2007

Das geht nur mit JavaScript. Du musst dann für jeden Menüpunkt die Breite überprüfen, und falls 110px überschritten werden, die Schriftgröße um z.B. einen Pixel verkleinern. Das Ganze musst du dann so oft wiederholen, bis alles passt.

Was du dazu brauchst, sind Kenntnisse über Manipulationen am DOM. Ein recht gutes Tutorial über das Thema ist das Greasemonkey-Tutorial, das du unter http://diveintogreasemonkey.org findest.

Für deinen Zweck könnte etwas in der Art funktionieren:

Code:

var allTDs = document.getElementsByTagName('td');
for (var i = 0; i < allTDs.length; i++) {
    var thisTD = allTDs[i];
    if (thisTD.className != "liuntermenue") {
        continue;
    }
    // get font size of contained a tag
    var curFontSize = parseInt(thisTD.firstChild.style.font_size);
    while (thisTD.firstChild.offsetWidth > 110) {
        curFontSize -= 1;
        thisTD.firstChild.style.font_size = curFontSize + "px";
    }
}

Ich hab das Ganze nicht getestet, probier einfach aus, ob es funktioniert. Um auch noch die späteren Größenanpassungen des Benutzers zu verhindern, könntest du das Ganze in eine Funktion packen und dann per setTimeout oder setInterval aufrufen.

Du hast in diesem Codeabschnitt hier und auch sonst auf deiner Seite noch einige Fehler drin.
Es muss heißen "font-family: 'Maiandra GD' Verdana;".

Naja, fast

. Du hast ein Komma vergessen:

Code:

font-family: 'Maiandra GD', Verdana;

Tasmas · Sep 16, 2007

bei font-family emfpielt sich übrigens nicht verdana zu nehmen, grad unter linux haben das sehr wenige... ich würde immer eine fontfamilie angeben:
http://www.css4you.de/Schrifteigenschaften/font-family.html

also für schriften wie verdana, wärs dann "sans-serif"

Landra · Sep 16, 2007

@valenterry

Erst mal danke

, auch wenns mich ein wenig verwirrt.

Habs kapiert, zwecks dem Leerzeichen!

Willst du ihnen aufzwingen, welche Schriftgröße sie zu lesen haben?

Nein, aufzwingen möcht ich niemandem was, ich kanns nur nicht besser. Ich möchte nur der Schrift aufzwingen, dass sie im Kästchen zu bleiben hat. Heiß das, dass ich nun alle Angaben in em umwandeln soll?

Warum gibst du für die gesamte Seite 0.9em vor?

Ich hab 0,9 em vorgegeben, damit ich das nicht überall extra reinschreiben muss. Hat mir mal ein Dozent für webdesign empfohlen als ichs einzeln definiert hatte.

Btw: CSS kennt keine "Befehle".

was heißt das?

Du hast in diesem Codeabschnitt hier und auch sonst auf deiner Seite noch einige Fehler drin.

Schad eigentlich, dass das beim validieren nicht angezeigt wird. Ich hab extra strict angegeben. Ich dachte so schlecht sei mein html gar nicht, bin auch ehrlich gesagt überfordert damit rauszufinden, was korrekt ist, wenns schon valide ist.

@eydeet
Danke, ich werd mal versuchen mir die nötigen Kenntnisse anzueignen, wenn ichs mit html und css nicht hinbekomm

LX · Sep 16, 2007

Original von Landra
font-family: Maiandra GD; Verdana;

Maiandra GD würde ich schonmal gar nicht als Schriftart im Web verwenden, da dies keine der wenigen Standardschriftarten ist, die auf den meisten Systemen vorhanden sind. Dazu gehören nur Fonts wie Verdana, Arial, Helvetica, Courier und Times New Roman (die in vielen Fällen sogar auf Linux-Systemen vorhanden sind). Schon allein dadurch kann es passieren, dass die Schrift eines Menüpunktes auf einem System, das diese Schriftart hat, anders aussieht als auf einem System, welches die Alternativschrift Verdana verwendet, da selbst bei gleicher Schriftgröße das Kerning der Schriftarten unterschiedlich sein kann und eine Schrift dadurch breiter sein kann als eine andere.

BTW sollte abschließend bei Font-Angaben immer eine generische Font-Familie angegeben werden, wie Tasmas schon anmerkte.

IV. Ich möchte erreichen, dass sich die max. Wortbreite der Menükästchen-Breite von 110px anpasst. egal unter welchen Einstellungen im Browser. Auch wenn die angegebenen Schriftarten nicht zu finden sind...

Dafür wirst du mit CSS nichts finden. Du kannst bestenfalls überstehende Schrift abschneiden oder (wenn Leerzeichen drin sind) umbrechen lassen. Anhand der Länge eines Textes aber dessen Schriftgröße zu bestimmen ist mit CSS nicht möglich.

Btw: CSS kennt keine "Befehle".

Zum Vergrößern anklicken....

was heißt das?

CSS kennt Selektoren und Eigenschaften.

valenterry · Sep 16, 2007

Original von Landra
@valenterry

Erst mal danke , auch wenns mich ein wenig verwirrt.

Habs kapiert, zwecks dem Leerzeichen!

Willst du ihnen aufzwingen, welche Schriftgröße sie zu lesen haben?

Zum Vergrößern anklicken....

Nein, aufzwingen möcht ich niemandem was, ich kanns nur nicht besser. Ich möchte nur der Schrift aufzwingen, dass sie im Kästchen zu bleiben hat. Heiß das, dass ich nun alle Angaben in em umwandeln soll?

Genau. Anstatt 110px für eines dieser Kästchen, solltest du eine flexible Größe in "em" angeben. Wenn du dann für die Schriftgröße auch "em" wählst, vergrößern sich die Kästchen und die darin enthaltene Schrift gleichmäßig und die Schrift kann nicht zu groß werden.

Du hast in diesem Codeabschnitt hier und auch sonst auf deiner Seite noch einige Fehler drin.

Zum Vergrößern anklicken....

Schad eigentlich, dass das beim validieren nicht angezeigt wird. Ich hab extra strict angegeben. Ich dachte so schlecht sei mein html gar nicht, bin auch ehrlich gesagt überfordert damit rauszufinden, was korrekt ist, wenns schon valide ist.

Benutz einfach mal die Fehlerkonsole deines Browsers. Du hast übrigens keine XHTML Fehler, sondern ausschließlich CSS Fehler (auf der Hauptseite 5 an der Zahl).

Landra · Sep 16, 2007

@ valenterry

Genau. Anstatt 110px für eines dieser Kästchen, solltest du eine flexible Größe in "em" angeben. Wenn du dann für die Schriftgröße auch "em" wählst, vergrößern sich die Kästchen und die darin enthaltene Schrift gleichmäßig und die Schrift kann nicht zu groß werden.

Ok, dann versuch ich das mal, bevor ich php oder JavaScript lern

Benutz einfach mal die Fehlerkonsole deines Browsers. Du hast übrigens keine XHTML Fehler, sondern ausschließlich CSS Fehler (auf der Hauptseite 5 an der Zahl).

Mach ich sobald ich rausgefundehab, wie die funktioniert.

Vielen Dank, ihr habt mir sehr weitergeholfen.

valenterry · Sep 16, 2007

Original von Landra
@ valenterry

Genau. Anstatt 110px für eines dieser Kästchen, solltest du eine flexible Größe in "em" angeben. Wenn du dann für die Schriftgröße auch "em" wählst, vergrößern sich die Kästchen und die darin enthaltene Schrift gleichmäßig und die Schrift kann nicht zu groß werden.

Zum Vergrößern anklicken....

Ok, dann versuch ich das mal, bevor ich php lern

PHP? Lies dir Eydeets Thread nochmal ganz in Ruhe durch.

Benutz einfach mal die Fehlerkonsole deines Browsers. Du hast übrigens keine XHTML Fehler, sondern ausschließlich CSS Fehler (auf der Hauptseite 5 an der Zahl).

Zum Vergrößern anklicken....

Mach ich sobald ich rausgefundehab, wie die funktioniert.

Falls du Firefox benutzt: Extras -> Fehler-Konsole
Falls du den IE benutzt: Wechsel zu Firefox

Eydeet · Sep 17, 2007

Original von LX
Maiandra GD würde ich schonmal gar nicht als Schriftart im Web verwenden, da dies keine der wenigen Standardschriftarten ist, die auf den meisten Systemen vorhanden sind. Dazu gehören nur Fonts wie Verdana, Arial, Helvetica, Courier und Times New Roman (die in vielen Fällen sogar auf Linux-Systemen vorhanden sind).

Das würde ich nicht allgemein sagen. Genau aus diesem Grund ist die Auswahl mehrerer Schriftarten in CSS doch vorgesehen. Der Designer kann seine Lieblingsschriftart auswählen, die nicht unbedingt oft vorkommen muss. Als zweites nimmt er dann eine Schriftart, die fast genau so gut aussieht, und so weiter, bis er letztendlich bei der allgemeinen Familie angelangt (serif, sans serif, fixed oder fantasy).
Dadurch wird auch das Designen viel interessanter, wenn nicht immer die Standard-Schriftarten benutzt werden.

@Landra:
Wenn du eine feste Größe für die Menü-Punkte haben willst, kannst du dein Problem NUR mit JavaScript lösen, was natürlich nicht überall funktioniert. Die einzige andere Möglichkeit wäre es, die Menü-Rahmen dynamisch zu verändern, was ich dir auch raten würde.
Benutzer mit 25-Zoll-Bildschirmen stellen wahrscheinlich die Schriftgröße schon mal größer ein. Du möchtest sie allerdings dazu zwingen, eine für sie recht kleine Schriftart zu wählen (kann man im Firefox sogar verhindern, dann hilft auch JS nichts).
Benutzer mit 9-Zoll-Bildschirmen (oder MPhones

) ärgern sich dann über einen Haufen von riesigen 110-Pixel-Kästen auf ihrem Bildschirm, der sie zwingt, erst einmal zu blättern, damit sie überhaupt jeden Menüpunkt lesen können.

PHP für dieses Problem in Betracht zu ziehen ist natürlich Blödsinn. Das Problem ist System-spezifisch, was soll der Server daran machen?

html css Schriftgrößenanpassung ans div

0

0

0

IsNull

Guest

0

0

0

0

0

0

0

0

0

0

0

0