CSS external - Inline - inpage

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

20/11/2016 20:21:55
Quote Anchor link
Hoi,
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
 
PHP hulp

PHP hulp

08/12/2021 17:16:22
 
Ozzie PHP

Ozzie PHP

20/11/2016 21:22:10
Quote Anchor link
Bijvoorbeeld:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Sietsko Bos

Sietsko Bos

20/11/2016 21:24:27
Quote Anchor link
Aha ik wist niet dat het ook zo kon.
Weer wat geleerd, dank je voor je duidelijke uitleg :-)
 
Ozzie PHP

Ozzie PHP

20/11/2016 21:29:25
Quote Anchor link
Graag gedaan ;-)
Succes ermee.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

20/11/2016 23:21:53
Quote Anchor link
Of gewoon meerder classes toekennen:

CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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; }


HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div class="content-container content-small">
    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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>


fout:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
 
Ozzie PHP

Ozzie PHP

21/11/2016 00:48:58
Quote Anchor link
@Frank

>> 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.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/11/2016 02:02:41
Quote Anchor link
Ozzie Ik kopieer het openingsbericht:

>>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?
 
Ozzie PHP

Ozzie PHP

21/11/2016 02:51:31
Quote Anchor link
Ik had het geïnterpreteerd als "voor iedere afzonderlijke pagina gebruik ik een andere container met een andere width". In dat geval lijkt me een ID gepaster omdat een pagina uniek is en maar 1x voorkomt. Vandaar het gebruik van een ID. Als je meerdere containers op dezelfde pagina gebruikt, dan zijn classes de betere optie en is jouw verhaal aan de orde. Anyhow ... ik denk dat ie er met ons beiden hulp en inzichten wel uitkomt ;)
 
Sietsko Bos

Sietsko Bos

21/11/2016 07:30:05
Quote Anchor link
Zoals Ozzie al zegt komt het maar 1 keer voor op een pagina dus met de id lukt het wel.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.