CSS external - Inline - inpage
ik heb een css waar nu vaak de volgende style in voorkomt:
.content_container_page1
{
float: left;
width: 273px; <- deze hier weg en dan inline of inpage gebruiken?
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.content_container_page2
{
float: left;
width: 140px; <- deze hier weg en dan inline of inpage gebruiken?
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
ENZ. ENZ ....
Nu gebruik ik deze heel vaak in een pagina waar alleen de width veranderd en de rest gelijk blijft.
Ik heb nu alles in een externe css staan, maar vroeg me af is het niet beter om 1 style te gebruiken en op de betreffende pagina de width op te geven. Zo ja hoe deze dan te gebruiken, inline of inpage?
Sietsko
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
BEGIN CSS
.content_container {
float: left;
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
#PAGE1 { width: 273px; }
#PAGE2 { width: 140px; }
EINDE CSS
In je HTML
<div class="content_container" id="PAGE1">
blablabla
</div>
.content_container {
float: left;
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
#PAGE1 { width: 273px; }
#PAGE2 { width: 140px; }
EINDE CSS
In je HTML
<div class="content_container" id="PAGE1">
blablabla
</div>
Weer wat geleerd, dank je voor je duidelijke uitleg :-)
Succes ermee.
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.content-container {
float: left;
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.content-width { width: 273px; }
.content-small { width: 140px; }
float: left;
padding: 10px;
margin-top: 15px;
margin-left: 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.content-width { width: 273px; }
.content-small { width: 140px; }
HTML:
Code (php)
1
2
3
2
3
<div class="content-container content-small">
blablabla
</div>
blablabla
</div>
een belangrijk weetje hierbij is:
-in de HTML mogen meerdere elementen voorkomen met dezelfde classes.
-in de HTML mag een id slechts één keer voorkomen!
goed:
Code (php)
1
2
3
2
3
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
fout:
Code (php)
1
2
3
2
3
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
>> Of gewoon meerder classes toekennen
Dat kan, maar zover ik begrijp gaat het om verschillende pagina's (containers) met allen telkens een afwijkende breedte. Een ID is dan gepaster en duidelijker.
>>Nu gebruik ik deze heel vaak in een pagina
Daarnaast denk ik dat "gepaster en duidelijker" slechts jouw persoonlijke voorkeur is. Ik denk niet dat je kunt motiveren waarom het gepaster is.
Veel belangrijker is dat wij allemaal weten dat je geen dubbele id's mag hebben binnen één pagina toch?
Wel goed om te weten dat je wel twee een class kan gebruiken en geen id.
Op deze manier kan ik mijn css stukken inkorten en verbeteren :-)
Beide heren dank voor de uitleg.
Gewijzigd op 21/11/2016 07:30:38 door Sietsko Bos