nicht angemeldet
div zentrieren ohne manuell festgelegte Breite
Hallo allerseits :)
Ich habe folgendes Problem: Ich will ein div zentrieren. Im prinzip ja ganz einfach mit style="margin:auto".
Problem ist, dass das div immer automatisch 100% breit ist. Das heißt, wenn das zentrieren Wirkung haben soll muss ich mit style="width:x%" eine Breite festlegen. Genau dass möchte ich aber vermeiden:
Das div soll immer so klein wie möglich sein und sich der Breite des Inhalts anpassen. Habs mit style="float:left" probiert, dann passt sich das div zwar an, wird aber nicht zentriert.
Gibt es eine Lösung für das Problem? Ich möchte eigentlich keine Tabellen verwenden.
Viele Grüße,
xblax
-
Das div soll immer so klein wie möglich sein und sich der Breite des Inhalts anpassen. Habs mit style="float:left" probiert, dann passt sich das div zwar an, wird aber nicht zentriert.
Gibt es eine Lösung für das Problem? Ich möchte eigentlich keine Tabellen verwenden.
Ein inline Element ist so schmal wie möglich
Stehlt das inline Element in einem Block Element mit Eigenschaft text-align:center, dürftest du dem Ziel nahe sein.mfg Beat
--
Woran ich arbeite:
X-Torah
Plädoyer für eine alte Mystik
und Vers-Einteilung
in der Torah und der Apokalypse
<°)))o>< ><o(((°>o
-
Nachtrag:
Derzeit gibt es keine verlässliche Lösung weil inline-block noch Zukunftsmusik ist.
Du kommst also nicht drum herum, ein Blockelement mit geeigneten margins zu versehen.mfg Beat
-
Nachtrag:
Derzeit gibt es keine verlässliche Lösung weil inline-block noch Zukunftsmusik ist.
Du kommst also nicht drum herum, ein Blockelement mit geeigneten margins zu versehen.mfg Beat
Hm das ist ärgerlich, dann muss ich wohl doch auf Tabellen ausweichen ...
In Firefox scheint es zu funktionieren, wenn ich dem div display:table verpasse, im IE aber nicht.Naja vielleicht hat ja noch einer eine Idee.
Viele Grüße und Gute Nacht,
xblax-
Hm das ist ärgerlich, dann muss ich wohl doch auf Tabellen ausweichen ...
In Firefox scheint es zu funktionieren, wenn ich dem div display:table verpasse, im IE aber nicht.es gibt sogut wie nichts, was sich nicht ohne tabellen umsetzen lässt
Naja vielleicht hat ja noch einer eine Idee.
siehe oben: mit mehr informationen, insbesondere _WAS_ du genau bezweckst und in welchem kontext dieses block-element zentriert sein muss wäre interessant
denn eine ausführungen bisher sind widersinnig
ohne die genaue breite zu kennen und trotzdem zentrieren
width: 80%; oder 1273px, 173em ist egal
margin: auto;wo ist das problem?
width: auto;
margin: auto;ist unsinnig
das einzige was ich mir vorstellen könnte, was du bezweckst ist ein äusserst tabellenspezifisches verhalten:
du hast einen element, welches aufgrund seines inhalts (das längste wort/element) die größte ändernt) und dann zentriert ist
das ist einerseits von der usability sehr ungünstig und andererseits mit css im ie6 nicht lösbar - kein problem von css also, sondern von der unfähigkeit eines browsers für den du dieses feature einfach abstellen könntest
jeder der einen guten browser hat, bekommt dynamische breite, alle mit dem ie bekommens auf 800x600 festgenagelt und sollen gefälligst umsteigen
-
siehe oben: mit mehr informationen, insbesondere _WAS_ du genau bezweckst und in welchem kontext dieses block-element zentriert sein muss wäre interessant
Hier mal ein Beispiel ich denke dann wird es klar:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body><!-- So in etwa soll es aussehen -->
<table style="border:1px solid #000000; margin:auto;">
<tr><td>test</td></tr>
</table><!-- So wird das div nicht zentriert, da es immer automatisch 100% breit ist -->
<div style="border:1px solid #000000; margin:auto; width:auto;">test</div><!-- So geht es, aber nur mit festgelegter Breite -->
<div style="border:1px solid #000000; margin:auto; width:10%;">test</div></body>
</html>Problem ist, dass das div, wenn ich eine relative breite angebe auf großen Bildschirmen zu groß und auf kleinen zu klein ist. Es soll ich immer direkt anpassen. Eine feste Breite möchte ich nicht festlegen, da sich der Inhalt dynamisch anpassbar sein soll.
In IE6 geht von den Beispielen überhaupt nichts, aber im Zweifel kann ich den nicht berücksichtigen wenn es keine vernünftige Lösung gibt.-
Yerf!
Problem ist, dass das div, wenn ich eine relative breite angebe auf großen Bildschirmen zu groß und auf kleinen zu klein ist. Es soll ich immer direkt anpassen. Eine feste Breite möchte ich nicht festlegen, da sich der Inhalt dynamisch anpassbar sein soll.
In IE6 geht von den Beispielen überhaupt nichts, aber im Zweifel kann ich den nicht berücksichtigen wenn es keine vernünftige Lösung gibt.a) Das Beispiel mit der festen Breite geht im IE6, wenn du das <?xml... weglässt, damit er nicht in den Quirksmode geht.
b) evtl. hilft die ja display:inline-block zusammen mit text-align:center weiter:
body{ text-align:center; } div{ display:-moz-inline-stack; /* Firefox2 */ display:inline-block; /* Firefox 3 und Opera */ } * html div{ display:inline; /* IE */ zoom:1; }Wobei noch auszutesten ist, wie gut das im FF2 wirklich geht. Bei frühreren Tests (allerdings mit -moz-inline-block) hatte ich da ein paar Probleme.
Interesant wäre auch, was Safari und Konquerer dazu sagen...
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
-
Hi!
Gibt es eine Lösung für das Problem? Ich möchte eigentlich keine Tabellen verwenden.
Sischer dat. Min-width heisst das Zauberwort. Und da MSIE das nicht wirklich schnallt, musst Du fuer den eine Extrawurst braten, die width angibt. Das behandelt der dann, wie standardkonforme Browser min-width behandeln.
--
Wenn Du eine Antwort nicht verstehst, trau dich und frag nochmal nach.
-
Sischer dat. Min-width heisst das Zauberwort. Und da MSIE das nicht wirklich schnallt, musst Du fuer den eine Extrawurst braten, die width angibt. Das behandelt der dann, wie standardkonforme Browser min-width behandeln.
Ich möchte eigentlich auch keine Mindestbreite (siehe Beispiel in meinem Beitrag weiter unten) und von Lösungen die nicht wenigstens in Firefox UND IE7 korrekt funktionieren bin ich nicht so der Freund.
-