Klassen verknüpfen - Wo liegt der Fehler?

E

eee

Mitglied
Hallo,

ich bin gerade am Verzweifeln. Weiß jemand warum im folgenden Beispiel die beiden Schaltflächen unterschiedliche Größen haben? Der Code für Schaltflächen #2 erscheint mir weniger umständlich, allerdings hat nur Schaltfäche #1 die gewünschte Größe. Schaltfläche #2 wird bei mir sowohl in Opera als auch in Firefox größer angzeigt!

HTML: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	body {
		height:100%;
		width:1000px;
		margin:0 auto;
		font-size:1em;
		line-height:1.5;
	}
	a.button {
		border:1px solid #B2B299;
		color: #6c6c6c;
		font-weight:bold;
		padding:3px 0.75em;
	}
	.rechts {
		float:right;
		font-size:0.75em;
	}
	.infotext {
		margin-bottom:5px;
		font-size:0.75em;
	}
</style>
</head>
<body>
	<!-- #1 -->
	<div class="rechts">
		<a href="#" class="button">Schaltfl&auml;che</a>
	</div>
	<div class="infotext">
		Text
	</div>
	
	<!-- #2 -->
	<a href="#" class="button rechts">Schaltfl&auml;che</a>
	<div class="infotext">
		Text
	</div>
</body>
</html>
 
Zuletzt bearbeitet:
Hey eee,

das liegt an dem font-sieze, im body steht font-sieze: 1em;, das gilt dann für alles. Aber da du bei .rechts font-sieze:0.75em; hast wird der Wert von body, für die Schrift von .rechts überschrieben. Also ist die Schrift bei .rechts kleiner. Ich habe es mit deinem Code gerade mit Google Chroome getestet, am Anfang selbes Ergebnis, nach der Änderung im body waren sie gleich groß.
 
Hallo _cadoc,

danke für die Durchsicht meines Skriptes. Ich habe jetzt (testweise) "font-size:1em;" aus dem Body genommen und gleichzeitig die Schriftgröße in der Klasse "rechts" auf eine absolute Angabe geändert (12px). Trotzdem ist Schaltfläche #2 wieder größer als Schaltfläche #1. Wobei ich die Klasse "rechts" ohnehin in beiden Fällen anwende.
 
Danke, dass 16 mehr als 12 ist weiß ich ;) Mir geht es auch daraum, dass beide Schaltflächen nicht gleich groß sind (#2 hat einen größeren Innenabstand nach oben und unten). Wenn ich "line-height:1.5;" aus dem Body lösche, haben beide Schaltflächen die gleiche Größe. Anscheinend übernimmt <a href="#" class="button rechts"> diesen Wert nicht richtig.
 
Zuletzt bearbeitet:
Sorry, habe wohl nicht richtig gelesen. Hier mal etwas abgeändert. Also, bei mir sind so beide Buttons gleich groß.

Code: 
     <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
   body {
		height:100%;
		width:1000px;
		margin:0 auto;
		font-size:1em;
		line-height:1.5;
	}
	a.button {
		border:1px solid #B2B299;
		color: #6c6c6c;
		font-weight:bold;
		padding:3px 0.75em;
	}
	.rechts {
		float:right;
		font-size:0.75em;
	}
	.infotext {
		margin-bottom:5px;
		font-size:0.75em;
	}

</style>
</head>
<body>
	<!-- #1 -->
	<div class="rechts">
		<a href="#" class="button">Schaltfl&auml;che</a>
	</div>
	<div class="infotext">
		Text
	</div>
	
	<!-- #2 -->
	<div class="rechts">
	    <a href="#" class="button rechts">Schaltfl&auml;che</a>
        </div>
	<div class="infotext">
		Text
	</div>
    </body>
    </html>

Übrigens ,die unterschiedlichen Abstände resultieren daher, dass ein div ein Blockelement und A ein Inlineelement Element ist. Also packe beide in einem Div.
 
Zuletzt bearbeitet:
Wenn ich "line-height" aus dem Body rausnehme sind beide Buttons gleich groß. Leider schmeißt es mir dann die gesammte Formatierung meiner Website über den Haufen, weil die Zeilen dann viel zu nah beisammen sind :/ Deutlicher sieht man mein Problem, wenn man den Wert für "line-height" erhöht:

HTML: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	body {
		height:100%;
		width:1000px;
		margin:0 auto;
		font-size:1em;
		line-height:3;
	}
	a.button {
		border:1px solid #B2B299;
		color: #6c6c6c;
		font-weight:bold;
		padding:3px 0.75em;
	}
	.rechts {
		float:right;
		font-size:0.75em;
	}
	.infotext {
		margin-bottom:5px;
		font-size:0.75em;
	}
</style>
</head>
<body>
	<!-- #1 -->
	<div class="rechts">
		<a href="#" class="button">Schaltfl&auml;che</a>
	</div>
	<div class="infotext">
		Text
	</div>
	
	<!-- #2 -->
	<a href="#" class="button rechts">Schaltfl&auml;che</a>
	<div class="infotext">
		Text
	</div>
</body>
</html>

Ich werde wohl <div class="rechts"><a href="#" class="button">Schaltfl&auml;che</a>
</div> anstelle von <a href="#" class="button rechts">Schaltfl&auml;che</a> verwenden müssen.
 
Wenn du bei body das font-size raus nimmst, aber bei .rechts drin lässt dann hat die eine Schrift eine standart Größe und die andere die von dir festgelegte Größe, somit ist auch die Schaltfläche größer. Das liegt einfach daran das der border einen bestimmten Abstand hält und sich deshalb ausdehnt wenn sich die Schrift vergrößert.
Außerdem musst du bei rechts noch einen margin-top reinbringen, sonst sieht man, jedenfalls bei meinem Google Chrome, die obere Linie von dem border nicht und dadurch hat es auf mich im ersten Moment wieder kleiner gewirkt.
Ich habe jetzt also nur bei .rechts das margin-top: 5px; reingebracht und die font size bei body auf 0.75em geändert und dann sah es so aus:
schaltflaeche.png

MfG
 
Mein Problem wird eindeutig durch "line-height" im Body verursacht. Je nachdem wie man die beiden Klassen "button" und "rechts" aufruft - kombiniert oder verschachtelt - ergeben sich unterschiedliche Größen. Ausgabe Skript aus Beitrag #7:
 

Anhänge

  • line-height.jpg
    line-height.jpg
    52,9 KB · Aufrufe: 12
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück