Skip to main content

Laatste nieuws

Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 2.5 die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

twee afbeeldingen over elkaar plaatsen in header

twee afbeeldingen over elkaar plaatsen in header

29 dec 2012 21:40
#1
Ik heb een site vernieuwd. Daarbij geupgrade naar Joomla 2.5.8, www.webcatch.nl
Het begint er al aardig uit te zien, maar de header wil niet zoals ik dat wil!?
Vanuit de vorige site heb ik een animated-GIF. Die wil ik op een nieuwe achtergrond plakken, maar het wil maar niet lukken. Nu dacht ik dat ik de achtergrond eerst zou kunnen plaatsen met daaroverheen de animated_GIF. Moet ik dan werken met een z-index?
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

30 dec 2012 14:19
#2
De witte achtergrond zit in de animated.gif
Je kunt met een goed bewerkingsprogramma alle afbeeldingen van je animated.gif openen en de achtergrond transparent maken.
Daarna weer weer afbeelding op afbeelding plaatsen en opnieuw opslaan als animated.gif

Let wel: de grootte is 1,6 Mb en dat vertraagt de opbouw van de pagina enorm. Wil je dat werkelijk?
groetjes,
Anne
www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897Wil je Joomla!NL steunen? Dat kan met een donatie.
  • AnneM
  • AnneM's berichtenfoto
  • Joomla!NL vriend(in)
  • Joomla!NL vriend(in)
  • Berichten: 1863

twee afbeeldingen over elkaar plaatsen in header

30 dec 2012 14:31
#3
Ik weet dat de achtergrond in de gif zit, maar dat bedoel ik niet. Die kan ik wel wegkrijgen. Ik heb met een goed bewerkingsprogramma dit allemaal al geprobeerd, maar mijn animatie raak ik kwijt. Wat ik nu wil, is om de twee afbeeldingen afzonderlijk van elkaar op de site plaatsen, niet eerst in een programma samenvoegen, dat werkt op een of andere manier niet. Ik heb Photoshop geprobeerde en Fireworks ...
Ook de grootte weet ik, eerst moet ik het werkend hebben, dan ga ik comprimeren ...
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

30 dec 2012 19:20 - 30 dec 2012 19:23
#4
En als je nou de achtergrond van #wrapper veranderd in template.css regel 28:
Code:
#wrapper {width:958px; text-align:left; margin:0 auto; background: url(../images/body_bg_4.png) repeat-y 50% 0; clear:both;}
naar
Code:
#wrapper {width:958px; text-align:left; margin:0 auto; background-color: transparent; clear:both;}


EDIT:

Nee dat is de afbeelding voor de gehele pagina.
Sorry.

Kan je wel nog een div inbouwen voor de #header?
dan kan je daar wel separaat een transparante achtergrond (of een achtergrondkleur aan geven)
groetjes,
Anne
www.numijneigenwebsite.nl + www.nmew.nl - KvK Brabant: 17281897Wil je Joomla!NL steunen? Dat kan met een donatie.
  • AnneM
  • AnneM's berichtenfoto
  • Joomla!NL vriend(in)
  • Joomla!NL vriend(in)
  • Berichten: 1863

twee afbeeldingen over elkaar plaatsen in header

30 dec 2012 22:31
#5
Ik kan nog wel een div inbouwen, maar wil daar dan wel een afbeelding inzetten en niet transparant of zo ... ik mis nu een stukje templateafbeelding ... het is nu net niet af.
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

20 jan 2013 17:38
#6
Hebben de antwoorden je geholpen?
Zo ja kunnen we deze topic sluiten?
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725 		Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37437

twee afbeeldingen over elkaar plaatsen in header

20 jan 2013 21:15
#7
Nee, het probleem is nog niet opgelost ... hoe zet ik twee afbeeldingen in de kop?
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

21 jan 2013 12:57
#8
Je geeft zelf het antwoord al.

Met gebruik van de z-index kun je de ene afbeelding over de andere heen positioneren. De z-index voorkomt dat het ene element het andere wegdrukt.

Misschien zul je wel nog een positie moeten toekennen om ze ze gepositioneerd te krijgen als jij wenst.

Slechts een schets van hoe het kan.
Code:
#afbeelding1{ background-image:url('afbeelding1.gif'); z-index: 2; }
Code:
#afbeelding2 { background-image:url('afbeelding2.gif'); z-index: 1; }

De afbeelding met z-index op 2 komt boven de andere te liggen.

Save dit bestand anders maar eens om mee te experimenteren:
Code:
<STYLE TYPE="text/css"> <!-- #d1 { width: 120px; height: 150px; position: absolute; z-index: 2; top: 10px; left: 10px; background: yellow; } #d2 { width: 120px; height: 150px; position: absolute; z-index: 1; top: 30px; left: 30px; background: lime; } --> </STYLE>
Code:
<BODY ..> <DIV ID="d1">division 1</DIV> <DIV ID="d2">division 2</DIV> </BODY>
  • JUR2012
  • JUR2012's berichtenfoto
  • Bekend met Joomla!NL
  • Bekend met Joomla!NL
  • Berichten: 71

twee afbeeldingen over elkaar plaatsen in header

12 feb 2013 10:29
#9
Ik heb nu in template.css het volgende gezet:
Code:
#header {background: url(/../images/logobovenwebcatch_3.gif) no-repeat; width:500px; height:96px; overflow:hidden; margin:0px 0px 0px 229px; z-index:20;} #headerbackground {background:url(../images/headerwebcatch.gif)50% 0 no-repeat; width:958px; height:137px; overflow:hidden; float:left; z-index:10;}

En in index.php:
Code:
<div id="header"> <div id="logo"><jdoc:include type="modules" name="logo" /></div> <div id="header"></div> <div id="headerbackground"></div> </div>

Toch verschijnt "headerwebcatch.gif" nog steeds niet ... wat doe ik nog fout?
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

12 feb 2013 10:55
#10
Die gif zie je wel. Maar je hebt nu een div header in een div header staan. Verder begrijp ik nog steeds niet wat je nu wilt bereiken en is het erg lastig om je tips te geven bij een site die er een half uur over doet om te laden.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725 		Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37437

twee afbeeldingen over elkaar plaatsen in header

12 feb 2013 11:01
#11
Sorry, wist niet dat hij zo lang er over doet. Bij mij verschijnt de site redelijk snel.
Ik wil graag de twee afbeeldingen zichtbaar krijgen. Ik heb geprobeerd om ze samen te voegen, maar dan raak ik het bewegende deel kwijt en dat wil ik liever niet ...
Wat is trouwens de oorzaak van het traag laden? Moet ik iets verkleinen?
  • Bigmama
  • Bigmama's berichtenfoto Heeft onderwerp gestart
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 194

twee afbeeldingen over elkaar plaatsen in header

12 feb 2013 13:14
#12
Je logo afbeeldingen zijn allebei meer dan 1,5 MB. Als de site eenmaal geladen is, en de afbeeldingen in de browsercache staan, dat laadt hij wel snel, maar dat gaat dus niet werken bij nieuwe bezoekers.
Ik begrijp niet waarom je die animatie niet gewoon als aangepaste html op de positie logo zet. Op een of andere manier kan ik je logica niet volgen van twee headerafbeeldingen.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725 		Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37437
Moderators: Jelle, Romke
Tijd voor maken pagina: 0.785 seconden
Gemaakt door Kunena

Laatste forumberichten

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie