Hoe kan ik op vele pagina's plaatjes mbv CSS plaatsen ?

[Gijs1]

Hallo
Ik heb een website van een 20 tal pagina's waar ik op iedere pagina onderaan een aantal dezelfde thumbnail fotootjes met onderschrift plaats die op dezelfde positie moeten komen.
Hoe kan ik dat aankleden zonder bij wijzigingen alle pagina's te moeten wijzigen ?

Het ziet er bij de huidige website als volgt uit op iedere pagina:

HTML:

<div id="fotolijst1">
<img src="../fotohome/foto1.jpg">
</div>

<div id="onderschrift1">
<p class="onderschrift">
<a href="../2002/2002.html">2002<br>
Tekst1</a></p>
</div>
       
<div id="fotolijst2">
<img src="../fotohome/foto2.jpg">
</div>

<div id="onderschrift2">
<p class="onderschrift">
<a href="../2003/2003.html">2003<br>
Tekst3</a></p>
</div>

<div id="fotolijst3">
<img src="../fotohome/foto3.jpg">
</div>

<div id="onderschrift3">
<p class="onderschrift">
<a href="../2005/2005.html">
2005<br>
Tekst3</a></p>
</div>

<!-- enz enz. -->

In CSS zijn de div-jes als volgt gedefinieerd

Cascading Stylesheet:

          #fotolijst1  { position:absolute;width:95px; height:63px; top:630px; left:30px;  
                    text-align:left; 
                    border:2px solid #666; 
                    }
      #onderschrift1{ position:absolute;width:95px; top:705px; left:30px;  
                    text-align:center; 
                    }           
      #fotolijst2  { position:absolute;width:95px;height:63px; top:630px; left:150px;  
                    text-align:left;
                    border:2px solid #666;
                    }
      #onderschrift2{ position:absolute;width:95px; top:705px; height:30 px; left:150px;  
                    text-align:center;  
                    }
           #fotolijst3  { position:absolute;width:95px; height:63px; top:630px; left:270px;  
                    text-align:left; 
                    border:2px solid #666; 
                    }
        #onderschrift3{ position:absolute;width:95px; top:705px; left:270px;  
                    text-align:center; 

Eigenlijk wil ik alles in CSS hebben dus ook de positie van de fotootjes en de links
Hoe pak ik dat aan ?
groet
Gijs

Code kan tussen [code=html] en [code=css] tags worden geplaatst

[ Voor 3% gewijzigd door BtM909 op 03-05-2013 16:40 ]

[incaz]

background-image: url(../fotohome/foto1.jpg);

[Gijs1]

Deze begrijp ik niet. Ik heb een tiental fotootjes met onderschrift en link. Die kan ik toch niet als achtergrond instellen

[TERW_DAN]

CSS is voor opmaak, niet voor content.

De optie van incaz werkt prima als je op iedere pagina die plaatjes wilt laten zien, maar als je linkjes wilt gaan gebruiken, dan kun je dat niet vanuit je CSS doen.

[_Thanatos_]

Ik denk dat je nu voor de eerste keer tegen "oh had ik maar een CMS gebruikt" aanloopt

Gezien de kwaliteit van de code (no offense, ieder z'n level) zou ik aanraden: search&replace. De meeste editors kunnen S&R in meerdere files tegelijk doen.

[krvabo]

Of een iframe

* krvabo runs

[RM-rf]

Eigenlijk wil ik alles in CSS hebben dus ook de positie van de fotootjes en de links
Hoe pak ik dat aan ?

gebruik technieken waarvoor ze bedoeld zijn... dus HTML is een container voor inhoud; dus de foto's, onderschriftteksten en links..

bv

HTML:

<div class="Item">
   <a href="link.html" class="link"><img src="plaatje.jpg" class="plaatje"></a>
   <p class="onderschrift"> Tekst voor het onderschift</p>
</div>

(ik heb hier als voorbeeld ook alle elementen in de items een class gegeven, dat is in theorie niet nodig om ze via css aan te spreken, p.onderschrift is hier praktisch gelijk aan div.Item p )

de vormgeving hoort in CSS en daarbij is het vaak slim om bepaalde standaard classes te gebruiken met styles die alle content van dat type heeft.. dat voorkomt dat je iedere div dmv een ID gaat identificeren en iedere keerw eer alle zaken opniuw in de css definieert.

Cascading Stylesheet:

div.Item {
   position: relative;
   margin: 10px auto 15px auto;
   font-family: Comic-sans, fantasy;
   border:2px solid #666; 
}
p.onderschrift {
   color: red;
}

overigens, ikzelf zou je afraden teveel te wrken met absolute positionering.. dat kan snel problemen geven op verschillende beeldschermen en zeker verschillende clients (mobiele apparaten bv)..
probeer zo veel mogelijk juist relatief te positioneren en met de 'flow' te wrken waarbij meerdere elementen automatisch onder elkaar komen doordat ze elkaar 'wegdrukken' in een bepaald content-element


door zulk een opzet is het ook erg overzichtelijk en geen groot probleem om in een stuk HTML code, eventjes een specifiek stuk code toe te voegen...
ook bv in twintig pagina's wat veranderen, is snel te doen...

als je dat toch teveel onderhoud vind aangezien het steeds ingewikkeldere data-structuren gaan worden en bv items gekoppeld gaan worden via vategroieen en groepen, zou je bv de HTML kunnen laten genere door een serverside scriptingtaal, welke bv data uit een database haalt

[sypie]

Werk met een footer bestand.

Wat ik gedaan heb met mijn eigen portfolio, wat allemaal HTML bestanden waren:
* Alle bestanden naar PHP hernoemd (ik wist niet of ik een ander bestand kon includen in HTML)
* Op alle pagina's de footer.php laten laden
* Een footer.php gemaakt waar al het nodige in staat

Op deze manier hoef ik voor een wijziging in de footer alleen maar footer.php aan te passen, de rest gaat automatisch mee.
(zou je graag voorbeeldcode geven maar zie net dat ik een poos geleden mijn footer helemaal heb weggelaten)

[ Voor 11% gewijzigd door sypie op 30-04-2013 09:42 ]

[incaz]

Sypie: je kunt in je server aangeven om html-bestanden als php te parsen. Via de config of via .htaccess: http://www.electrictoolbox.com/apache-parse-html-as-php/
Ik neem niet aan dat het standaard aan staat.

[Gijs1]

@RM-rf Hartelijk dank voor je uitgebreide antwoord. Ik zal het ter harte nemen. Ik zal eens googelen naar het relative plaatsen van div's Ik wil nl wel dat de thumbnails op een bepaalde positie onder bovenstaande tekst op de pagina's komt te staan.

@sypie Ik kan het denk ik niet naar php bestanden parsen daar ik voor deze specifieke website gebruik maak van een homepage van mijn provider. Die staat denk ik geen php bestanden toe

[Gijs1]

@RM-rf
Op de door jou voorgestelde wijze komt de tekst niet recht onder het plaatje maar wordt gecentreerd op de pagina. Waar zit het foutje, moet ik onderschrift ook relative positioneren ?

[Barryvdh]

Als je geen php kan draaien, kan je in principe natuurlijk ook javascript gebruiken, om dynamisch een stuk in te laden met ajax. Maar php gebruiken zou ik inderdaad prefereren.