Variabler Div-Container

chuqa

Hallo allerseits,

ich habe folgendes Problem.
Ich möchte ein div-Bereich definieren in dem ein Logo zu sehen ist. Ich habe das Logo als background-image angegeben. Das Logo ist in dem Bild in ein Farbverlauf eingebettet. Nun hab ich ein weiteres Bild, und zwar nur den Verlauf (1px hoch). Dieses Bild soll als Hintergrund genutzt werden, wenn der Text über die Höhe des Logos (600px) hinausgeht, es soll also je nach Länge des Textes soll der div-Bereich höher werden Um diesen Farbverlaufsstreifen als Hintergrundgrafik zu nutzen muss ich ja auch dieses in einen div-Bereich als Hintergrundgrafik definieren. Nur wie bekomme ich den Text nun dort hinein. Ich weiß eben nicht vorher wie lang der Text ist.Ich hoffe ihr versteht mich. Wenn nicht fragt nach. Wäre schön wenn mir jemand helfen kann.
Danke.

mfg chuqa

sejuma

Meinst du so?

CSS

Code

#main
{background-image: url(farbverlauf.jpg)}
#logo
{background-image:url(logo.jpg);
background-repeat: no-repeat;}

HTML

Code

<div id="main">
<div id="logo">
text


text


text


text


text


text


text


text




</div>
</div>

Alles anzeigen

chuqa

Ahhh, herzlichen Dank,

Das

Code

background-repeat:no-repeat

hat mir gefehlt

Danke

chuqa

hi, ich habe doch noch ein Problem dazu,

was ist, wenn ich auf jeden Fall das Logo im Hintergrund vollständig angezeigt haben will, denn bis jetzt ist es so, dass wenn der Text größer als das Logo ist, das so angezeigt wird, wie gewünscht. Allerdings wenn der Text nicht die Höhe des Logos hat, wird der div-Bereich auf die Höhe des Textes begrenzt und das Logo abgeschnitten.

gruß chuqa

sejuma

Dann musst du dem div mit dem Logo noch einen height-Wert zuordnen der der Höhe der Grafik entspricht. Z.B. so:

Code

#logo
{background-image:url(logo.jpg);
height:100px;
background-repeat: no-repeat;}

chuqa

dann is zwar das logo zu sehen, geht der text allerdings über die länge des logos hinaus (und damit über den div-bereich), wird der darüberliegende div-bereich nicht verlängert und der text hängt auf dem hintergrund vom body, also schwebt praktisch frei.

gruß chuqa

sejuma

Kannst du mal bitte einen Link oder deinen Quelltext posten?

chuqa

PHP

<div id="main_bg" style="background-image:url(bg_verlauf2.gif);top:155px;width:800px;margin: auto">
     <div id="main_fg" style="background-image:url(bg_logo_verlauf.gif);background-repeat:no-repeat;top:155px;height:600px">
          <?php
               [...]
          ?>
     </div>
</div>

sejuma

Ist schwierig, aber probier mal folgendes:
Weise dem #main_bg mal die gleiche Breite zu, die das "bg_logo_verlauf.gif" hat.
Beim #main_fg nimmst du den height-Wert raus.
Jetzt kannst du ins fixe Logo Text schreiben, der sich über das Logo hinaus nach unten verlängert und den Hintergrund vom #main_bg bekommt.
Falls du dann noch links und rechts davon den gleichen Background haben möchtest, müsstest du alles in einen weiteren div mit größerer Breite setzen.

DarkSyranus

Zitat von chuqa

dann is zwar das logo zu sehen, geht der text allerdings über die länge des logos hinaus (und damit über den div-bereich), wird der darüberliegende div-bereich nicht verlängert und der text hängt auf dem hintergrund vom body, also schwebt praktisch frei.

gruß chuqa

Ersetze mal das height durch min-height, dann sollte es gehen.

chuqa

Also mit min-height funktioniert das ganze wenn der Text länger als die 600px ist. Ist der Text kürzer funktioniert es auch im Firefox, allerdings sträubt sich der IE7 dagegen.

Alles anderen hat bei mir keinen Erfolg gebracht.

Variabler Div-Container

Tags

Benutzer online in diesem Thema