schriftgrößen umstellen...

[azok]

hi!

einen schönen (in ö leider verregneten) nachmittag wünsche ich!

zu meiner frage:

ich habe auf der seite www.css4you.de durch zufall gesehen, dass, wenn ich die schriftgröße durch die schaltfläche im browser verändern will (also sehr groß, groß, normal... etc.) die schriftart bei "sehr groß" nicht sehr groß wird, sondern (als kleines beispiel) anstelle von 12pt 14pt genommen werden. nun, weiß wer von euch, wie ich das mit css hinbekommen kann?

---

eine andere frage: kann man (wenns geht, dann wie) in einem container den text am bottom beginnen lassen (wie bei einer tabelle)?

lg
azok (=freak)

[chlori]

Hi

ich habe auf der seite www.css4you.de durch zufall gesehen,
dass, wenn ich die schriftgröße durch die schaltfläche im
browser verändern will (also sehr groß, groß, normal...
etc.) die schriftart bei "sehr groß" nicht sehr groß wird,
sondern (als kleines beispiel) anstelle von 12pt 14pt
genommen werden. nun, weiß wer von euch, wie ich das mit
css hinbekommen kann?

Was ist genau dein Problem?

IE hat Mühe mit den verschiedenen Einheiten. Spiel mal rum,
zB Schriftgrösse 1em; etc.

Die richtigen Browser können AFAIK in viel mehr Stufen
vergrössern/verkleinern, so dass dein Problem vermutlich
da keins ist...

Vielleicht habe ich dich falsch verstanden.

Gruss
chlori

[azok]

hi!

erst mal danke für deine antwort. aber ich hab es so gemeint, dass wenn ich die schrift bei meiner hp (die sich noch im aufbau befindet) auf (im mozzilla) z.b. 200% vergrößere, das die schriften ineinander verschoben werden. um das zu vermeiden müsste es ja irgendetwas geben, mit dem man die größte schrift, die verwendet werden soll vorgeben kann. -> www.css4you.de (wird beim ie ein bisschen größer, beim mozzilla auch...). naja, wenn halt aus dem nix wird, kann ich mit css irgendetwas machen, wo man auf z.b. einen großen buchstaben klickt, um zu der größe des buchstaben zu gelangen (so eine art, "zugreifen" auf die schriftgröße des browsers...)

lg
azok (=freak)

[wahsaga]

hi,

[...] wenn ich die schrift bei meiner hp (die sich noch im aufbau befindet) auf (im mozzilla) z.b. 200% vergrößere, das die schriften ineinander verschoben werden.

arbeitest du mit absoluter positionierung? da treten solche effekte oft auf.

um das zu vermeiden müsste es ja irgendetwas geben, mit dem man die größte schrift, die verwendet werden soll vorgeben kann.

nein, nicht wirklich.

-> www.css4you.de (wird beim ie ein bisschen größer, beim mozzilla auch...).

der IE hat unter verwendung realtiver schriftgrößenangaben in z.b. em einen bug, der manchmal dafür sorgt, dass die vergrößerung sehr extrem ausfällt.
dem kann man entgegenwirken, in dem man für den body eine scriftgröße von 100.01% definiert, auf die sich die relativen angaben für die anderen elemente dann beziehen.

naja, wenn halt aus dem nix wird, kann ich mit css irgendetwas machen, wo man auf z.b. einen großen buchstaben klickt, um zu der größe des buchstaben zu gelangen (so eine art, "zugreifen" auf die schriftgröße des browsers...)

du kannst natürlich in deinem browser bzw. auf deinem system die vorgegebene standardschriftgröße anders einstellen. aber das wird natürlich bei den besuchern deiner seite wenig nutzen ...

gruß,
wahsaga

[azok]

hi!

arbeitest du mit absoluter positionierung? da treten solche effekte oft auf.

ja, damit arbeite ich. naja, wenns nicht geht, kann man auch nix machen. (geht es irgendwie, dass die schriftgröße bei verschiedenen auflösungen immer in lesbarer größe erscheint?)

---

wegen den containern (div-ebenen), kann ich da einen text irgendwie mit vertical-align:bottom; am bottom fixieren??

lg
azok (=freak)

[wahsaga]

hi,

arbeitest du mit absoluter positionierung? da treten solche effekte oft auf.

ja, damit arbeite ich. naja, wenns nicht geht, kann man auch nix machen.

doch, du kannst dein layout ohne zu exzessive verwendung absoluter positionierung gestalten.

css-einsteiger greifen oft zu absoluter positionierung, weil sie die möglichen alternativen wie float etc. noch nicht genügend verstanden haben.

aber ich sage es immer wieder: absolute positionierung ist _nicht_ der helige gral.

davon ab könntest du natürlich auch noch versuchen, fixe werte für positionierungen und höhen-/breitenangaben von elementen zu vermeiden, und stattdessen in einheiten wie em arbeiten, die sich auf die schriftgröße beziehen - dann "wachsen" solche elemente und ihre positionierungen bei schriftvergrößerung mit.

wegen den containern (div-ebenen), kann ich da einen text irgendwie mit vertical-align:bottom; am bottom fixieren??

nein, vertical-align wirkt in diesem zusammenhand nicht.
aber warum verwendest du kein paading-top, um mehr abstand zu oberen elementrand herzustellen?

gruß,
wahsaga

[azok]

hi!

danke für deine antwort!

aber, wie kann ich machen, dass sich eine bestimmte ebene (z-index 1) nach der größe einer anderen "ausdehnt"? (die andere hat z-index 2). also ich habe eine haupt-ebene und eine ebene, die um diese den rahmen bildet. nun ist in der haupt-ebene sehr viel text, sodass sie sich - mit text befüllt - über die rahmenebene hinausdehnt!. dies macht wiederum einen recht verworrenen eindruck, da vom layout rein gar nichts mehr stimmt. wie könnte ich also das problem lösen?

--

und dann noch ein anderes problem. ich habe 2 weitere ebenen (z-index 2), eine mit copyright hinweis, die andere mit den w3c bildchen (für valides xhtml und css level 2). diese sollen immer am ende des haupt-textfeldes sein, also noch bevor der rahmen die ganzen felder umschließt. kann man irgendwie machen, dass diese felder immer auf einem  punkt, der sich - je nach textmenge - verschieben lässt, "sitzen bleiben"? (danach soll dann der rahmen kommen, der aber 5px abstand zw. dem copyright hinweis haben soll...)

wie würdet ihr dieses problem lösen?
(es ist für einen relaunch einer seite, die aber vom design her gleichbleiben soll, aber statt des tabellen layouts sollen container genommen werden (div-ebenen))

freue mich auf eure antworten.
lg
azok (=freak)

[wahsaga]

hi,

aber, wie kann ich machen, dass sich eine bestimmte ebene (z-index 1) nach der größe einer anderen "ausdehnt"?

wenn du absolute positionierung verwendest, und damit die elemente aus dem fluss nimmst, gar nicht - dann beeinflussen sie nämlich die maße ihrere elternelemente nicht mehr.

(ich sag doch, dass absolute positionierung mehr problem schafft, als sie löst ...)

wie würdet ihr dieses problem lösen?

nachdem ich mir dein layout nach dem link im anderen beitrag angesehen habe - auf jeden fall ohne dass das schlüsselwort "position" im css auch nur ein mal auftaucht.

aber nein, wir werden dir jetzt hier nicht dein layout verbessern, denn das ist deine aufgabe.

beschäftige dich eingehender mit techniken wie float - und höre auf, immer direkt an "position:..." zu denken.

gruß,
wahsaga

[azok]

danke für deine antwort.

das mit float is ja schön und gut, ich verstehe es auch irgendwie, aber ich kann mir kein bild davon machen, wie ich es einsetzen soll...

lg
azok (=freak)

[azok]

hab mich gerade leider etwas wage ausgedrückt.
ich meine, ich verstehe, dass durch float einzelne texte... herumfließen. nur, wie bringe ich dann das feld menü auf die richtige position? (ich weiß nicht, wies mit float geht... bzw. auf selfhtml find ich nicht viel dazu... lediglich http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float...
und das hat mir nicht sehr viel weiter geholfen...

lg
azok (=freak)

[wahsaga]

hi,

ich meine, ich verstehe, dass durch float einzelne texte... herumfließen. nur, wie bringe ich dann das feld menü auf die richtige position?

du lässt es einfach mit float:left nach links "fliessen".
und der eigentliche inhaltsbereich steht dann im quelltext direkt dahinter, und wird gg.f noch mit margin auf abstand gehalten.

schau dir mal ein paar der beispiele unter http://glish.com/css/ an, und versuche sie nachzuvollziehen.

gruß,
wahsaga

[azok]

hi!

meinst du das mit float etc. etwa so? http://www.djcrackman.net/usr/chopin/nichtda_layer.php4? nur, was macht der IE da mit dem schönen layout??? es is mit dem mozilla so, wie es sein soll, nur der IE macht da nicht mit...

lg
azok (=freak)

[azok]

da macht man sich die mühe, erstellt ein layout mit divs, im mozilla, ns überall sonst funktionierts, nur der IE macht wieder Probleme. (siehe vorheriges posting)

hoppla... ich vergaß zu erwähnen,
dass der header-layer bei höherer auflösung sich neben den main-layer stellt. was aber nicht sein darf. wie kann ich soetwas umgehen, ohne position:absolute; bzw. siehe das problem tritt bei normaler auflösung  auch im IE auf. nur ist dort der text an einem platz, wo der layer gar nicht ist...

hoffentlich könnt ihr mir helfen...
schön langsam drehe ich durch dabei

lg
azok (=freak)

[Ingo Turski]

Hi,

Daß der IE Probleme mit der korrekten Umsetzung von CSS hat, ist ja nichts neues. Eine Möglichkeit der Korrektur hast Du ja bereits verwendet, wobei ich mich frage, warum nur für den IE 6?

Allerdings wenn ich hier und auf Deiner Seite lese "verwende ich jetzt die immer mehr verwendeten Container (div-Ebenen)", dann muß ich Dir leider sagen, daß Du hier etwas gründlich falsch verstanden hast. "div-Ebenen" sind nicht modern. Sie werden allerdings vorschnell von Umsteigern so gesehen und in der Tat sehen die Quelltexte nicht viel anders aus als die früher mit Tabellen erstellten. Es geht bei moderner HTML-Auszeichnung und CSS-Nutzung um die sinnvolle Verwendung der zur Verfügung stehenden Elemente. Und darum, mit so wenig wie möglich Elementen auszukommen.
Bei Dir sehe ich direkt am Anfang:

<div id="header">
 <span class="klein">Sie befinden sich:</span>
</div>

Wozu das DIV? Und wozu erst recht der SPAN darin? Täte es ein
<p id="breadcrumb">Sie befinden sich:</p>
nicht viel besser?`

Und dann:

<div id="frame">
  <div id="menu">
    <h1>Men&uuml;</h1>
    An dieser Stelle steht bald ein umfassendes Navigations-Men&uuml;!
  </div>
<div id="main">

Die DIVS frame und main sind ja Ok, wenngleich das erste vor dem öffnen des zweiten wieder geschlossen werden sollte, denn sie gruppieren verschiedene Elemente und Inhalte. Was soll aber H1 hier? Ist "Menü" wirklich Deine Seitenüberschrift erster Ordnung?
Den (wenn auch vorläufigen) Inhalt setzt Du dagegen in kein passendes Element. Auf der ganzen Seite verwendest Du kein einziges P, stattdessen jede Menge doppelter BRs.

Mal ein Tip, wie Du viel besser vorgehen solltest: Erstelle zunächst den Inhalt und zeichne ihn mit den passenden HTML-Elementen aus. Erst dann fange mit dem Design über die CSS-Formatierung der Elemente an. Es kann sein, daß dann gewisse Umstrukturierungen oder zusätzliche Elemente notwendig werden, aber das ist dann OK.

Vielleicht siehst Du Dir mal mein sehr einfaches Beispiel an: http://www.1ngo.de/web/css-layout.html - besonders den simplen HTML-Code. Dann spiele mit dem Design und Du wirst feststellen, wieviel selbst mit diesen wenigen Elementen möglich ist. Und dann zähle doch einmal die auf dieser Seite vorhandenen DIVs ...

freundliche Grüße
Ingo

[azok]

hi!

danke für deine antwort! die vielen vorlagen zu diversen textgrößen etc. sind deshalb drinnen, da außer dieser einen seite schon weitere seiten bestehen, die diese einzelnen elemente verwenden.

ok. das mit den brs bin ich gerade dabei es zu ändern.

wobei ich mich frage, warum nur für den IE 6

ich weiß nämlich nicht, wie ich es sonst machen sollte...

habe ich verschachtelt, weil man am code sonst realativ leicht die übersicht verliert.

nur, warum zieht der IE einen abstandt von ca. 100px viel weiter ein als Mozilla???

bzw. warum setzt er mir die ebene #main unter die ebene #menu, wo doch main ein float:left und menu auch ein float:left hat???

wie kann ich das eventuell umgehen, das soetwas beim IE nicht passiert?

lg
azok (=freak)

[wahsaga]

hi,

bzw. warum setzt er mir die ebene #main unter die ebene #menu, wo doch main ein float:left und menu auch ein float:left hat???

weil #main einfach zu breit ist um neben #menu dargestellt zu werden - in diesem falle _muss_ es bei verwendung von float darunter erscheinen.

aber warum haben denn überhaupt beide container bei dir ein float:left, und warum hat #main auch eine feste breitenangabe?

lass doch einfach #menu links floaten, und gib nur diesem eine feste breite.
#main nimmt sich dann halt einfach den "rest", der in der breite des übergeordneten containers neben dem menü noch verfügbar ist.

dazu bekommt #main noch ein entsprechendes margin:left, damit sich seine inhalte unterhalb des menüs nicht wieder über die gesamte breite verteilen, und gut is'.

schau dir doch bitte die beispiele auf der seite http://glish.com/css/ noch mal an, und beschäftige dich etwas intensiver damit.

z.b. http://glish.com/css/9.asp, da wirst du sehen, dass auch nur für einen der bereiche eine feste breite vorgegeben wurde, und nicht für beide. wozu auch? dann lässt man den anderen bereich sich einfach nehmen, was noch übrig ist.
wenn dieser aber nicht beliebig breit werden soll, dann setzt man halt beide zusammen noch in einen container mit fester breite.

gruß,
wahsaga

[Ingo Turski]

Hi,

wobei ich mich frage, warum nur für den IE 6

ich weiß nämlich nicht, wie ich es sonst machen sollte...

ganz einfach: <!--[if IE]>

freundliche Grüße
Ingo

[azok]

hi!

habe nun folgendes problem mit einer div-ebene.
auf der seite http://www.djcrackman.net/usr/chopin/layout_layer.php4 sind innerhalb der schwarz umrandeten fläche (z-index:1) mehrere div-ebenen (alle mit z-index:2). eine davon bereitet mir sorgen, nämlich die, wo "menü" drin steht. schaut man die seite im IE an, ist das menü richtig, so wie es sein sollte oben eingezogen. dasselbe auch beim mozilla (den ich zwar lieber habe), aber dort ist halt die schrift MENÜ um ca. 4px unter dem schwarzen vertikalen strich. ausschauen sollte es so wie beim IE, aber wie geht das? (ich hasse den ie nämlich, und "text-auszeichne" vorzugsweise für den mozilla, ns...). padding-top:0px oder margin-top:0px bringt mir für die div-ebene menu keine wirkliche hilfe...

meine frage also, was kann ich tun, dass es so wie im IE ausschaut?

lg
azok (=freak)

[wahsaga]

hi,

dasselbe auch beim mozilla (den ich zwar lieber habe), aber dort ist halt die schrift MENÜ um ca. 4px unter dem schwarzen vertikalen strich. ausschauen sollte es so wie beim IE, aber wie geht das?

du möchtest den abstand einer <h1>-überschrift nach oben hin (margin-top) _explizit_ vorgeben, anstatt dich hier einfach auf den default des jeweligen browsers zu verlassen (der hier wohl unterschiedlich auszufallen scheint).

gruß,
wahsaga

[Ingo Turski]

Hi,

müsste es ja irgendetwas geben, mit dem man die größte schrift, die verwendet werden soll vorgeben kann. -> www.css4you.de (wird beim ie ein bisschen größer, beim mozzilla auch...).

hier wird als Basisschriftgröße 85% vorgegeben. Das ist natürlich ziemlich klein, so daß sich eine Vergrößerung mit den üblichen Faktoren in Grenzen hält.
Eine sinnvolle Lösung Deines Problems dürfte aber in der Verwendung relativer Größenangaben nicht nur für die Schrift sondern auch für Breitenangaben sein - und natürlich der Verzicht auf absolute Positionierungen, soweit dies möglich ist. Sieh' Dir mal http://www.1ngo.de/web/em.html an und verändere die Schriftgröße.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

http://www.1ngo.de/web/em.html

Schau dir die Seite nochmal bei (stark) vergrößerter Schrift oder/und (sehr) schmalem Browserfenster an.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Schau dir die Seite nochmal bei (stark) vergrößerter Schrift oder/und (sehr) schmalem Browserfenster an.

was meinst Du denn? Daß sich der Inhaltsbereich unter das Menü schiebt, ist mir klar. Und daß die Kopfgrafik den Rahmen nicht mehr ausfüllen kann auch, aber das finde ich nicht tragisch.

Was allerdings nicht passiert und worüber es auf dieser Seite ja auch geht: daß sich Elemente überlagern oder Inhalte nicht mehr in die Boxen passen.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

was meinst Du denn? Daß sich der Inhaltsbereich unter das Menü schiebt, ...

natürlich nicht (kennst du mich so schlecht?)

Und daß die Kopfgrafik den Rahmen nicht mehr ausfüllen kann auch, aber das finde ich nicht tragisch.

Das schon eher.

Was allerdings nicht passiert und worüber es auf dieser Seite ja auch geht: daß sich Elemente überlagern oder Inhalte nicht mehr in die Boxen passen.

Wirklich nicht?

<img src="http://d-graff.de/demos/selfhtml/ingo.png" border="0" alt="">

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi Detlef,

Und daß die Kopfgrafik den Rahmen nicht mehr ausfüllen kann auch, aber das finde ich nicht tragisch.

Das schon eher.

naja, ich geb' ja zu, daß ich zunächst dran gedacht hatte, das Bild nach allen Seiten noch zu erweitern; war mir dann aber doch zuviel Arbeit ;-)
Aber ich finde bestimmt noch ein flexibleres.

Was allerdings nicht passiert und worüber es auf dieser Seite ja auch geht: daß sich Elemente überlagern oder Inhalte nicht mehr in die Boxen passen.

Wirklich nicht?

Oops. Das ist aber neu - ich hätte wohl nach der Einbindung des Bildes keine Höhe definieren sollen. Habe ich jetzt aber rausgenommen. Danke für den Hinweis.

freundliche Grüße
Ingo

[Detlef G.]

Hallo  Ingo

Oops. Das ist aber neu - ich hätte wohl nach der Einbindung des Bildes keine Höhe definieren sollen. Habe ich jetzt aber rausgenommen. Danke für den Hinweis.

Ich würde dem #webtitel span noch ein white-space:nowrap mitgeben.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Ich würde dem #webtitel span noch ein white-space:nowrap mitgeben.

guter Tip, habe ich sofort umgesetzt. Und wo ich schonmal dabei war, auch gleich das letter-spacing ausnahmsweise in px angegeben - macht ja wenig Sinn, wenn sich das bei Schriftvergrößerung mitvergrößert und der Text so früher nicht mehr in die Box paßt.

freundliche Grüße
Ingo