CSS external - Inline - inpage

Door Sietsko Bos op 20-11-2016 20:21

2.078 views

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

Ozzie PHP

20-11-2016 21:22

Bijvoorbeeld:



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

20-11-2016 21:24

Aha ik wist niet dat het ook zo kon.
Weer wat geleerd, dank je voor je duidelijke uitleg :-)

Ozzie PHP

20-11-2016 21:29

Graag gedaan ;-)
Succes ermee.

Frank Nietbelangrijk

20-11-2016 23:21

Of gewoon meerder classes toekennen:

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;
}
.content-width { width: 273px; }
.content-small { width: 140px; }

HTML:


<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:


<p class="warning">blablabla</p>
<p class="warning">blablabla</p>
<p class="warning">blablabla</p>

fout:


<p id="warning">blablabla</p>
<p id="warning">blablabla</p>
<p id="warning">blablabla</p>

Ozzie PHP

21-11-2016 00:48

@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

21-11-2016 02:02

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

21-11-2016 02:51

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

21-11-2016 07:30 gewijzigd op 21-11-2016 07:30

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.

Reageren

Inloggen om te reageren