mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:04 Benutzername: Passwort: Auto-Login

Thema: CSS Div-Layer Breite an Inhalt anpassen vom 20.08.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Div-Layer Breite an Inhalt anpassen
Seite: 1, 2  Weiter
Autor Nachricht
Broco
Threadersteller

Dabei seit: 20.08.2010
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Fr 20.08.2010 16:06
Titel

CSS Div-Layer Breite an Inhalt anpassen

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich gucke seit Jahren nur passiv hier in das Forum, weil meist jede Frage schon einmal gestellt wurde.
Jetzt sitze ich aber vor einem Problem und komme absolut nicht weiter, vielleicht bin ich auch blind; auf jeden Fall könnte ich die Hilfe von ein paar Profis gebrauchen.
Hier mein Problemkind:



Wie man sieht, geht der Inhalt der großen Box im grün eingerahmten Bereich über die Grafik hinaus, und das nicht zu knapp.
Der Kasten besteht aus 8 DIVs, ein großer umrahmender (div-main), 6 Grafik-divs für die Box (oben rechts, oben links, mitte rechts (mit repeat-y), mitte links (ebenfalls repeat-y), unten rechts und unten links, sowie einem div für den Inhalt.
Hier der entsprechende HTML-Quelltext (hier ist auch noch der Teil mit den Reitern zu sehen, also die gesamte rot markierte rechte Seite):
Code:
<!-- DIV für die gesamte rechte Seite (Inhalt mit Reitern) -->
    <div class="ges-rechts">
    <!-- Listeneinträge müssen automatisch erzeugt werden! -->
        <div class="reiter-ges">
            <ul class="reiter">
                <li class="reiter-inaktiv">
                    <a href="beispiel1.html">
                        Stammdaten
                    </a>
                </li>
                <li class="reiter-inaktiv">
                    <a href="beispiel2.html">
                        Ma&szlig;nahme
                    </a>
                </li>
                <li class="reiter-inaktiv">
                    <a href="beispiel3.html">
                        Praktikum
                    </a>
                </li>
                <li class="reiter-aktiv">
                        Anwesenheit
                </li>
            </ul>
        </div>
        <!-- weißer Kasten -->
        <div class="main">
            <div class="middle-right">
                <div class="middle-left">
                    <div class="top-right">
                        <div class="top-left">
                            <div class="bottom-right">
                                <div class="bottom-left">
                                    <div class="inhalt">
                                        <!-- AB HIER KANN DER EIGENTLICHE SEITENINHALT EINGEFÜGT WERDEN -->
                                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />a <br />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                   
                </div>
            </div>               
        </div>
    </div>

Die a's und br's sind natürlich nur Testinhalt.

Hier der entsprechende CSS-Teil:
Code:
/*EINSTELLUNGEN FÜR DIE GESAMTE RECHTE SEITE MIT NAVIGATION */
    div.ges-rechts {
            margin-left:180px;
            }

    div.reiter-ges {
        margin-left:20px;
    }
   
    /*Einstellungen für die Reiter-Navigation */
    ul.reiter {
        background-color:#aaaadd;
        height:25px;
        list-style-type:none;
        font-size:12px;
    }
   
    li.reiter-inaktiv {
        background-image:url(../img/reiter-inaktiv.png);
        background-repeat:no-repeat;
        background-color:#aaaadd;
        float:left;
        height:25px;
        width:130px;
        list-style-type:none;
        text-align:center;
        font-size:12px;
        line-height:25px;
    }
   
    li.reiter-aktiv {
        background-image:url(../img/reiter-aktiv.png);
        background-repeat:no-repeat;
        background-color:#aaaadd;
        float:left;
        height:25px;
        width:130px;
        list-style-type:none;
        text-align:center;
        font-size:12px;
        line-height:25px;
    }
   
   
    li.reiter-inaktiv a {
        display:block;
        text-decoration:none;
        color:#000000;
        padding-top:2px;
        color:#000000;
    }
    li.reiter-inaktiv a:hover {
        background-image:url(../img/reiter-hover.png);
        text-decoration:none;
        display:block;
        padding-top:0px;
        color:#ffffff;
    }
   
/* HAUPTTEIL (INFORMATIONEN) */
    div.main {
        background-color:#aaaadd;
    }

    div.top-right {
        margin:0px;
        background-image:url(../img/ro.png);
        background-position:top right;
        background-repeat:no-repeat;
    }
   
    div.top-left {
        margin:0px;
        background-image:url(../img/lo.png);
        background-position:top left;
        background-repeat:no-repeat;
    }
   
    div.middle-right {
        margin:0px;
        background-image:url(../img/rm.png);
        background-position:right;
        background-repeat:repeat-y;
    }
   
    div.middle-left {
        margin:0px;
        background-image:url(../img/lm.png);
        background-position:left;
        background-repeat:repeat-y;
    }
   
   
    div.bottom-right {
        margin:0px;
        background-image:url(../img/ru.png);
        background-position:bottom right;
        background-repeat:no-repeat;
    }
   
    div.bottom-left {
        margin:0px;
        background-image:url(../img/lu.png);
        background-position:bottom left;
        background-repeat:no-repeat;
    }
   
    div.inhalt {
        padding:2.0em 2.5em 3.5em 2.5em;
        font-size:12px;
       
    }



Meine Frage nun: Warum ist die weiße Box immer nur so breit wie die Seite (wenn man das Fenster größer zieht, wird auch die weiße Box größer) und passt sich nicht an den Inhalt an?
Eigentlich haben DIVs doch die Eigenschaft, genau so breit zu sein wie der Inhalt.
Ich habe schon überlegt, ob es an dem Teil hier liegen könnte:
Code:

*{
        padding:0;
        margin:0;
        font-family:Verdana, sans-serif;
        }

Aber auch wenn ich das raus nehme, tritt dieser Effekt auf.
Ich komme nicht mehr weiter, kann mir jemand sagen, wie ich diese dämlichen DIVs dazu bringe, sich der Schrift anzupassen und nicht der Seitenbreite sitze schon seit 2 Tagen dran und trotz suche (auch hier im Forum) habe ich die Lösung nicht gefunden.

Vielen Dank schon einmal.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.08.2010 16:11
Titel

Antworten mit Zitat Zum Seitenanfang

Solche langen Wörter (da kein Leerzeichen!) werden nicht umbrochen und sind horiz. overflow, der das Elternelement nicht ausdehnt. CSS3 bietet für einen zwangsweisen Umbruch überbreiter Wörter word-wrap: break-word;. Aber wieso sollten auf Deiner Seite derartig lange Wörter erscheinen?

Und einen allzu schmalen Inhaltsbereich verhinderst Du per min-width, z.B. für body.

P.S.: divs richten sich nicht nach der Breite ihres Inhaltes, sondern nehmen die volle verfügbare Breite ihres Elternelementes ein. Das kann man verhindern per shrink-to-fit-width, die man z.B. per float oder display: table; bzw. table-cell bekommt (auch pos. abs.). Auch Elemente auf inline- oder inline-block-Level passen sich der Breite ihres Inhaltes an.


Zuletzt bearbeitet von heiko_rs am Fr 20.08.2010 16:20, insgesamt 6-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Broco
Threadersteller

Dabei seit: 20.08.2010
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Fr 20.08.2010 16:26
Titel

Antworten mit Zitat Zum Seitenanfang

Danke erstmal für die Antwort.
Es geht eigentlich weniger um die Wörter, sondern auch um andere Inhalte, wie z.B. Tabellen.
Das Ganze soll zum Beispiel auch noch eine Betriebsdatenbank enthalten schön formatiert ausgeben.
Ich habe jetzt mal einfach die "a's" weggemacht und durch eine größere Tabelle mit einer Zeile ersetzt.
Ergebnis:



Es soll ja auch wie gesagt kein Umbruch erzeugt werden, sondern der rechte Teil (also die große weiße Box unterhalb der Reiter) soll sich entsprechend dem Inhalt verbreitern, was ja, soweit ich weiß auch das Standardverhalten wäre.
Nur finde ich den Fehler nicht, der dieses Standardverhalten verhindert. :/


Zuletzt bearbeitet von Broco am Fr 20.08.2010 16:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.08.2010 16:38
Titel

Antworten mit Zitat Zum Seitenanfang

In jedem Falle sollte bei solchen Layouts body ausreichende min-width bekommen.

Darüberhinaus kann der Inhaltsbereich dann overflow: auto; bekommen, oder Du floatest ihn ohne Breite, aber mit min-width (dann bekommt body bei überbreitem Inhaltsbereich den Scrollbalken). Bei letzterer Variante kann die Breite des Inhaltsbereiches allerdings von Seite zu Seite (sowie von Browser zu Browser) variieren, was nicht unbedingt schön "aussieht". Außerdem müssen dabei noch Maßnahmen zur Verhinderung des Float-Drops getroffen werden, aber das führt jetzt zu weit.
  View user's profile Private Nachricht senden
Broco
Threadersteller

Dabei seit: 20.08.2010
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Fr 20.08.2010 16:51
Titel

Antworten mit Zitat Zum Seitenanfang

Hmmmmmmm.
Erstmal danke für deine Hilfe.
Ich habe jetzt dem nur eine Kleinigkeit geändert:
Code:
div.middle-right {
        margin:0px;
        background-image:url(../img/rm.png);
        background-position:right;
        background-repeat:repeat-y;
        position:absolute;
}


Das position:absolute hat gefehlt. Es erzeugt den gewünschten Effekt und vergrößert den gesamten Bereich auf die Breite des Inhalts.
Den Hinweis mit der min-width für den Body werde ich aber trotzdem beherzigen.
Vielen Dank nochmal.


Zuletzt bearbeitet von Broco am Fr 20.08.2010 16:51, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.08.2010 17:01
Titel

Antworten mit Zitat Zum Seitenanfang

Dass pos. abs. auch geht, schrieb ich ja bereits, aber das sollte eigentlich immer die letzte Möglichkeit sein, da Du dann z.B. keinen Footer mehr bekommst, der immer unterhalb der beiden Spalten steht. Auch ein gemeinsames Elternelement beider Spalten würde sich dem Inhaltsbereich nicht mehr anpassen.

Dennoch erzeugt man eben auch per pos. abs. eine shrink-to-fit-width (inkl. der beschriebenen Nachteile), aber Du solltest zumindest noch top & left deklarieren.
  View user's profile Private Nachricht senden
Broco
Threadersteller

Dabei seit: 20.08.2010
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Fr 20.08.2010 17:46
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hab das mit dem position:absolute ja auch erst aufgrund deines Hinweises ausprobiert.

Die anderen Tips habe ich nicht so ganz verstanden, ich bin eigentlich kein Webentwickler, sondern System- und Netzwerkadmin *bäh*
Gibts da ne gute Seite mit Beispielen für die beschriebenen Maßnahmen?

Das mit dem top und left deklarieren versteh ich auch nicht, es funktioniert doch jetzt, was soll ich da noch eintragen?
Wie gesagt: Admin; wir haben den Grundsatz "Never change a running system."

Edit:
Hab jetzt das position:absolute gegen display:table-cell getauscht, siehe da: funktioniert auch bestens.
Ist das sinnvoller oder besser?
Ich verstehe den Effekt nicht so ganz, also bei position:absolute macht es Sinn, aber display:table-cell versteh ich nicht.


Zuletzt bearbeitet von Broco am Fr 20.08.2010 18:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 20.08.2010 17:56
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn Dein Layout bleibt wie es ist, kannst Du pos. abs. verwenden - Du wirst ja merken, wenn die genannten Probleme auftreten. Gib dem div aber dennoch min-width, damit es bei sehr wenig Inhalt nicht in dem einen oder anderen Browser plötzlich extrem zusammenschrumpft.

Und wenn Du dem div mal probeweise als Offsets top: 300px; und left: 300px; gibst, siehst Du was passiert. Beides sollte auf jeden Fall dazu (Werte natürlich anpassen).
  View user's profile Private Nachricht senden
 
Ähnliche Themen Browserfenster bei url aufruf automatisch breite anpassen
[Flash] Breite fest, aber Höhe dynamisch nach Inhalt
Layer mit Text - Inhalt austauschen
[CSS] Inhalt innerhalb Layer vertikal ausrichten?
Div an Inhalt anpassen
div an Inhalt anpassen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.