DIV dynamischer Größe mit Schatten

TheIfrit · 27.02.2006, 10:04

Hallo,
ich erstelle ein text-div und möchte dahinter einen Schatten-div haben...
soweit kein Problem, sofern das text-div eine feste größe besitzt.
Wenn es aber durch unterschiedlich lange Texte die größe variiert, wie krieg ich da das schatten-div genauso groß, ohne den gesamten text darauf nochmal in der hintergrundfarbe des schatten-divs zu schreiben?

Ich hab mir überlegt, die ausgegeben zeilen zählen zu lassen und dann das schatten-div mit entsprechend vielen
zu versehen, wo aber das problem kommt, dass des schatten-div ja zuerst geschrieben wird.

Hat jemand ne Idee, wie ich das schatten-div datensparend aufbauen kann?

MfG
Ifrit

dsmcg · 27.02.2006, 10:44

warum das ganze nicht so machen dass, das «normale» div einfach scrollen kann wenn der Text zu lange wird ?

TheIfrit · 27.02.2006, 10:55

also mit position:fixed?

weil ich mich dunkel erinnere, dass beim letzten mal, als ich das anwenden wollte, der IE das nich konnte und ich noch nicht gehört hab, dass sich da was geändert hat.

Oder meinst du mit Scrollbalken?

mit dem gedanken hatte ich auch gespielt... aber so richtig konnte ich mich damit nicht anfreunden, weil das doch recht... hässlich aussieht.

MfG
Ifrit

dsmcg · 27.02.2006, 10:59

ich dachte da mehr an sowas:

http://www.css4you.de/overflow.html

TheIfrit · 27.02.2006, 11:13

ok... ja, das overflow hatte ich durch das standardbeispiel beim scrollbalken drin, aber naja... wie gesagt, die scrollbalken sehen recht unansehnlich aus.

Vielleicht lass ich den schatten auch weg und dann isses egal wie lang das wird.

Ich würd ja am liebsten position:fixed nehmen, aber M$ hängt da ja wieder hinterher :-/

aber danke fürs drüber nachdenken

marcusson · 27.02.2006, 15:02

Vorschlag zur Güte.

<div class="schatten">
<div class="text">
text
</div>
</div>

Dann einfach als Background für dan Schatten ein einfarbiges Bild in der gewünschten Schattenfarbe angeben. Und die Startposition für den Background so setzen, dass links und oben ein kleines Stück frei bleibt.

Habe es nicht getestet, aber es käme wohl einfach mal auf einen Versuch an.

TheIfrit · 27.02.2006, 15:12

netter gedanke, aber das Schatten-Div lässt sich davon gar nicht beeindrucken.

gibt wohl doch nur die möglichkeiten:

- kein schatten bei variabler Größe(schade drum)
- scrollbalken (is nicht wirklich schön)
- Zeilen im Schatten-Div nochmal aufschreiben/durch
oder dynamisch ähnliches ersetzen (sollte ja eigentlich in DSL-Zeiten nicht so das Problem sein)
- M$ verfluchen, dass position:fixed beim IE nich geht

Nochmal danke fürs überlegen

Basti · 27.02.2006, 20:55

Zitat:

Zitat von TheIfrit

netter gedanke, aber das Schatten-Div lässt sich davon gar nicht beeindrucken.

Was meinst du denn damit? Du kannst doch einfach für das äußere DIV einsprechende padding-Werte setzen und in die Exken jeweils die nochmal DIVS mit den Eck-Bildchen legen. Schön ist das natürlich nicht, aber funktionieren tut es in allen Browsern - warum auch nicht?

Basti

TheIfrit · 28.02.2006, 08:03

marcusson, du hast natürlich recht... das funktioniert.

Ich hatte das main-div auf position:absolute gesetzt, da konnte das natürlich nicht gehen

muss natürlich position:relative sein

style.css

Code:

.main
{
    background-color: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    top: -15px;
    left: -15px;
    padding: 10px 10px 10px 10px;
    border: thin solid #888888;
}

.shadow
{
    background-color: #AAAAAA;
    position: absolute;
    width: 800px;
    height: 500px;
    top: 25px;
    left: 25px;
    border: thin solid #DDDDDD;
}

divtest.html

Code:

...
    <body>
        <div class="shadow">
            <div class ="main">
                 

variable Anzahl Absätze</p>
            </div>
        </div>
    </body>
...

Wieder so ein Problem, was ich mit ein wenig überlegen hätte auch ohne Frage lösen können

Danke
TheIfrit

15.03.2006, 18:21

Hallo Leute,

ich tüftele gerade an einem ähnlichen Problem.
Das letzte Beispiel funktioniert prinzipiell super, das Einzige was mich stört ist, dass die Sache nur geht, wenn man das shadow-div auch mit width und height versieht.
Ich würde das gerne so hinbiegen, dass sich die Höhe automatisch vergrößert/verkleinert, eben je nach 'main'-Länge!

Oder ist genau DAS nicht möglich?

wenn ich zwei divs verschachtele, dann sollte sich meiner auffassung nach das äußere div gemäß der größe des inneren divs anpassen oder verstehe ich da etwas falsch?

Grüße,
mefiX

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dynamischer Code	BERSIM	PHP Tipps 2008	4	26.10.2007 10:46
Problem mit dynamischer Bildausgabe	Charly Shop Sui	HTML, Usability und Barrierefreiheit	11	20.07.2006 22:15
SQL-Statement in dynamischer Tabelle ausgeben	Borlox	Datenbanken	18	01.04.2006 20:27
Dynamischer SQL Query	Fritz73	PHP Tipps 2006	8	24.03.2006 17:24
Dynamischer Dropdown?	Broadcast	PHP Tipps 2005-2	7	02.09.2005 17:55
Denkanstoß bzgl. dynamischer Tabelle mit php / js		PHP Tipps 2005-2	6	25.08.2005 13:46
Dynamischer Text in einer Grafik per Formular einfügen		PHP Tipps 2005-2	2	19.08.2005 00:55
[Erledigt] Bilder als dynamischer Link!!		PHP Tipps 2005-2	4	19.07.2005 11:35
Dynamischer Eingriff in das DB-Modell (MySQL < 4)		Datenbanken	0	18.07.2005 13:50
Brauch mal einen Schatten		HTML, Usability und Barrierefreiheit	12	03.01.2005 14:45
Hallo und Frage zu dynamischer Veränderung in Textfeldern.		PHP Tipps 2004-2	2	27.12.2004 22:29
Dynamischer Seitenwechsel an hintergrundbild gerichtet		HTML, Usability und Barrierefreiheit	4	15.10.2004 17:28
Frameborder in Farbe, aber ohne Schatten	duerov	HTML, Usability und Barrierefreiheit	4	05.10.2004 22:24
404-Dokument mit dynamischer Weiterleitung		PHP Tipps 2004	8	24.09.2004 11:21
Dynamischer Dateiname		PHP Tipps 2004	2	09.09.2004 10:45

27.02.2006, 10:04
TheIfrit Erfahrener Benutzer Registriert seit: 23.02.2005 Beiträge: 211	DIV dynamischer Größe mit Schatten Hallo, ich erstelle ein text-div und möchte dahinter einen Schatten-div haben... soweit kein Problem, sofern das text-div eine feste größe besitzt. Wenn es aber durch unterschiedlich lange Texte die größe variiert, wie krieg ich da das schatten-div genauso groß, ohne den gesamten text darauf nochmal in der hintergrundfarbe des schatten-divs zu schreiben? Ich hab mir überlegt, die ausgegeben zeilen zählen zu lassen und dann das schatten-div mit entsprechend vielen zu versehen, wo aber das problem kommt, dass des schatten-div ja zuerst geschrieben wird. Hat jemand ne Idee, wie ich das schatten-div datensparend aufbauen kann? MfG Ifrit __________________ Wie lautet die adäquate Antwort auf "ihr benehmt euch wie kleine Kinder!" ? "Er hat Angefangen!"


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.02.2006, 10:44
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	warum das ganze nicht so machen dass, das «normale» div einfach scrollen kann wenn der Text zu lange wird ? __________________ Wie man Fragen richtig stellt

27.02.2006, 10:55
TheIfrit Erfahrener Benutzer Registriert seit: 23.02.2005 Beiträge: 211	also mit position:fixed? weil ich mich dunkel erinnere, dass beim letzten mal, als ich das anwenden wollte, der IE das nich konnte und ich noch nicht gehört hab, dass sich da was geändert hat. Oder meinst du mit Scrollbalken? mit dem gedanken hatte ich auch gespielt... aber so richtig konnte ich mich damit nicht anfreunden, weil das doch recht... hässlich aussieht. MfG Ifrit __________________ Wie lautet die adäquate Antwort auf "ihr benehmt euch wie kleine Kinder!" ? "Er hat Angefangen!"

27.02.2006, 10:59
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	ich dachte da mehr an sowas: http://www.css4you.de/overflow.html __________________ Wie man Fragen richtig stellt

27.02.2006, 11:13
TheIfrit Erfahrener Benutzer Registriert seit: 23.02.2005 Beiträge: 211	ok... ja, das overflow hatte ich durch das standardbeispiel beim scrollbalken drin, aber naja... wie gesagt, die scrollbalken sehen recht unansehnlich aus. Vielleicht lass ich den schatten auch weg und dann isses egal wie lang das wird. Ich würd ja am liebsten position:fixed nehmen, aber M$ hängt da ja wieder hinterher :-/ aber danke fürs drüber nachdenken __________________ Wie lautet die adäquate Antwort auf "ihr benehmt euch wie kleine Kinder!" ? "Er hat Angefangen!"

27.02.2006, 15:02
marcusson Erfahrener Benutzer Registriert seit: 17.02.2006 Beiträge: 132 PHP-Kenntnisse: Fortgeschritten	Vorschlag zur Güte. <div class="schatten"> <div class="text"> text </div> </div> Dann einfach als Background für dan Schatten ein einfarbiges Bild in der gewünschten Schattenfarbe angeben. Und die Startposition für den Background so setzen, dass links und oben ein kleines Stück frei bleibt. Habe es nicht getestet, aber es käme wohl einfach mal auf einen Versuch an.

27.02.2006, 15:12
TheIfrit Erfahrener Benutzer Registriert seit: 23.02.2005 Beiträge: 211	netter gedanke, aber das Schatten-Div lässt sich davon gar nicht beeindrucken. gibt wohl doch nur die möglichkeiten: - kein schatten bei variabler Größe(schade drum) - scrollbalken (is nicht wirklich schön) - Zeilen im Schatten-Div nochmal aufschreiben/durch oder dynamisch ähnliches ersetzen (sollte ja eigentlich in DSL-Zeiten nicht so das Problem sein) - M$ verfluchen, dass position:fixed beim IE nich geht Nochmal danke fürs überlegen __________________ Wie lautet die adäquate Antwort auf "ihr benehmt euch wie kleine Kinder!" ? "Er hat Angefangen!"

28.02.2006, 08:03
TheIfrit Erfahrener Benutzer Registriert seit: 23.02.2005 Beiträge: 211	marcusson, du hast natürlich recht... das funktioniert. Ich hatte das main-div auf position:absolute gesetzt, da konnte das natürlich nicht gehen muss natürlich position:relative sein style.css Code: .main { background-color: #FFFFFF; position: relative; width: 100%; height: 100%; top: -15px; left: -15px; padding: 10px 10px 10px 10px; border: thin solid #888888; } .shadow { background-color: #AAAAAA; position: absolute; width: 800px; height: 500px; top: 25px; left: 25px; border: thin solid #DDDDDD; } divtest.html Code: ... <body> <div class="shadow"> <div class ="main"> variable Anzahl Absätze</p> </div> </div> </body> ... Wieder so ein Problem, was ich mit ein wenig überlegen hätte auch ohne Frage lösen können Danke TheIfrit __________________ Wie lautet die adäquate Antwort auf "ihr benehmt euch wie kleine Kinder!" ? "Er hat Angefangen!"

15.03.2006, 18:21
Gast Beiträge: n/a	Hallo Leute, ich tüftele gerade an einem ähnlichen Problem. Das letzte Beispiel funktioniert prinzipiell super, das Einzige was mich stört ist, dass die Sache nur geht, wenn man das shadow-div auch mit width und height versieht. Ich würde das gerne so hinbiegen, dass sich die Höhe automatisch vergrößert/verkleinert, eben je nach 'main'-Länge! Oder ist genau DAS nicht möglich? wenn ich zwei divs verschachtele, dann sollte sich meiner auffassung nach das äußere div gemäß der größe des inneren divs anpassen oder verstehe ich da etwas falsch? Grüße, mefiX