zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Pixelgenaue Höhe eines Inline-Elements

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2011, 12:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Meine Erwartung wäre, dass ein padding-top:4px; + font-size:12px; + padding-bottom:4px; eine Höhe von insgesamt 20px ergeben. line-height wirkt sich darauf soweit ich weis nicht direkt aus, sondern bestimmt den Abstand zu anderen inline Elementen, so dass der Anschein eines Kastens mit einer Höhe von 20px und einer variablen Breite entstehen sollte. Es ist jedoch am unteren Rand immer 1px der Hintergrundfarbe zu sehen, was bedeutet, dass der Kasten nicht 20px hoch ist (Firefox 5).

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2011, 12:48
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

wie wärs mit inline-block?

gruß,
take
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2011, 12:50
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Du musst keine Breite angeben, wenn du mit display:block; arbeitest. Aber du könntest dann eine Höhe nehmen. Die line-height ist insofern relevant, dass sie höher ist als die Schrift und auch Platz braucht.

Deine Berechnung hinkt aber. Nicht jeder Browser hält sich an die Vorgaben des Autors, sondern eher an die des Users. Wenn der Benutzer mindestens Schriftgröße 16 haben will, dann hast du ein Problem. Schriften lassen sich nicht in feste Pixelhöhen packen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2011, 15:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
wie wärs mit inline-block?
Im Prinzip genau das was ich will, inline-block wird aber vom IE-6 gar nicht und vom IE-7 nur teilweise verstanden, fällt somit raus.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2011, 15:32
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2011, 15:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2009
Beiträge: 11
unic befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
Du musst keine Breite angeben, wenn du mit display:block; arbeitest. Aber du könntest dann eine Höhe nehmen. Die line-height ist insofern relevant, dass sie höher ist als die Schrift und auch Platz braucht.
Soweit ich weis haben Blockelemente eine Default-Breite von 100%. Außerdem werde Blockelemente meines Wissens nach in einer neuen Zeile gerendert, solange sie nicht floaten.

Zitat:
Zitat von Praktikant Beitrag anzeigen
Deine Berechnung hinkt aber. Nicht jeder Browser hält sich an die Vorgaben des Autors, sondern eher an die des Users. Wenn der Benutzer mindestens Schriftgröße 16 haben will, dann hast du ein Problem. Schriften lassen sich nicht in feste Pixelhöhen packen.
Diese Befürchtung hatte ich schon, habe gehofft, dass das nur auf Schriften zutrifft die mit relativen Einheiten wie em oder % angegeben sind.

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
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2011, 15:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
IE<8 verstehen display:inline so, wie heutige Browser display:inline-block.
Ein inline-block-ähnliches Verhalten zeigen die alten IEs nur dann, wenn ein inline dargestelltes Element hasLayout hat.
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.

Geändert von fricca (11.08.2011 um 15:47 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2011, 15:43
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Der oben verlinkte Artikel scheint mir wenig geeignet, den inline-block-Workaround zu erläutern.
Er sollte auch nur zeigen, was inline-block macht (nicht den Workaround, der dort nur erwähnt ist). Für den Workaround ist die FAQ besser, da hast du recht.

gruß,
take
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:44 Uhr.