CSS- 2 Bilder mehr im Hintergrund?

**jbergmann** · 16.01.2009 11:35

Hallo,
Ich habe folgendes Problem:
Ich will Design meines Menüs anpassen (s. Anhang). Momentan besteht es jedoch nur aus einem Hintergrundbild (in der template.css), welches folgendermaßen definiert ist:

Code:

.leftcol .bgbottom, .rightcol .bgbottom{
background:url(../images/sidebg-b.png) bottom right no-repeat;
padding:1px 1px 50px 1px;
}

Nun will ich aber nicht, dass das Bild abgeschnitten wird, wenn das Menü mal nicht so viele Punkte umfasst (die roten Markierungen im Bild). D.h., dass der obere Rand auch abgerundet ist.
Darum dachte ich mir, dass ich anstatt dem einen Bild 3 Bilder einfüge: eins am oberen Rand, eins am Unteren und eins als y-repeat in der Mitte.

Wie mache ich das am besten? Habe leider wenig ahnung, was ich alles beachten muss und wie ich anfange.

Danke!
j_b_p

**blaulichttreff** · 16.01.2009 11:43

du packst die spalte in weitere divs:

Code:

<div deine linke spalte...
         <div class="menu_top"> </div>
              <div class="menu_body">

    <jdoc:include type="modules" name="left" style="xhtml" />
              </div>
             <div class="menu_bottom"> </div>
</div>

dazu die css:

Code:

/* Menurahmen  */

.menu_top {
background: transparent url("../images/menu/menu_bild1.gif") bottom left no-repeat;
height: ....px;
}

.menu_body {
background: transparent url("../images/menu/menu_bild2.gif") repeat-y;
}

.menu_bottom {
background: transparent url(../images/menu/menu_bild3.gif) no-repeat;
height: ...px;
}

musst es im grunde nur auf deine bilder/seite anpassen

**jbergmann** · 16.01.2009 11:49

Oh, vielen Dank für die schnelle Antwort. Werde es gleich mal so machen

MfG
jbergmann

**jbergmann** · 16.01.2009 12:07

@blaulichttreff:
Sorry, aber irgendwie komm ich nicht wirklich klar...
Ich muss die divs doch in die index.php reinpacken?!

Dort lautet der Code:

Code:

<?php if($this->countModules('left')) : ?>	                                                     
		<div class="leftcol" id="left<?php echo $contentwidth; ?>"><div class="bgbottom">
			<jdoc:include type="modules" name="left" style="xhtml" />
		</div></div>
	<?php endif; ?>	
	<?php if($this->countModules('right')) : ?>	
		<div class="rightcol" id="right<?php echo $contentwidth; ?>"><div class="bgbottom">
			<jdoc:include type="modules" name="right" style="xhtml" />
		</div></div>
	<?php endif; ?>

Wie mach ich das nun genau?

Danke schon mal für deine/eure Hilfe!

MfG
j_b_p

**blaulichttreff** · 16.01.2009 12:16

Code:

<?php if($this->countModules('left')) : ?>	                                                     
		<div class="leftcol" id="left<?php echo $contentwidth; ?>"><div class="bgbottom">
*** neu ***
         <div class="menu_top"> </div>
              <div class="menu_body">

    <jdoc:include type="modules" name="left" style="xhtml" />
              </div>
             <div class="menu_bottom"> </div>
*** neu ***
		</div></div>
	<?php endif; ?>

**jbergmann** · 16.01.2009 13:58

Erstmal vielen Dank für deine Hilfe! Hat jetzt geklappt.
Nur eine kleine Frage hab ich noch und zwar sieht das jetzt etwas komisch aus: Jetzt hab ich ne Lücke zwischen den Bildern (s. Anhang, rote Markierungen sind die einzelnen Bilder).

Hab schon verschiedene Padding-Einstellungen versucht, aber ich bekomme die untere Lücke einfach nicht geschlossen.

Kann man es so machen, dass die (untere) Kante vom unteren Bild bündig mit dem letzten Menüeintrag abschließt? (grüne Pfeile) ?

Danke!
MfG jbergmann

**blaulichttreff** · 16.01.2009 14:45

mit den padding-einstellungen bist du schon auf dem richtigen weg, und zwar musst du die padding-einstellungen der module etwas anpassen. hast du einen link zur seite, dann schau ich mal.

**jbergmann** · 16.01.2009 14:53

http://jb0612.jb.funpic.de/

Die Homepage

Danke

**blaulichttreff** · 16.01.2009 15:59

ergänze mal hier das rote

Code:

.menu_body {template.css (Linie 213)
background:transparent url(../images/sidebg-m.png) repeat-y scroll 0 50%;
margin-bottom:-12px;
}

**jbergmann** · 16.01.2009 16:07

Vielen Dank, das ist es!

jbergmann

Thema: CSS- 2 Bilder mehr im Hintergrund?

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

CSS- 2 Bilder mehr im Hintergrund?

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen