nicht angemeldet
bloecke zentriert anordnen, aber inhalt linksbuendig
auch wenn ich der meinung bin, dass ich mich inzwischen ganz gut mit css auskenne, habe ich noch ein problem, fuer das ich schon tagelang rumprobiert habe:
ich moechte mittels css erreichen, dass ein absatz mit einer festen breite genau mittig im browserfenster angeordnet wird, aber dessen inhalt trotzdem linksbuendig ausgerichtet bleibt.
im unten angefuehrten beispiel ist das zuerst mit ner blinden tabelle realisiert, was mich aber sehr stoert. statt der ganzen tabelle soll der eigentliche absatz lediglich in einem div element stehen (zweite variante), was dann per css "in form" gebracht werden soll.
dazu habe ich schon alles moegliche versucht: verschiedene positionierungsarten. der logischste trick (siehe internes stylesheet unten) schien mir zu sein, den linken und rechten rand so zu setzen, dass in der mitte eigentlich gar kein platz mehr ist und den inhalt mittels overflow gleichmaessig auf beide seiten aufzuspreizen. stattdessen wird er aber von der horizontalen mitte nur nach rechts abgetragen.
gibt es eine moeglichkeit, das ohne tabellen und ohne javascript (!) nur mit css auf die reihe zu bekommen?
ich waere sehr dankbar!
mfg
ronald
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="content-type"
content="text/html; charset=ISO-8859-2"
/>
<title>
Block zentrieren
</title>
<style type="text/css">
div { text-align: center; }
table { width: 250px; }
td { text-align: left; }
div.centered
{
width: 250px;
margin-left: 50%;
margin-right: 50%;
overflow: visible;
text-align: left;
}
</style>
</head>
<body>
<h1>So soll es im Browser aussehen:</h1>
<div align="center">
<!--
das zentrieren ueber css schiebt bei opera die
tabelle leider noch nicht in die mitte
-->
<table>
<tr>
<td>
Ganz viel blödsinniger Beispielfließtext, um einen
genauso blödsinnigen Absatz zu füllen. Ganz viel
blödsinniger Beispielfließtext, um einen genauso
blödsinnigen Absatz zu füllen.
</td>
</tr>
</table>
</div>
<h1>So soll es im Quelltext aussehen:</h1>
<div class="centered">
Ganz viel blödsinniger Beispielfließtext, um einen
genauso blödsinnigen Absatz zu füllen. Ganz viel
blödsinniger Beispielfließtext, um einen genauso
blödsinnigen Absatz zu füllen.
</div>
</body>
</html>
-
Hallo,
ich moechte mittels css erreichen, dass ein absatz mit einer festen breite genau mittig im browserfenster angeordnet wird, aber dessen inhalt trotzdem linksbuendig ausgerichtet bleibt.
<p style="margin:auto;width:500px;">absatz</p>
Für den MSIE ist eventuell noch <body style="text-align:center;"> und
für das p-Element zusätzlich text-align:left; notwendig.Viele Grüße,
Stefan-
Moin!
<p style="margin:auto;width:500px;">absatz</p>
Für den MSIE ist eventuell noch <body style="text-align:center;"> und
für das p-Element zusätzlich text-align:left; notwendig.All meine pädagogische Arbeit dahin! *heul*
Gruß
Der Hans
-
Hallo Hans,
All meine pädagogische Arbeit dahin! *heul*
ja, finde ich auch bedauerlich. Als ich eben Dein Posting gelesen
habe, war es einer der Momente, wo ich mir gewünscht habe, es wäre
möglich, Beiträge zu löschen. Dann hätte ich sofort meine zwei vor-
her geschriebenen Postings entfernt.Bleibt zu hoffen, dass der Fragesteller sich nicht nur die Lösung
greift, sondern auch versteht, was er da macht und dazu ist Dein
Posting wirklich notwendig ;-)Viele Grüße,
Stefan
-
-
-
ein absatz
^^^^^^^^^^
<div class="centered">
^^^
Ein Absatz wird durch das p-Element gekennzeichnet, immer.
Viele Grüße,
Stefan -
Moin!
1. Das Archiv kennt dein Problem und hält Lösungen parat!
2. SelfHTML hat noch viele Kapitel, die dir bisher entgangen sind!Vertiefungshinweise:
a) Inline-Elemente vs. Block-Elemente
b) margin:auto
c) margin:auto und alte MSIE
d) Workaround für margin:auto bei alten MSIEMein Tipp: Abarbeiten in dieser Reihenfolge und anschließend einen
komplett neuen Ansatz starten! Hilft dir für immer - versprochen!Gruß
Der Hans
-
hi,
ich moechte mittels css erreichen, dass ein absatz mit einer festen breite genau mittig im browserfenster angeordnet wird, aber dessen inhalt trotzdem linksbuendig ausgerichtet bleibt.
feste breite macht die sache denkbar einfach.
#meinabsatz { width:(feste breite in pixeln)px; position:relative; left:50%; margin-left:-(feste breite in pixeln geteilt durch 2)px; }
position:relative; left:50%; sorgt dafür, dass der linke rand des absatzes genau in der mitte des fensters platziert wird.
durch margin:-250px; (250px als beispiel für width:500px;) wird er dann nochmal um die hälfte seiner breite nach links verschoben (durch das negative vorzeichen), so dass er dann genau mittig sitzt.funktioniert im IE, gecko (mozilla) und opera.
gruss,
wahsaga