zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div mit angepasster Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.04.2007, 12:17
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.04.2007, 12:30
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von netAction Beitrag anzeigen
Das geht aber nicht, weil ein div immer die volle Breite nimmt, die zur Verfügung steht.
Wieso weist du dem Bereich dann nicht einfach eine feste Breite zu?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.04.2007, 12:37
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.04.2007, 12:38
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 14.04.2007, 12:55
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.641
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von netAction Beitrag anzeigen
Weil ich dann eine bestimmte Schriftart und -größe vorgeben müsste und die Seite nicht mehr mit Strg-+ skalierbar wäre.
Ja? Hast du denn noch nie mit der Einheit „em“ gearbeitet?
Mit Zitat antworten
  #6 (permalink)  
Alt 14.04.2007, 13:06
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 14.04.2007, 13:31
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 14.04.2007, 13:39
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.04.2007
Ort: Berlin
Beiträge: 159
netAction befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 14.04.2007, 13:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von iChao
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.
Mit display:table und einer sehr kleinen Breitenangabe sollte sich die umgebende Box auf die gewünschte Breite zwingen lassen.
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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.04.2007, 13:51
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (14.04.2007 um 13:54 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:20 Uhr.