|
|||
Pixelgenaue Höhe eines Inline-Elements
Hallo liebe Community,
ich muss derzeit ein Layout Pixelgenau mit Html/CSS umsetzen und stoße dabei auf das Problem, wie ich einem Inline-Element, bspw. einem <a> eine pixelgenaue Höhe geben kann. Dies ist leider zwingend notwendig, da dieses Inline-Element mit einer Hintergrundgrafik versehen wird, die nur Horizontal wiederholt werden darf. Folgendes CSS habe ich bis jetzt erarbeitet, leider weicht das ergebnis aber immer um 1-2 Pixel von dem ab was ich erwarte. Code:
.button { display: inline; /* Grafik: width:1px; height:20px; */ background: url(button_back.jpg) top left repeat-x; /* macht ungenauigkeiten sichtbar */ background-color: #fff; /* Border nur links und rechts -> keine Auswirkungen auf die Höhe*/ border-style: solid; border-color: #596D24; border-width: 0 1px; padding: 4px 10px; font-size: 12px; line-height: 20px; color: #000; font-weight: bold; text-decoration: none; } .button:hover { color:#fff; } Ich vermute, dass die Schriftgröße das Problem ist, ich weis jedoch nicht wie ich dieses Problem lösen kann, oder ob es überhaupt lösbar ist. display:block; kommt nicht in Frage, da die Breite unbekannt ist. Mit float:left/right; erhält man zwar den gewünschten visuellen Effekt, das Element muss aber im Textfluss angeordnet werden. Ich bin für alle Antworten und Hinweise dankbar, viele Grüße, Unic |
Sponsored Links |
|
|||
|
Sponsored Links |
|
|||
Zitat:
|
|
|||
Moin,
IE<8 verstehen display:inline so, wie heutige Browser display:inline-block. Wenn du den verlinkten Artikel gelesen hättest, wüsstest du das. Außerdem ist IE6 inzwischen echt irrelevant... gruß, take |
|
|||
Zitat:
Zitat:
Vielen Dank schonmal für die Antworten, vermutlich komme ich nicht darum herum in diesem Punkt die Vorgabe des Pixelgenauen Layouts etwas zu dehnen. Trotzdem bin ich für weitere Antworten dankbar die etwas zu dem Thema beitragen. Kennt jemand vieleicht einen Artikel/Blog/Tutorial, wo Inline Elemente in voller Tiefe erklärt werden? Hin und wieder stößt man ja auf solche Schätze wie Float- Die Theorie. Gruß, Unic |
|
|||
Zitat:
Der oben verlinkte Artikel scheint mir wenig geeignet, den inline-block-Workaround zu erläutern. Wie vieles andere auch erläutert Heiko in den FAQ auch eine browserübergreifende Anwendung von "inline-block". Die Suchfunktion dürfte ebenfalls ergiebig sein. edit: Ganz vergessen: Die Leseprobe unseres in der Signatur verlinkten Buches ist das Kapitel über inline und inline-block.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (11.08.2011 um 15:47 Uhr) |
|
|||
Zitat:
gruß, take |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe | danoman | CSS | 5 | 24.04.2011 19:38 |
Höhe eines Elements berechnen und woanders zuweisen | micronix | Javascript & Ajax | 3 | 19.04.2011 23:48 |
Feste Höhe eines <TR> Elements | Fresh | CSS | 3 | 11.11.2007 13:46 |
Kleiner problem miut der höhe des div elements | Griborim | CSS | 0 | 15.10.2006 20:45 |
Höhe eines block elements | milez | CSS | 1 | 18.08.2005 15:00 |