|
|||
div mit angepasster Breite
Hallo!
Ich möchte, dass eine Box, also ein div, so schmal wie möglich ist. Der Inhalt wird mit white-space: nowrap; auf Breite gehalten, die Box hat sich anzupassen. Zum Beispiel möchte ich mehrere Radiobuttons mit Beschriftung horizontal zentrieren. Wenn ich ganz normal text-align:center; mache, sind die Buttons nicht mehr genau übereinander. Also muss ich die Box rundrum zentrieren. Das geht aber nicht, weil ein div immer die volle Breite nimmt, die zur Verfügung steht. Thomas |
Sponsored Links |
|
|||
Weil ich dann eine bestimmte Schriftart und -größe vorgeben müsste und die Seite nicht mehr mit Strg-+ skalierbar wäre. Außerdem weiß ich teilweise nicht, wie groß die Elemente (Inputfelder) genau werden, aber der Rahmen soll sich anpassen.
|
|
|||
Stichworte: shrink-wrapping oder shrink-to-fit
Geht mit display:inline-block, display:table-... (oder float, was man aber nicht zentrieren kann). Wenige Browser können beides; aber leider gerade Firefox und IE nicht. Sodass Hacking angesagt ist, alle erhalten table-..., IE kriegt eine inline-block Simulation. Zeig einen Link auf eine Testseite, die auf das wirklich Wesentliche reduziert ist, füg dazu eine Abbildung hier ein, wie es aussehen soll, und dann kann man versuchen, dir bei der Umsetzung zu helfen. Oder nimm eine Tabelle. |
|
|||
Mein Vorhaben könnt Ihr hier sehen:
http://iph.netaction.de/divtest.html Wenn die Browser das mit CSS nicht schaffen, nehme ich halt Tabellen. Die Angabe in "em" ist für meine Anwendung leider etwas schlecht, da Formularschaltflächen unkalkulierbare Breiten haben. Thomas |
|
|||
Du hattest nicht vermerkt, dass darunter noch ein Fließtext kommt. Der wird wohl seine maximal mögliche Breite erzwingen. Ich sehe im Moment nicht, wie man der umgebenden Box sagen soll, dass sie bitte nur die Breite der Inputs übernimmt, aber den danach folgenden Text in der Laufweite reglementiert.
|
|
|||
Zur Demonstration habe ich jetzt noch ein paar Buttons eingebaut. Die Box soll hinter dem letzten Button zu ende sein, aber deren Größe lässt sich in em überhaupt nicht angeben.
Würde das denn mit Tabellen gehen? |
|
|||
Zitat:
Für IE fällt mir nur eine "echte" Tabelle ein. Quickhack (hässlich): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>shrink-to-fit</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> * { margin:0; padding:0; } div { border:5px solid red; display:table; width:1px; margin:0 auto; } form p { white-space:nowrap; } * html div { width:auto; } * html table { width:1px; margin:0 auto; } </style> </head> <body> <!--[if IE]><table><![endif]--> <div> <form action=""> <p><input type="radio"> Ich liebe CSS</p> <p><input type="radio"> Ich liebe HTML</p> <p><input type="radio"> Ich liebe Windows</p> </form> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <!--[if IE]></table><![endif]--> </body> </html> |
Sponsored Links |
|
|||
Ich weiß nicht, ob es dafür einen Algorithmus zur Breitenbestimmung gibt.
Die Elemente befinden sich gleichzeitig in der Box. Es ist nicht so, dass man der Box sagen kann: "nimm mal bitte die Breite des ersten Elements an und dann begrenze das zweite Element mit dieser ermittelten Breite". Der erste Schritt ist ja mit shrink-to-fit noch möglich. Aber dieser "Schrumpfschlauch" schmiegt sich nun mal an alle Elemente an. Und der Fließtext will nun mal die maximal mögliche Breite. Das ist eine Hin- und Her-Beziehung, die man so in CSS nicht auflösen kann. Ein Kind mag 100% der Breite des Elter annehmen. Oder das Elter schmiegt sich allen Kindern an. Ein Test: deklariere in Opera display:inline-block auf einen wrapper, und tu ein Kind mit fester Breite rein. Der wrapper schmiegt sich um das Kind. Dann tu einen Fließtext dazu. Der Wrapper dehnt sich maximal aus. Ich kann mich natürlich auch sehr irren. Edit: ah, zu spät. Gut, mal wieder geirrt. Danke, fricca. Geändert von IChao (14.04.2007 um 13:54 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |