Font an DIV anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
automatisch ablaufen
beispiel
bestimmen
bestimmung
code
eigentliche problem
element
fixieren
frage
jemand
kleinere schrift
momentan folgendes problem
optimal code
pixel
platz
schrift
text
wissen
-
Moin,
auch wenn ich scho länger nix mehr gepostet habe, vertrau ich natürlich auf das Wissen der LC User :)
also ich hab momentan folgendes Problem:
ich hab ein DIV mit x pixel... in diesen x Pixel soll auf jedenfall ein Textpassen, sofern dieser Text aufgrund der Standartschrifgröße nicht passt, soll die Schrift kleiner werden...
gibts da iwas in CSS? Oder vielleicht kann mir ja auch jemand n alternativplan geben... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
mclman schrieb:
Moin,
auch wenn ich scho länger nix mehr gepostet habe, vertrau ich natürlich auf das Wissen der LC User :)
also ich hab momentan folgendes Problem:
ich hab ein DIV mit x pixel... in diesen x Pixel soll auf jedenfall ein Textpassen, sofern dieser Text aufgrund der Standartschrifgröße nicht passt, soll die Schrift kleiner werden...
gibts da iwas in CSS? Oder vielleicht kann mir ja auch jemand n alternativplan geben...
soweit ich weiss dürfte das nur mit js oder php gehen:
javascript-beispiel (script ist aber noch nicht optimal):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style type="text/css"> .resizeDIV { width: 20px; font-size: 12px; font-family : Verdana; border: solid 1px #000;} </style> <script type="text/javascript"> function resizeiIT() { size = document.getElementById('input_size').value; document.getElementById('resizeDIV').style.width = size; document.getElementById('resizeDIV').style.fontSize = size/2 } </SCRIPT> </head> <body> <div class="resizeDIV" id="resizeDIV"> Hallo </div> Größe ändern:<br> <input type="Text" name="input_size" value="20" size="4" id="input_size">px<br> <input type="Button" name="input_size_change" value="Breite aendern" id="input_size_change" onClick="resizeiIT()"> </body> </html>
Die beste lösung wäre aber wohl mit php.
DIe Seite müpsste dann aber für jede änderung neugeladen werden -
Wenn ich dich richtig verstehe, ist das eigentliche Problem zu bestimmen, ob der Text überhaupt platz hat und es sollte automatisch ablaufen. Die Breite kannst du ja mit css fixieren. Zur bestimmung der Textgrösse käme für mich dann auch Javascript in frage:
var soll-hoehe= ...; var ist-hoehe = element.offsetHeight; if(soll-hoehe<ist-hoehe){ element.setAttribute("style","font-size:??px"); }
Die Schriftgrösse lässt sich eventuel aus dem Ist-wert berechnen. Oder halt in einer Schleife die Schriftgrösse kontinuierlich verkleinern bis es passt. -
also du willst also die schrift verkleinern vergrößern im div : das geht doch ganz einfach mit css??
hier:
#text{
font-family:sans-serif;
font-size:11px;
}
Beitrag zuletzt geändert: 4.2.2010 16:15:50 von maxdes -
Maxdes, die Stichworte heißen "dynamisch" und "automatisch". Da reicht CSS nicht aus.
FF
-
das geht aber doch auch mit css
font-size: 1 em ; etc. ich meine damit passt sich die schrift der bildschirmgröße an -
Nein, damit setzt Du die Schriftgröße auf das 0,8-fache der, für das übergeordnete Element vorgegebenen Größe.
Die Größe der Schrift ist also nicht wirklich dynamisch.
Der em-Wert müßte noch dynamisch an die Menge des Textes angepaßt werden: Mehr Text -> kleinere Schrift.
Textmengen lassen sich aber mit reinem CSS nicht bestimmen.
FF -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
