Beetje onduidelijk wat je precies wilt maar als je de tekst ten alle tijden in het midden van je 2e div wilt hebben (style2) dan kan je mee geven:

text-align:center;

Eventueel kan je nog een line-height of een vertical-align mee geven :)

http://www.w3schools.com/css/default.asp

Zou je misschien de gehele CSS kunnen posten die je momenteel hebt voor de 2 divs?
En waarom zou je 2 divs willen hebben in elkaar? Wat is jouw eindproduct?

Nou het is een soort status balk..

.style1{
width: 90%;
color:#000000;
border: 1px solid #000;
background: url(images/groen.png);
font-size: 11px;
text-align:center;
font-weight: bold;
}

.style2{
background: url(images/donkergroen.png);
}

De gehele achtergrond is dus groen, en de achtergrond die bepaald hoeveel succes is donkergroen.

Zoiets?

Code:

<div class="test">test</div>
<div class="style1"></div>
<div class="style2"></div>

+

Code:

.test{
text-align:center;
color:#fff;
width:200px;
position:absolute;
}

.style1{
background:#666;
float:left;
width:100px;
height:25px;
}

.style2{
background:#333;
float:left;
width:100px;
height:25px;
}

levert dit op: http://nielsaupperlee.nl/testing/testing.html

Zoals vb. kan ik niet in script zelf de width van de 2de bepalen zodat hij de eerste overschrijfd.
Wat me bedoeling is, dat wanneer er 0% van totaal 100% is de balk lichtgroen word.
wanneer je 100% heb word hij ook volledig..

Op de manier die ik had werkte hij daar voor wel. Alleen kreeg door middel van die functie de tekst niet in het midden van de balk.

Zo gebruik ik mijn <div>'s

<div class="style1"><div class="style2" style="width: '.$aantal/$maxaantal*100 .'%">'.$aantal.' / '. $maxaantal.'</div></div>

Zo dan?

Code:

<div class="style1"></div>
<div class="style2"></div>
<div class="test">test</div>

Code:

.test{
text-align:center;
color:#fff;
width:100px;
position:absolute;
}

.style1{
background:#6c6;
float:left;
width:100px;
height:25px;
}

.style2{
position:absolute;
background:#060;
float:left;
width:50px;
height:25px;
}

http://nielsaupperlee.nl/testing/testing.html

Als je nu de breedte van de 2e div aanpast naar 75, zal er een groter gedeelte donkergroen zijn.

Als ik het dus goed bedgrijp heb je een statusbalk , welke bestaat uit twee delen, een linker en rechter deel. Vervolgens wil je in het midden van deze statusbalk je tekst?

Maar je wilt dat deze tekst wel gecentreerd blijft? Als dit juist is, zou je met position absolute moeten gaan werken. Je geeft je tekst een aparte class. In die class zet je position:absolute; z-index:2;. Je html page zou nu je tekst boven de overige twee divs zetten.

Voor een oplossing zou ik graag een documentje van je ontvangen, en maak ik dit kostenloos voor je in orde;)
Aanvullend bericht:
Probeer dit eens:

<div id="statusbalk" class="statusbalk">
<div id="statusbalk_l" class="statusbalk_l"/>
<div id="statusbalk_r" class="statusbalk_r"/>
<div id="statusbalk_tekst" class="statusbalk_tekst"/>
</div>

.statusbalk {width: 700px; height:30px; float:left;}
.statusbalk_l{float:left; width:50%; height:30px; background-color:red;}
.statusbalk_r {float:left; width:50%; height:30px; background-color:green;}
.statusbalk_tekst {position: absolute; width:100%; height:30px; text-align:center; z-index:2;}

Dit zou moeten werken

Helaas plaatst hij de tekst er niet in..

Verander de .statusbalk in:
.statusbalk {width: 700px; height:30px; position:absolute; }
werkt hij nu wel, of zet hij de tekst erin?

http://nielsaupperlee.nl/testing/testing.html

De tekst staat er toch in of begrijp ik je verkeerd?

Origineel gepost door Nicolai Slagter

Helaas plaatst hij de tekst er niet in..

Ja het werkt, thnx..

Mooi zo.
Graag gedaan!

Origineel gepost door Nicolai Slagter

Ja het werkt, thnx..