Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

[CSS] Text in einer Spalte links und rechtsbündig?

Gast tobias-digital
Gast tobias-digital
in Webdesign

Empfohlene Antworten

Hallo!

Ich bastel momentan daran das angehängte Layout mit CSS umzusetzen.

Das Problem ist der "mehr"-Link. Ich will das der Text linksbündig steht, der "mehr"-Link jedoch rechts ausgerichtet ist. Geht das irgendwie mit CSS?

Danke und Grüße, Tobias

post-8531-14430447159117_thumb.gif

nein.

Den Link musst du dann in ein <Div> oder so packen und dort neu ausrichten.

Ja, das sollte gehen.

Nimm für den Link eine extra CSS-Klasse. Dieser weist du dann float: right zu. Damit sollte das ganze dann auch schon funktionieren. Wenn nicht, dann kannst du ja mit display-Eigenschaften ein bischen rumspielen.

Wie gesagt, prinzipiell sollte es klappen.

Nimm für den Link eine extra CSS-Klasse. Dieser weist du dann float: right zu.

Durch einen Float wird das Element aber aus dem eigentlichen Textfluss genommen, sprich die Position, die es durch den anderen Fliesstext hat hat das Element dann nicht mehr.

Ich hatte (habe) ein ähnliches Problem in einem Fussbereich. Ein Teil soll dort rechtsbündig stehen. Mit Float:right war der dann zwar rechts, aber etwas höher und hat das gesamte Layout zerschossen.

Also ich hab jetzt wirklich sehr viel ausprobiert. und komme zu keinem akzeptablen Ergebnis. Ich habe jetzt beschlossen das "mehr" zwar rechtsbündig aber immer in eine neue Zeile zu setzen.

Und es geht doch:

Infos hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Beispiel hier:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

  <title>detail_link_rechts_ausgerichtet</title>



  <style type="text/css">

	div.paragraph {

		border: solid 1px black;

		font-family: Verdana;

		font-size: smaller;

		position: relative;

	}

	div.moreLink {

		color: navy;

		margin: 5px;

		display:inline;

		border: 1px solid red;

		position: absolute;

		right: 5px;

	}

  </style>

</head>


<body>

<div class="paragraph">

	Das hier ist ein einfacher Beispieltext. Dies ist ein Auschnitt von

	Informationen. Um weitere Informationen zu erhalten: den rechts

	stehenden Link wählen.<br>

	Das hier ist ein einfacher Beispieltext. Dies ist ein Auschnitt von

	Informationen. Um weitere Informationen zu erhalten: den rechts

	stehenden Link wählen.

	<div class="moreLink">{mehr}</div>

</div>


</body>

</html>


[/PHP]

Hi Enrico,

das von dir gepostete Beispiel geht bei mir weder im FF (1.04) noch im IE (6.0).

OS: Win2000 SP4

Gruß,

Markus

Der Link geht zwar bei mir, sein Beispiel konnte ich da aber nicht finden. Und auch das Beispiel selbst funktioniert nicht wie gewünscht (im IE 6, FF und Opera). Der "Link" ist zwar rechts, aber überschneidet immer den Rand oder den Text.

EDIT: da wo ich sowas bräuchte, im Fussbereich (s.o.), sieht es sogar noch viel schlimmer aus. Wobei die Idee das über die Position zu machen ansich vielleicht nicht schlecht ist, aber es wird halt total statisch dadurch und auch wenn z.B. der Betrachter eine andere Schriftgröße hat als du, geht es nicht mehr damit.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.