Text nach rechts direkt an den Rand bringen

Stef · 2. Juni 2016

Hey alle zusammen,

ich habe mal wieder bissl ausprobiert mit CSS und nun habe ich ein Problem. Ich habe 2 Sätze in einer Linie der 1ne Satz ist im normalen <p> und der andere eingebunden mit <span>, beide werden im Stylesheet angesprochen.
Nun möchte ich aber den <span> Teil nach rechts außen ganz an den rand bekommen, und da komm ich nicht weiter. Habe es schon mit text-align: right; versucht aber hat nicht funktioniert.

Villt weiß jemand von euch wie man es macht ?

Hier mein HTML:

HTML

<!Doctype html>
<html>
	<head>
    	<meta charset="UTF-8"/>
    	<meta robots= "index,follow"/>
    	<meta http-equiv="content-type" type="text/html" />
    	<meta discription="Neon-Seite, alles über Neon-Texten in HTML"/>

    	<link rel="stylesheet" href="neon.css" type="text/css"/>

    	<title>Neon - Wunderbares geschaft in HTML</title>

	</head>
	<body>
    	<h1 id="ueberschrift">Dies hier ist ein Beispiel für Neon-Texten, designt mit CSS!</h1>
    	<div class="neon">
        	<p id="blau">NEON-Text mit Blau <span id="gelb">NEON-Text mit Gelb</span></p>
        	<p id="gruen">NEON-Text mit Grün <span id="rot">NEON-Text mit Rot</span> </p>
    	</div>

    	<h2 id="uber">Dies ist ein Beispiel für Schatten</h2>

	</body>
</html>

Alles anzeigen

Und mein CSS:

CSS

h1#ueberschrift
{
	color:red;
	text-shadow: 3px 3px 3px black, -3px 3px 3px black, 3px -3px 3px black, -3px -3px 3px black;
}




div.neon
{
	background-color: black;
	color: white;
	font-size: 5em;
	padding-left: 30px;
	padding right: 30px;
	padding-top: 5px;
	padding-bottom: 5px;

}




#blau
{
	text-shadow: 0px 0px 10px white, 0px 0px 20px blue, 0px 0px 20px blue, 0px 0px 30px blue,
            	0px 0px 40px blue, 0px 0px 50px blue, 0px 0px 60px blue, 0px 0px 70px blue, 
            	0px 0px 80px blue, 0px 0px 90px blue;
}




#gelb
{
  text-shadow: 0px 0px 10px white, 0px 0px 20px yellow, 0px 0px 20px yellow, 0px 0px 30px yellow,
            	0px 0px 40px yellow, 0px 0px 50px yellow, 0px 0px 60px yellow, 0px 0px 70px yellow, 
            	0px 0px 80px yellow;


}




#gruen
{
 text-shadow: 0px 0px 10px white, 0px 0px 10px green, 0px 0px 20px green, 0px 0px 30px green, 0px 0px 40px green, 0px 0px 50px green;   
}




#rot
{
	text-shadow: 0px 0px 10px white, 0px 0px 10px red, 0px 0px 20px red, 0px 0px 30px red, 0px 0px 40px red, 0px 0px 50px red, 0px 0px 60px red, 0px 0px 70px red, 0px 0px 80px red, 3px 3px 3px cyan, -3px 3px 3px cyan, 3px -3px 3px cyan, -3px -3px 3px cyan;
}




h2#uber
{
	color: blue;
	text-shadow: 2px 2px 2px red, -2px 2px 2px red, 2px -2px 2px red, -2px -2px 2px red;
}

Alles anzeigen

Freue mich schon auf eure Hilfe.

MFG,
Stef

MrMurphy · 2. Juni 2016

Hallo

Das dürfte schwierig werden. Bei mir werden die Sätze untereinander angezeigt. Auf Smartphones und Tablets dürften die auf noch mehr Zeilen verteilt werden.

Du schaust dir die Seite wahrscheinlich auf einem großen Desktop-Monitor in voller Fenstergröße an. Das ist zum Erstellen von Webseiten eher von Nachteil. Du solltest zumindest immer mal wieder das Browserfenster verkleinern. Zumal heutzutage eher mit Smartphones und Tablets als mit Desktop-Rechnern im Internet gesurft wird.

Ich würde am ehesten zu Flexbox raten. Dazu fügst du ins CSS folgende Anweisung ein:

Code

.neon p {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Gruss

MrMurphy

Stef · 2. Juni 2016

Hey MrMurphy,

vielen Dank. Hat geholfen. Und danke für den Tipp.

Könntest du bitte wenn möglich dein quellcode kurz beschreiben was diese Eigenschaften machen ?
Ich wäre sehr dankbar darüber.

Stef

MrMurphy · 2. Juni 2016

Hallo

Um Flexbox zu verstehen wirst du dich inteniver damit beschäftigen müssen. Am Besten nach "css flexbox" suchen. Dann sollten sich für den Anfang erst mal einige Informationen finden lassen.

Code

.neon p {
   display: flex;
}

Damit werden die beiden p-Elemente innerhalb von .neon zu Flex-Containern.

Die direkten Kinder der p-Elemente werden zu sogenannten Flex-Items. Eine weitere Vererbung gibt es bei Flexbox nicht.

Der jeweils erste Satz im p-Element befindet sich zwar in keinem Container. Trotzdem wird von Flexbox alles vor dem öffnenden span-Tag als ein Container behandelt. Jedes der beiden p-Elemente enthält für Flexbox also zwei Container.

Code

flex-wrap: wrap;

Flexbox-Items werden als Vorgabe grundsätzlich nebeneinander angezeigt. Durch diese Anweisung können sie untereinander rutschen. Für dein Beispiel finde ich das sinnvoll. Wenn die Sätze nicht ein eine Zeile passen rutschen sie so zunächst jeweils komplett untereinander.

Code

justify-content: space-between;

Durch diese Anweisung werden alle Flex-Items komplett wo weit wie möglich über die gesamte Zeilenbreite verteilt. Da es jeweils nur zwei Flex-Items gibt werden sie jeweils so weit wie möglich links und rechts angezeigt. Also dass, was du erreichen willst.

Gruss

MrMurphy

Text nach rechts direkt an den Rand bringen

Jetzt mitmachen!

Teilen