nicht angemeldet
Text in DIV skaliert nicht mit
Hallo,
ich habe folgendes Problem auf das ich leider noch keine Lösung gefunden habe.
Ich habe ein Menü aus 3 DIV-Ebenen (Hintergrundbild, Button und Text). Die Button verändern sich auch wunderbar wenn man die Auflösung oder Fenstergröße ändert. Nur leider der Text nicht.
Er ist immer gleich gross und es sieht daher eher mies aus. Bilder möchte ich für den Text nicht nehmen, weil die Seite so schon nicht zu den schnellsten im Netz gehört.
Ein Beispiel aus der .html:
<div id="box1"><img src="Images/Menu/Button_leer.gif" width="95%" height="20%" border="0" alt="" >
<div id="text1"><a href="indox.html" target="rechts">HOME</a></div></div>
Und aus der .css:
body {
margin:0;
background-color:#000000;
font-family:Verdana;
font-weight: bold;
font-size:70%
}
#box1 { position:absolute; left:15%; top:4%; width:75%; height:35%; z-index:2; }
#text1 { position:relative; top:-15%; left: 35% }
Danke für eure Hilfe. Wenn das Thema vor kurzem schonmal dran war, bitte nicht sauer sein, hab ich übersehen. Wäre nett, wenn ihr mir dann einen Suchbegriff nennen könntet :)
Achja, es ist das linke Menü auf der verlinkten Seite.
-
Hallo Chris,
ich habe folgendes Problem auf das ich leider noch keine Lösung gefunden habe.
Ich habe ein Menü aus 3 DIV-Ebenen (Hintergrundbild, Button und Text). Die Button verändern sich auch wunderbar wenn man die Auflösung oder Fenstergröße ändert. Nur leider der Text nicht.Er ist immer gleich gross und es sieht daher eher mies aus.
Text skalieren -> Änderung der Schriftgröße (font-size), Zeichenabstand (letter-spacing), Wortabstand (word-spacing), etc.!
Aber da jeder User z.B. den Schriftgrad auch noch selber einstellen kann, wirst du auf diesem Wege nicht das erreichen, was du vermutlich willst.A propos - was willst du denn eigentlich? Dass deine Seite auch noch in einem Fenster von 50px x 50px in den gleichen Proportionen angezeigt wird? Ich finde eher, dass bei dir schon zuviel 'angepasst' wird (siehe Image unter dem Menü, Punkt 'relative Positionierung' in Prozent in Kombination mit Größenangaben in Prozent). Meine Meinung - setze einfach bestimmte Mindestgrößen voraus (z.B. mit style="min-height: xy px;min-width: yx px"), was allerdings (leider) bis jetzt nur AFAIK vom NS>=6 interpretiert wird. Zu diesem Thema gibt es aber viele Beiträge hier im Archiv.
Und ein Tipp noch: Für die Ausrichtung in z.B. div-Elementen eignen sich die CSS-Anweisungen "text-align" und "vertical-align" ganz hervorragend ;-) .
Fazit: IMHO wirst du keinen Weg finden, deine Seite für alle Fenstergrößen und alle userdefinierten Einstellungen gleichermaßen in der Darstellung anzugleichen. Die Frage ist ja: "Muss man das wirklich?".
Gruß Gunther
-
Hallo Gunther,
Text skalieren -> Änderung der Schriftgröße (font-size), Zeichenabstand (letter-spacing), Wortabstand (word-spacing), etc.!
Ist klar. Aber ich habe Prozente für die size vereinbart und soll daher sich an die Fenstergröße anpassen.
Naja soll jedenfalls :)Aber da jeder User z.B. den Schriftgrad auch noch selber einstellen kann, wirst du auf diesem Wege nicht das erreichen, was du vermutlich willst.
Das kann er ja ruhig. Sie wird dann halt prozentual verkleinert.
A propos - was willst du denn eigentlich? Dass deine Seite auch noch in einem Fenster von 50px x 50px in den gleichen Proportionen angezeigt wird? Ich finde eher, dass bei dir schon zuviel 'angepasst' wird (siehe Image unter dem Menü, Punkt 'relative Positionierung' in Prozent in Kombination mit Größenangaben in Prozent). Meine Meinung - setze einfach bestimmte Mindestgrößen voraus (z.B. mit style="min-height: xy px;min-width: yx px"), was allerdings (leider) bis jetzt nur AFAIK vom NS>=6 interpretiert wird. Zu diesem Thema gibt es aber viele Beiträge hier im Archiv.
50x50 nicht unbedingt, aber ich möchte, das die Schrift bei 640x480 in der Mitte der Buttons ist und auch bei 1600x1280. Die dazwischen liegenden Auflösungen und Fenstergrößen natürlich inbegriffen, und soweit funktioniert das auch zum größten Teil.
Und ein Tipp noch: Für die Ausrichtung in z.B. div-Elementen eignen sich die CSS-Anweisungen "text-align" und "vertical-align" ganz hervorragend ;-) .
Hab ich probiert, funktioniert leider nicht. Trotzdem Danke für den Tipp!
Fazit: IMHO wirst du keinen Weg finden, deine Seite für alle Fenstergrößen und alle userdefinierten Einstellungen gleichermaßen in der Darstellung anzugleichen. Die Frage ist ja: "Muss man das wirklich?".
Geht nicht, gibts nicht. Ob man es muss ist eine andere Frage, aber es ist schon mein Ziel, das der User mit seinem Browserfenster alles machen kann, was er gerne möchte, aber immer ein perfektes Angebot bekommt. Naja, meine Meinung.
Gruß, Chris
-
Hallo Chris,
Text skalieren -> Änderung der Schriftgröße (font-size), Zeichenabstand (letter-spacing), Wortabstand (word-spacing), etc.!
Ist klar. Aber ich habe Prozente für die size vereinbart und soll daher sich an die Fenstergröße anpassen.
Naja soll jedenfalls :)[Zitat SelfHTML]"Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgröße des Elternelements."[/Zitat]
und wie passt sich bitte deine Schriftgröße an die Größe des Browserfensters an?Aber da jeder User z.B. den Schriftgrad auch noch selber einstellen kann, wirst du auf diesem Wege nicht das erreichen, was du vermutlich willst.
Das kann er ja ruhig. Sie wird dann halt prozentual verkleinert.
Problem hierbei ist doch, dass sich dadurch bei dir _nur_ die Schriftgröße verändert, nicht aber dein Hintergrundbild, Button, etc.!
A propos - was willst du denn eigentlich? Dass deine Seite auch noch in einem Fenster von 50px x 50px in den gleichen Proportionen angezeigt wird? Ich finde eher, dass bei dir schon zuviel 'angepasst' wird (siehe Image unter dem Menü, Punkt 'relative Positionierung' in Prozent in Kombination mit Größenangaben in Prozent). Meine Meinung - setze einfach bestimmte Mindestgrößen voraus (z.B. mit style="min-height: xy px;min-width: yx px"), was allerdings (leider) bis jetzt nur AFAIK vom NS>=6 interpretiert wird. Zu diesem Thema gibt es aber viele Beiträge hier im Archiv.
50x50 nicht unbedingt, aber ich möchte, das die Schrift bei 640x480 in der Mitte der Buttons ist und auch bei 1600x1280. Die dazwischen liegenden Auflösungen und Fenstergrößen natürlich inbegriffen, und soweit funktioniert das auch zum größten Teil.
das ist ja auch nicht das Problem, sondern die Schriftgröße (und ich behaupte nach wie vor, dass das nicht funktioniert/funktionieren wird!)
Und ein Tipp noch: Für die Ausrichtung in z.B. div-Elementen eignen sich die CSS-Anweisungen "text-align" und "vertical-align" ganz hervorragend ;-) .
Hab ich probiert, funktioniert leider nicht. Trotzdem Danke für den Tipp!
[Zitat Chris]"Geht nicht, gibts nicht"[/Zitat]
da wirst du wohl was falsch gemacht haben ;-) - Quelltext?Fazit: IMHO wirst du keinen Weg finden, deine Seite für alle Fenstergrößen und alle userdefinierten Einstellungen gleichermaßen in der Darstellung anzugleichen. Die Frage ist ja: "Muss man das wirklich?".
Geht nicht, gibts nicht. Ob man es muss ist eine andere Frage, aber es ist schon mein Ziel, das der User mit seinem Browserfenster alles machen kann, was er gerne möchte,
das ist unbestritten (und zum Glück eh nicht verhinderbar)
aber immer ein perfektes Angebot bekommt.
das ist eben nicht möglich. Bsp.: Wenn deine Elemente in ihrer Anordnung eine Breite von mind. 200 Pixeln erfordern, ist eine korekte Darstellung in kleineren Fenstern eben nicht mehr möglich.
Man kommt eben um gewisse Mindestanforderungen nicht drumherum - die Frage ist halt nur, wie hoch man diese Ansetzt.
Naja, meine Meinung.
dito
Gruß Gunther
-
Guten Morgen Gunther,
[Zitat SelfHTML]"Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgröße des Elternelements."[/Zitat]
und wie passt sich bitte deine Schriftgröße an die Größe des Browserfensters an?gar nicht. Genau das ist das Problem! Die anderen Elemente (z.B. img tags, Tabellen) machen das ja hervorragend aber mit der Schrift habe ich das Problem.
Problem hierbei ist doch, dass sich dadurch bei dir _nur_ die Schriftgröße verändert, nicht aber dein Hintergrundbild, Button, etc.
Genau anders rum. Die Button ändern sich ja!. Also eigentlich fast alles, aber halt nicht die Schrift. Kannst es Dir ja mal angucken im linken Frame auf der verlinkten Seite.
das ist ja auch nicht das Problem, sondern die Schriftgröße (und ich behaupte nach wie vor, dass das nicht funktioniert/funktionieren wird!)
Hmm, habe ich wirklich "geht nicht, gibts nicht geschrieben? Hihi. Ich denke ich muss echt die Buttons in Photoshop beschriften. Aber das wären dann ca. 80 neue Buttons*4KB=320KB. Naja, oder ich lasse es so :(
da wirst du wohl was falsch gemacht haben ;-) - Quelltext?
Ich und falsch? Gut möglich :) Die .css:
#box1 { position:absolute; left:15%; top:4%; width:75%; height:35%; z-index:2; }
#text1 { position:relative; text-align:center; vertical-align: middle; z-index:3; }die .html:
<div id="box1"><img src="Images/Menu/Button_leer.gif" width="95%" height="20%" border="0" alt="" >
<div id="text1"><a href="indox.html" target="rechts">HOME</a></div></div>das ist eben nicht möglich. Bsp.: Wenn deine Elemente in ihrer Anordnung eine Breite von mind. 200 Pixeln erfordern, ist eine korekte Darstellung in kleineren Fenstern eben nicht mehr möglich.
Eigentlich sollte es so ab 250-280 Breite funtkionieren. Denn wenn ich für jedes Element Prozente angebe, dann ist die Minimumbreite halt die Anzahl der Elemente in Pixel, da ja jedes Element prinzipiell 1 px darstellen kann. Reine Theorie, denn ein paar Pixelangaben (z.B. 2 von 3 Spalten in einer Tabelle) habe ich ja noch. Aber so ab 600 sollte es auch gut aussehen. :) Träume sind doch was wunderbares.
Man kommt eben um gewisse Mindestanforderungen nicht drumherum - die Frage ist halt nur, wie hoch man diese Ansetzt.
600 in der Breite und 400 in der Höhe für eine sehr gute Ansicht. Darunter sollte es nur zu klein zum lesen sein, die Anordnung aber trotzdem passen.
Aber da Du gerade hier bist. Ein ärgerliches Problem habe ich noch. Ich wollte eigentlich einen neuen Thread nächste Woche aufmachen, wenn ich wirklich nicht mehr weiter weiss, aber bei der Gelegenheit:
Ich tausche die Punkte in den Listen durch Bilder aus und die Positionierung sieht nicht gerade wunderbar bei IE und Opera 7 aus:
IE6 (Padding ist nach oben hin genau 0, nach unten jedoch vorhanden.)
<img src="http://www.chrisgideon.com/Images/Screen_IE.png" border="0" alt="">
Opera 7 (die <li> Punkte setzt er innerhalb der Border. Da muss man schon genau hinschauen. Das ist ganz verquer. Und da es Opera und kein IE ist, muss der Fehler bei mir liegen, aber wo?)
<img src="http://www.chrisgideon.com/Images/Screen_O7.png" border="0" alt="">
Opera 6 ( genau so solls sein)
<img src="http://www.chrisgideon.com/Images/Screen_O6.png" border="0" alt="">
Die .css:
html {
border:2px ridge silver;
margin:0;
border-collapse:collapse;
}body {
margin:2%;
color:#000033;
font-family: Comic Sans MS, Verdana,Arial,Helvetica;
background-image:url('Images/Menu/bg_hell.jpg');
background-attachment:fixed;
padding:0px;
}p, li {
font-size:12px;
text-align:justify;
}
#Tabelle1 {
width:100%;
background-image:url('Images/Menu/bg_hell_blau.jpg');
color:black;
font-size:12px;
text-align:center;
vertical-align:middle;
padding:20px;
}Die .html:
<TR>
<TD WIDTH="74">
08.03.2003</TD>
<TD WIDTH="58">
4.3</TD>
<TD WIDTH="100%">
<ul>
<li>In der "<a href="privat.html">über mich</a>" Section könnt ihr nun etwas mehr über mich
erfahren.</li>
<li>Eine Seite über meine <a href="space.html">Lieblingsserie</a>
wurde fertig gestellt.</li>
</ul>
</TD></TR>Ich hoffe, ich habe das jetzt nicht überladen. Aber vielleicht hast Du ja da auch einen Tipp für mich auf Lager.
Danke, Chris
-
-
-