Probleem met CSS

[Bromsnorz]

Hallo iedereen,

Ik probeerde vandaag om een popup scherm op mijn bestaande wordpress website te plaatsen. De popup heb ik gedownload via een andere site en heb ik geprobeerd om te integreren in wordpress. Nu is het integreren helemaal geslaagd alleen wordt de website niet meer goed weergegeven. Ik denk persoonlijk dat dit komt door het css wat twee keer gebruikt wordt op de pagina.

Nu is mijn vraag of je css ook enkel op de div kan toepassen zodat het niet in de war komt met de rest van de site.

Hierbij de source van de popup:

<div id="modal">
	<div id="heading">
		Nieuw bij HILD Fietsen!
	</div>

	<div id="content">
		<p>Romantisch 2-persoons fietsarrangement met een picknickmand gevuld met luxe producten. Huur twee transportfietsen met picknickmand.</p>

		<a href="http://hildfietsen.nl/fietsarrangement-met-picknickmand/" class="button green close"><img src="http://danteck.nl/gegevens/hildfietsen/images/tick.png">Meer informatie</a>

		<a href="#" class="button red close"><img src="http://danteck.nl/gegevens/hildfietsen/images/cross.png">Nee bedankt!</a>
	</div>
</div>



	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://danteck.nl/gegevens/hildfietsen/js/jquery.reveal.js"></script>
	<script type="text/javascript">
	
	   

			$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: true,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				
			
			});
			
	
		
			
			   	
		
	</script>

en natuurlijk de css: http://danteck.nl/gegevens/hildfietsen/css/styles.css

 

[csshunter]

Hoi Bromsnorz,
Ja, dat moet kunnen (zolang de id's van de popup maar niet identiek zijn aan id's elders op de pagina).
Maar zonder de rest van de pagina resp. de andere css is dat niet te zien.

• Heb je een testpagina + wens wat je anders wilt?

Met vriendelijke groet,
CSShunter
________
PS:
Op de huidige site is de eerste fiets in het gele cirkeltje een image van 3.072*2.304px en ruim 1.600kB. :shocked:
Deze meer dan schermvullende afbeelding wordt door de browser teruggeschaald naar ... ca. 150*150px.

• Er is dus maar een 150*150px img nodig; even verkleinen in een tekenprogramma leert dat de bestandsgrootte ca. 15kB wordt: deze.

De andere twee zijn van hetzelfde laken een pak; samen zijn ze maar liefst 4090kB, oftewel er moet meer dan 4MB gedownload worden voor het tonen van de 3 fietsen.

• Haal je de andere twee ook even door de verkleiner, dan is in totaal ca. 45kB nodig. Dat is zo'n 1,1% van oorspronkelijk en zal een ietsje snellere pagina geven.