Zoals je kunt zien heeft deze box een subtiele achtergrond gradient (grijs bovenaan en dan naar wit). Het is de bedoeling dat als hier meer content in komt, dat het grijs bovenaan blijft, en dat er onderaan dan gewoon wit bijkomt. Kan iemand mij uitleggen hoe ik dit nu precies moet slicen?

Hallo Dieter,

Wellicht heb ik een idee voor je.
Slice eerst gewoon de box zonder gradient.

Ik zie dat de gradient image van de box afzit, dus gewoon een vierkant is.
Nou slice je gewoon die box.

Code:

<div class="box">
    <div class="gradient">
        Site 1
    </div>
</div>

Die gradient div geef je dan: background: url('gradient.png');

Als je niet begrijpt wat ik bedoel, stuur gerust een PM of voeg me toe op MSN.

Met vriendelijke groeten,

Huso.

Aah, zo voor de hand liggend :D, bedankt!

Geen probleem, graag gedaan.
Mocht je hulp nodig hebben, stuur me gerust een PM.

Je kunt ook dit doen:

PHP Code:

#bod
{
background-image: de gradient;
background-repeat: no-repeat;
background-color: de kleur onderaan van de box;
} 


Even een uitlegje erbij:
Je begint met de background-image. hij repeat die 1x. Als hij niet meer kan repeaten, dan gaat die verder met de background-color. En zo zie je geen verschil.

De methode van luuk is denk ik de beste hoor. Deze gebruik ik ook altijd.

Origineel gepost door luuk bijveld

Je kunt ook dit doen:

PHP Code:

#bod
{
background-image: de gradient;
background-repeat: no-repeat;
background-color: de kleur onderaan van de box;
} 


kortom:

Code:

background: url(afbeelding) no-repeat top #FFF;

(vergeet vooral de "top" niet)

Jullie zijn helemaal verkeerd!!!!!!!

Wat ik net zei is eigenlijk hetzelfde.

Maar jullie methode werkt niet aangezien de box anders is, deze is rond en gewoon een box.
De gradient zit IN die box, je kan een div maar EEN "background:" geven, dus dan zou die box er niet meer zijn maar alleen die gradient.

Als je wil dat de box ook groter kan worden(wat ik wel aanneem aangezien je wil dat de gradient op #FFF uitloopt) raad ik je het volgende aan:

<div id="box">
<div id="boxcontent">
content
</div>

<div id="boxbottom">
</div>
</div>

#box geef je mee: background zoals ruben aangeeft, padding-bottom, width (background = wit stukje met aan de zijkant lijntjes)
#boxcontent: background zoals ruben aangeeft, width(background is de volledige gradient)
#boxbottom: background(bottom), height, width

Hieronder een voorbeeldje van de manier waarop je het moet slicen.

Yep, zo moet het!

Ik denk zal dat je het beste gewoon de borders kan slicen en die met CSS oproepen.

Dan gewoon een backgroundcolor geven en de text een bepaalde kleur geven.

Mocht je hulp willen kun je gerust een PM sturen dan zal ik het gratis voor je doen, is namelijk niet veel werk.

Mvg,

T. Brouwer

Origineel gepost door rubenmarissen

kortom:

Code:

background: url(afbeelding) no-repeat top #FFF;

(vergeet vooral de "top" niet)

Background-position is standaard "left top", dus Top is niet nodig.. Ook niet in shorthand
D. Schaap heeft de enige en juiste oplossing.

PHP Code:

<div class="box">
     <img src="images/box_top.png" alt="" class="float_img" />
     <div class="box_inner">
          <ul>
              <li><a href="#" title="">Nav1</a></li>
          </ul>
     </div>
     <img src="images/box_bottom.png" alt="" class="float_img" />
</div> 


CSS:

PHP Code:

div.box {
     width: 100px;
     margin: 5px 0 0 5px;
}
div.box_inner {
     background: url('images/debackground.png') repeat-x;
     min-height: 100px;
     width: 90px;
     margin: 5px 0 0 5px;
}
div.box_inner ul {
     float: left;
     width: 90px;
     padding: 0;
     margin: 0;   
     display: inline; /* IE6 bug voorkomen */
}
div.box_inner ul li {
     float: left;
     width: 90px;
     height: 10px;
     list-style: none;
     background: url('images/pijl.png') no-repeat;
}
div.box_inner ul li a {
     float: left;
     padding: 0 0 0 20px;
     width: 70px;
     height: 15px;
     font: 12px verdana;
     text-decoration: none;
}
.float_img {
     float: left;
} 


Zo zal het er uiteindelijk een beetje uit moeten zien, zorg er wel voor dat je de div style als class gebruikt, zo kun je het menu vaker terug laten komen op een manier die XHTML valid is.