PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Kann man div durch anderes div ausweiten?

huskarl
2007-12-11, 11:02:32
Hi.
Folgendes: Ich hätte auf einer Seite rechts gerne eine Leiste die mit einem Bild hinterlegt ist. Das Bild soll immer unten rechts sein und sich in einem Farbverlauf bis oben fortsetzen. Problem ist ja dass ich per css nicht zwei Hintergrundbilder in ein div packen kann. Zuerst wollte ich rechts nur ein Bild reinpacken (1px hoch) das sozusagen die Hintergrundfarbe definiert, welches sich dann per repeat-y bis oben hin wiederholt, und darüber (also nur rechts unten) das eigentliche Bild legen. Allerdings hab ich nicht rausgefunden wie man einfach ein Bild per html nach rechts unten packen kann. Dann dachte ich, ich leg einfach noch ein Div drüber, mit dem Hintergrundbild rechts unten. Wenn das darunterliegende div allerdings höher wird, weil mehr Text drin ist, hängt das Bild aus dem darüberliegenden Div natürlich immernoch auf 100% der Seitenhöhe, also mittendrin. Ich dachte das könnte ich lösen indem ich einfach das div mit dem Text, in das Div mit dem Bild packe, welches sich dann automatisch mit dem Textdiv ausdehnt. Aber irgendwie scheint das nicht zu funktionieren. Kann mir da wer helfen?

Ich versuch das nochmal schematisch darzustellen ;)

<div hintergrundbild rechts unten> </div>
<div text und hg bild was sich rechts wiederholt> </div>
(wenn hier der text zu lang ist dehnt sich der untere div, der obere logischerweise nicht)


<div hintergrundbild rechts unten>
<div text und hg bild was sich rechts wiederholt> </div> </div>
(dachte so nimmt das obere div automatisch die höhe des text div an, funktioniert aber irgendwie nicht)

Vielleicht stehe ich auch nur voll auf dem Schlauch ;)

Gruß,

huskarl
darph
2007-12-11, 11:26:16
Kling schwer nach div-Suppe. ;(

Mach mal bitte eine Graphik, von dem, was du willst.
Scream
2007-12-11, 11:37:29
Ich dachte das könnte ich lösen indem ich einfach das div mit dem Text, in das Div mit dem Bild packe, welches sich dann automatisch mit dem Textdiv ausdehnt. Aber irgendwie scheint das nicht zu funktionieren. Kann mir da wer helfen?

du könntest ein haupt-div machen in dem zuerst das text-div mit dem text kommt und dann unter diesem das bild-div
dann das haupt-div abschließen

sollte so eigentlich gehen
huskarl
2007-12-11, 11:52:16
Kling schwer nach div-Suppe. ;(

Mach mal bitte eine Graphik, von dem, was du willst.

Oh ja, klingt nach Suppe ;)
Ich versuchs mal:

http://img266.imageshack.us/img266/3439/b1yr3.th.jpg (http://img266.imageshack.us/my.php?image=b1yr3.jpg)

So isses zur Zeit. Der schwarze Kasten ist das "obere" div, und auch gleichzeit der Sichtbereich (width:100%, height:100%). Rechts unten in diesem Div ist das Bild (roter Kasten), allerdings ist der Text länger und deshalb sollte es so aussehen:

http://img526.imageshack.us/img526/3711/b2nt2.th.jpg (http://img526.imageshack.us/my.php?image=b2nt2.jpg)

Also die beiden Divs sollen nachher gleich hoch sein (der grüne Kasten ist übrigens das Hintergrundbild des "unteren Divs", welches sich in y-Richtung wiederholt). Und das Bild rechts unten. Hoffe jetzt isses verständlicher :)

Gruß,

huskarl
huskarl
2007-12-11, 12:02:28
du könntest ein haupt-div machen in dem zuerst das text-div mit dem text kommt und dann unter diesem das bild-div
dann das haupt-div abschließen

sollte so eigentlich gehen

habs eben erst gesehen :)

hm, ich hab ein neues div angelegt, mit h:100% und w:100%, also siehts theoretisch so aus (hab ich zumindest so verstanden):

<div id="maindiv">
<div id="unteres_div"> </div>
<div id="oberes_div"> </div>
</div>

aber irgendwie funktionierts nicht :/

Gruß,

huskarl
Scream
2007-12-11, 12:11:02
ich hab gerade etwas zeit und schau selber mal kurz ;)
Scream
2007-12-11, 14:49:24
ich hab mal ein wenig rumgetestet aber es scheint nicht so einfach zu gehen so wie du das magst

hab aber etwas ähnliches gemacht, kannst du dir ja mal anschauen und sagen was noch fehlt
erstell einfach 2 dateien und schaus dir an


test.html
<html>
<head>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="container">
<div id="text">
<p>adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash
adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
adshadshiasdhuaewtz aewtza afh adfhlapoidhah adsh asdgjasdh we zasha sdfhads hash</p>
</div> <!-- end text -->
<div id="bild">
</div> <!-- end bild -->
<div id="clear"></div>
</div> <!-- end container -->
</body>
</html>


layout.css
#container {width: 100%;}
#text {width: 85%; border: 3px solid #CCCCCC;}
#bild {float: right; width: 10%; padding: 20px; border: 3px solid #00ff00;}
#clear {clear:both;}
DanMan
2007-12-11, 16:37:26
Hi.
Das Bild soll immer unten rechts sein und sich in einem Farbverlauf bis oben fortsetzen. Problem ist ja dass ich per css nicht zwei Hintergrundbilder in ein div packen kann.
Warum brauchst du für sowas 2 Bilder? Mach 1 Bild 2000px hoch und setz es per CSS nach rechts unten.
huskarl
2007-12-11, 17:08:27
ich hab mal ein wenig rumgetestet aber es scheint nicht so einfach zu gehen so wie du das magst

hab aber etwas ähnliches gemacht, kannst du dir ja mal anschauen und sagen was noch fehlt
erstell einfach 2 dateien und schaus dir an


test.html
<html>
<head>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="container">
<div id="text">
<p>adadsg adsh asdh adsh dsah asdh adshdsahasdhkasdhkjsadh ads hsadjhasdjhasdhjjasdh
</p>
</div> <!-- end text -->
<div id="bild">
</div> <!-- end bild -->
<div id="clear"></div>
</div> <!-- end container -->
</body>
</html>


layout.css
#container {width: 100%;}
#text {width: 85%; border: 3px solid #CCCCCC;}
#bild {float: right; width: 10%; padding: 20px; border: 3px solid #00ff00;}
#clear {clear:both;}

hm, irgendwie nicht ganz das was ich brauche. wundert mich aber auch nicht bei meiner verqueren beschreibung ;) aber vielen danke für die mühe :)

Warum brauchst du für sowas 2 Bilder? Mach 1 Bild 2000px hoch und setz es per CSS nach rechts unten.

aber das tut mal weh, und zwar so richtig. macht man sich stundenlang nen kopp, und dann kommt da einer daher und klatscht ne lösung hin die einen fast vom stuhl kickt ;) vielen dank, fast die lösung all meiner probleme ;D;D:umassa:

gruß,

huskarl
ps: ab welcher bildhöhe mucken denn die browser rum? ;)
huskarl
2007-12-11, 19:22:04
ich bins schon wieder ;)

hat erstmal alles funktioniert wie geplant, bin aber nun drauf angewiesen das hintergrund direkt auf den body zu legen. nach rechts unten. hab gegoogelt, und eigentlich sollte das genau so funktionieren wie in divs auch, aber sobald bei mir die eigenschaft: bottom dazukommt wird die grafik nicht mehr angezeigt.

body {

font-family: arial, verdana, sans-serif;
background-color: #F3ED4E;
margin:0 0px;
width:100%;
height:100%;
background-image:url(rightx_wborder.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}


die drei "background"-zeilen hab ich einfach kopiert, und zwar von #content, und da hats noch funktioniert. vorhin hab ich dann noch festgestellt, dass wenn ich no-repeat in repeat-y ändere, wird was angezeigt, allerdings wird das dann nicht an den unteren rand geklebt, sondern an den oberen. und da ich den Tip mit dem 2000 Pixel hohen Bild verwende, nur eine einfarbige Fläche.

So langsam aber sicher bin ich davon überzeugt dass Seiten selbst schreiben nix für mich ist ;(

Verzweifelte Grüße,

huskarl
Scream
2007-12-11, 19:49:04
hmm komisch
was passiert wenn du z.b. nur bottom als background-position angibst?

kleine anmerkung "margin: 0;" reicht
DanMan
2007-12-11, 21:03:27
aber das tut mal weh, und zwar so richtig. macht man sich stundenlang nen kopp, und dann kommt da einer daher und klatscht ne lösung hin die einen fast vom stuhl kickt ;) vielen dank, fast die lösung all meiner probleme ;D;D:umassa:

gruß,

huskarl
ps: ab welcher bildhöhe mucken denn die browser rum? ;)
Gern geschehen. Manchmal ist man eben so in die Lösung eines Problems vertieft, dass man den Blick für das große Ganze verliert. Das sind dann die Momente, in denen man am stärksten von der Meinung Außenstehender profitiert. ;)

Die Browser mucken da garnicht. Aber 1200px sollten eigentlich auch für 99% der Besucher genügen.
huskarl
2007-12-11, 23:45:52
hmm komisch
was passiert wenn du z.b. nur bottom als background-position angibst?

kleine anmerkung "margin: 0;" reicht

wenn ich nur bottom angebe erscheint auch nix...das wundert mich ja ein bisschen
clerfayt
2007-12-12, 02:09:06
Bitte füg mal noch background-attachment: fixed; hinzu (in Kombination mit no-repeat) und sag, ob das das gewünschte Ergebnis bringt. Also:

background-image: url(...);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
huskarl
2007-12-12, 07:29:50
hm, das funktioniert. jetzt ist es halt fixed, und verschiebt sich nicht mehr mit. aber wenns anders nicht geht, bin ich damit auch voll zufrieden ;)
danke.

gruß,

huskarl