Schrift richtig positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufwand
auto
balken
beispiel
boxen
browser
code
element
grauen balken
negativen betrag
pixel
problem
rein passen
roten balken
schrift
schriftart
setzen
stil
url
zahl
-
Hallo zusammen.
Damit ihr mein Problem besser verstehen könnt habe ich es hier hochgeladen: http://moritz-m.bplaced.de/test3.php
Ihr seht einen roten Balken und direkt daneben einen grauen Balken. Neben dem roten Balken soll eine Zahl stehen. Die Balken sind 30px hoch und die Schrift soll 36px groß sein, also größer als der Balken. Deswegen guckt die Zahl unten aus dem grauen Balken raus. Allerdings sieht man, dass über der Zahl noch so viel Platz ist, dass die Zahl theoretisch in den grauen Balken rein passen würde. Nur wie mache ich es, dass die Zahl auch so positioniert wird, damit sie ganz rein passt? Also in diesem Fall, dass sie ganz oben am Rand von dem Balken liegt.
Hier ist der Code dazu:
<table width="800" border="0"> <tr> <td> <div> <div class="balken1" style="width:50%; height:30px; float:left;"> </div> <div style="width:50%; height:30px; float:right; background:#CCC;"> <span style="margin-left:3px; font-size:36px; font-family:Arial, Helvetica, sans-serif;"><b>5</b></span> </div> </div> </td> </tr> </table>
Ich hoffe mir kann jemand helfen.
Viele Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Da würde ich das Padding auf irgendeinen negativen Betrag setzten. Das das Element innen also größer is als außen.
-
jalstudios schrieb:
Da würde ich das Padding auf irgendeinen negativen Betrag setzten. Das das Element innen also größer is als außen.
Das ist Inakzeptabel. Sehr unsauberer Stil.
Folgendes:
Flack die Inline-styles raus und schreibe die in eine saubere CSS-Datei. Verteile vernünftige Klassennamen.
Dann mal eine Frage:
du hast ein Element, das 30 Pixel hoch ist, willst aber eine 36 Pixel hohe schriftart reinfitten? Versuchst du auch auf dem Aldi-Parkplatz LKWs zu parken?
Der grund, warum es reinpassen würde, liegt daran, dass die Schriftart nciht die maximale Höhe ausreizt, quasi gehört der balken drüber zur schriftart.
um die schrift sauber zu positionieren, solltest du folgende attribute vergeben:
*{ box-sizing: border-box; // für einheitliche Verrechnung Margins/Border auf Box-größe, sonst springt das layout... font-family: Arial; //damit du auf der gesamten Seite dieselbe Schriftart verwendest } div.klasseDesBeinhaltendenDivs { margin: 0 3px; overflow: hidden; //sicher ist sicher... } span.classOfSpan{ line-height: 30px; //wichtig, das ist das, was deinen text runter schiebt, weil das standardmäßig auf 1.5em ist font-size: 30px; //damit sollte es rein passen }
das teil sollte für alle browser kompatibel sein, sogar bis IE6 runter. und bitte, flack die inline-styles raus, die sind so hässlich.
ich habs jetzt so aus dem Gedächtnis geschrieben, probiers einfach aus, wenns geht, dann gehts, wenns nciht geht, stell das Resultat einfach hier rein und ich schau nochmal genauer drüber.
MfG
Beitrag zuletzt geändert: 6.2.2014 17:22:48 von sebulon -
Das ist Inakzeptabel. Sehr unsauberer Stil.
Ich lerne gerne, kannst du also noch etwas näher ausführen, was an einem negativen Padding so verwerflich ist? -
Nehmen wir ein einfaches Auto-Beispiel:
Du schraubst zu große Räder an dein Auto. Anstatt jedoch auf eine kleinere Größe zu wechseln, schneidest du die Radkästen aus. Das mag zwar so erstmal funktionieren, aber beim nächsten TÜV wird dir dein Auto stillgelegt...
es ist unsauber, außerdem werden von Browser zu Browser margins und paddings anders interpretiert, trotz Border-Box, was dieses Problem teilweise fixed.
Negative paddings werden von einigen Browsern gar nicht interpretiert. und somit verziehts dir auf anderen Browsern das Design... Der Firefox macht in diversen Versionen zum beispiel bei negativen paddings nix, quasi ein padding, was aus einer anderen Wichtung geerbt wird, wird nicht überschrieben.
Deswegen keine negativen Paddings... einfache Regeln... außerdem wird dir jeder, der sich nach dir mit diesem verhunzten Zeug auseinander setzen muss, den Kopf abschrauben. und wenn du dir im Mozilla mit Dev-Tools die 3D-Ansicht reinziehst dieser Konstruktion, wird dir die unschöne geschichte von selbst auffallen...
und außerdem ist es nicht wirklich ein aufwand, CSS sauber einzusetzen, das ist übrigens noch CSS2, noch nicht mal 3... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
