CSS [HTML] (komplex) Unterschiedliche Formatierungen in einer Zeile

Tersus · 12. März 2014

Guten Abend,

ich möchte, dass meine Überschrift und mein Standardtext einen rechten Rand in % haben. Die prozentuale Angabe deswegen, weil der Rand zur gesamten Breite relativ gleich bleiben soll. Mit wachsender Fensterbreite, wächst auch der Rand, bzw. wird mit sinkender Fensterbreite reduziert.

Desweiteren möchte ich, dass vor der Überschrift noch eine Zahl steht. Die Zahl soll immer ganz links stehen, ohne Rand. In der selben Zeile soll aber auch die Überschrift stehen, welche einen Rand hat.

Standardtext und Überschrift sollen sozusagen in der selben "Spalte" anfangen. Beide sollen von links identische Anfangskoordinaten haben.

Mit welcher Formatierung bekomme ich nun noch eine Zahl vor meine Überschrift, ohne dass diese bewegt wird?

Mein Standardtext hat folgende Formatierung:

Code:

p {
  margin-left: 5%;
}

Meine Überschrift diese:

Code:

h3 {
  margin-left: 5%;
}

thecain · 12. März 2014

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>test</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
	<h1><span class="number">12</span><span class="text">Blablas</span></h1>
</body>
</html>

Code:

.number {
	margin-left: 0;
        position: absolute;
}
.text {
	margin-left: 5%;
}

Die Zahl überschneidet dann aber mit der Überschrift, wenn die Nummber breiter ist als 5%

Tersus · 12. März 2014

Jetzt, nach deinem Edit, geht es. Aber da gibt es noch ein Problem ... . Was, wenn die Nummer eine größere font-size hat ... . Dann steht sie nicht mehr auf der selben Zeile, wie der .text.

Suche

Tersus

Gast

thecain

Ensign

Tersus

Gast