Variabele waarden in CSS opnemen
Ik heb in mijn css-bestand een aantal ogenschijnlijk dezelfde classes staan. Echter met een vrschil, de hoogte en breedte varieeren
Nu vraag ik mij af of ik een dergelijke class ook kan aanroepen met de genwenste waardes van de hoogte en breedte.
Zoiets van <div class="invoerveld(400,100)>xxxx</div>
De class ziet er op dit moment zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.invoerveld_400x100 {
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
width:400px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
width:400px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
Zou zoiets werken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.invoerveld(var1,var2 {
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
width:var1;
height: var2;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
width:var1;
height: var2;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
Wie heeft zoiets eerder bij de hand gehad en heeft wellicht een oplossing?
George
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.invoerveld_400x100 {
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
border:4px solid #CC071E;
padding:10px 40px;
background: #E0E1DD;
margin-left: auto;
margin-right: auto;
border-radius:15px;
-moz-border-radius:15px; /* Firefox 3.6 and earlier */
}
en in je html/php script
style="width:".$_POST['breedte'].";height:".$_POST['hoogte'].";";
Gewijzigd op 21/05/2012 16:59:55 door Albert de Wit
@george ik denk niet dat dit gaat werken. je zal aparte classes moeten hebben die je aanroept.
Je kan verschillende dingen doen.
Ten eerste, je kan meerdere classes gebruiken in 1 element.
Zorg dat je de gemeenschappelijke dingen in de css file laat, de rest ... indien echt nodig doe je het met php.
bv.
Code (php)
1
2
3
2
3
<div class="invoerveld size1">...</div>
<div class="invoerveld size2">...</div>
<div class="invoerveld size3">...</div>
<div class="invoerveld size2">...</div>
<div class="invoerveld size3">...</div>
en dan genereer je met php iets als
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
...
<style>
.size1 {width: 100px; height: 50px;}
.size2 {width: 200px; height: 1000px;}
...
</style>
...
</head>
<body>
...
<head>
...
<style>
.size1 {width: 100px; height: 50px;}
.size2 {width: 200px; height: 1000px;}
...
</style>
...
</head>
<body>
...
Gewijzigd op 21/05/2012 17:59:00 door Kris Peeters
Kris Peeters op 21/05/2012 17:56:30:
Als het in een file staat, is de waarde vast.
Hoeft natuurlijk niet, je kan ook php de css file laten genereren, zodat je per pagina (oproep) kunt bepalen wat er in de css staat.
bv.
<script type="text/javascript" src="css.php?width=20&height=50"></script>
Dan zorg je er voor dat css.php die css genereert. Zoals je merkt, kan je dan perfect met GET-variabelen werken