background-image ophalen vanaf andere locatie

Door ralph M op 10-10-2015 17:24 gewijzigd op 10-10-2015 17:38

1.096 views

De titel dit topic legt niet precies uitwat ik bedoel, ik zal het daarom wat verder uitleggen.
Ik heb 3 menu's met elk 3 submenu's. Elk submenu heeft zijn eigen afbeelding. Wat ik wil is dat elk submenu zijn afbeelding ophaald vanuit een andere locatie.
De theorie is is dat 'background-image' kijkt welke categorie wordt aangeroepen en dan de bijbehoorende afbeelding ophaalt.
Na veel trial/error ben ik niet verder gekomen. Ik hoop dat jullie mij de juiste richting op kunnen duwen.

Wat ik heb ziet er zo uit:

{if $aProductCategorySubCategories|@count > 0}
	<style type="text/css">
   
    .customlayout-subcategory-container { 
      width:100%;
      padding:10px;
      }
      
    
    .customlayout-subcategory-item { 
      float:left;
      display:block;
        
      background-image: url(<?php echo $ProductCategorySubCategory;?>); 
      
      padding:5px;
      margin-right:10px;
      margin-bottom:10px;
      border:1px solid #ccc;
      width: 260px;
      height: 185px;
      text-decoration:none;}
    
    .customlayout-subcategory-item:hover { 
      background:#f1c40f;
      }
	</style>
  
 <div class="customlayout-subcategory-container">
    {section loop=$aProductCategorySubCategories name=i}
      {$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
      
      <a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item">
        {$oProductCategorySubCategory->Name}
      </a>
    {/section}
  </div>
{/if}

De code resulteert in:

Willem vp

10-10-2015 17:58

Je code suggereert dat het <style>-element in je body staat. Dat is niet toegestaan. <style> is een metadata-element en hoort dus in de <head>-sectie.

ralph M

10-10-2015 18:05

Oh ja, inderdaad. Ik heb het inmiddels aangepast.

Eddy E

10-10-2015 18:05

Ondanks dat het niet is toegestaan, werkt het perfect.
Zelfs ná het element wat gestyled moet worden, kan je dit later toevoegen.

Om Raplh beter te helpen:
- maak voor elke categorie een class aan:

.background-for-category--voertuigen { background-image: url('img/voertuig.jpg');
.background-for-category--vaartuigen { background-image: url('img/vaartuig.jpg');
.background-for-category--vliegtuigen { background-image: url('img/vliegtuig.jpg');

En uiteraard voeg je gewoon deze class toe:
(= regel 33 van code hierboven)


     <a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
        {$oProductCategorySubCategory->Name}</a>

ralph M

12-10-2015 13:45

Ik heb de code aangepast maar zonder gewenst resultaat. De code die ik nu heb ziet er alsvolgt uit. Als de code zo klopt dan moet het probleem toch elders liggen..


<style type="text/css">

	.background-for-category--lijsta { background-image: url('images/pictogramlijst1.jpg')};
	.background-for-category--lijstb { background-image: url('images/pictogramlijst2.jpg')};
	.background-for-category--lijstc { background-image: url('images/pictogramlijst3.jpg')};

.customlayout-subcategory-container { 
	width:100%;
	padding:10px;
}

.customlayout-subcategory-item {
	float:left;
	display:block;
	padding:5px;
	margin-right:10px;
	margin-bottom:10px;
	border:1px solid #ccc;
	width: 260px;
	height: 185px;
}

</style>


<div class="customlayout-subcategory-container">
    {section loop=$aProductCategorySubCategories name=i}
        {$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
        
        <a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
        {$oProductCategorySubCategory->Name}</a>
    {/section}
</div>

Eddy E

12-10-2015 20:57

Welke HTML geef je php-code uiteindelijk?

ralph M

13-10-2015 11:28

Hoe bedoel je?

Eddy E

13-10-2015 21:43

Dit is geen HTML:

<div class="customlayout-subcategory-container">
    {section loop=$aProductCategorySubCategories name=i}
        {$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
        
        <a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
        {$oProductCategorySubCategory->Name}</a>
    {/section}
</div>

Dat is (denk ik) Smarty of een andere template-builder-ding.
Wat is de gegenereerde HTML, zoals bezoekers van je website hem gaan zien? Want daarop werkt CSS, niet op je Smarty-template...

Reageren

Inloggen om te reageren