[CSS] image boven <UL> en onder <P> ?!

[moozzuzz]

Beste,

Ik heb volgend vraagje waar ik al weer even mee worstel en waar ik vooral niet de juiste zoektermen voor kan vinden (what's in a name). Ik wil een fancy boxje maken met afgeronde hoeken (linksboven+rechtsonder) en een variabele hoogte.

De eerste lap code had ik en die werkte goed. Alleen stelde ik vast dat de content in mijn fancy boxje meestal een oplijsting is en er dus beter een ul kon gebruikt worden. En toen ging het fout... Ik heb al gegoocheld met oa z-index (maar dat gaf geen effect + geloofde ik zelf ook niet in) en display:block maar dat lijkt geen invloed te hebben. Probleem doet zich voor in FF+IE, dus 't is geen IE-bug op 't eerste zicht.

Deze werkt zoals ik wil, met name dankzij het feit dat de code met title en text etc na de absolute "hoek"-image komt, lopen die er mooi overheen (FF en IE) :

HTML:

<div class="aandacht">

<img src="./2pix/z-test/k001.bmp" class="rechterhoek">

<p class="title">
Basisvorming &#8216;Eerste Hulp&#8217;
</p>

<p class="text">
<b>· Cursus 1:</b>  dinsdagvoormiddag vanaf 22 januari 2008<br>
<b>· Cursus 2:</b>  dinsdag- en donderdagavond vanaf 22 januari 2008<br>
<b>· Cursus 1:</b>  zaterdagvoormiddag vanaf 19 januari 2008<br>
<b>· Cursus 2:</b>  maandag- tot vrijdagavond vanaf 31 maart 2008<br>
<b>· Cursus 1:</b>  maandagavond vanaf 14 april 2008
</p>

<p class="link">
voor meer informatie: <a></a>
</p>
</div>

Met de UL lukt dit niet. Op een of andere manier komt de rechterhoek-image boven de UL/LI te liggen. Ik weet niet waarom en vind er ook geen informatie over.

HTML:

<div class="aandacht">

<img src="./2pix/z-test/k001.bmp" class="rechterhoek">

<p class="title">
Basisvorming &#8216;Eerste Hulp&#8217;
</p>

<ul>
<li><b>· Cursus 1:</b>  dinsdagvoormiddag vanaf 22 januari 2008</li>
<li><b>· Cursus 2:</b>  dinsdag- en donderdagavond vanaf 22 januari 2008</li>
<li><b>· Cursus 1:</b>  zaterdagvoormiddag vanaf 19 januari 2008</li>
<li><b>· Cursus 2:</b>  maandag- tot vrijdagavond vanaf 31 maart 2008</li>
<li><b>· Cursus 1:</b>  maandagavond vanaf 14 april 2008</li>
</ul>

<p class="link">
voor meer informatie: <a>klik hier</a>
</p>
</div>

Cascading Stylesheet:

/* enkel relevante css */
.aandacht {
   position: relative;
   background: kleur url('./2pix/z-test/k000.bmp') no-repeat left top;
   overflow:hidden;
}

.aandacht img.rechterhoek {
   position: absolute;
   bottom: 0px;
   right: 0px;
}

.aandacht p.title {}
.aandacht p.text {}
.aandacht p.link {}

/* alternatief */
.aandacht ul {}
.aandacht ul li {}

Noot: .bmp was om snel te kunnen testen :^)

[NitroX infinity]

waarom geen .aandacht img.linkerhoek?

[Arjan90]

Die zit denk ik in .aandacht verwerkt? Deze staat namelijk op no-repeat left top, helemaal linksboven dus.

Overigens een raar probleem, wat gebeurt er als je de ul tags in een p tag doet?

[NitroX infinity]

Sp!tF!re schreef op woensdag 19 december 2007 @ 19:26:
Die zit denk ik in .aandacht verwerkt? Deze staat namelijk op no-repeat left top, helemaal linksboven dus.

Ja als background, maar waarom niet los net als rechterhoek?

[moozzuzz]

NitroX infinity schreef op woensdag 19 december 2007 @ 19:51:
[...]

Ja als background, maar waarom niet los net als rechterhoek?

De vraag is eerder waarom wel? De rechterhoek vind ik al een 'hack'. Mijn vraag komt er eigenlijk op neer waarom de UL-constructie niet reageert zoals de P-constructie.

Ter info: de layout moet er dan ongeveer zo uit zien:

code:

.
  ____________
 /
|
|            |
   _________/

Waar de bovenste hoek door de background op de DIV wordt getoond en de onderste door de "rechterhoek"-image.

[Boelie-Boelie]

Misschien helpen de volgende pagina's je wat verder?
http://css-discuss.incutio.com/?page=RoundedCorners
www.smileycat.com/miaow/archives/000044.php

Zou denk ik die onderste img als background van de onderste p doen (niet getest, is gok), dus niet als een inline img.