Float gebruiken om 2 lagen over elkaar heen te leggen

Moderator: pe7er

Forum rules
Forum Regels
Locked
GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Sun Aug 26, 2007 8:30 pm

Ik heb een menu met een transparante achtergrond gemaakt (http://www.kaatje-maatje.nl/test01). Dit heb ik gedaan door een div te maken waarin het hoofdmenu in staat en een div waarin de transparante achtergrond in staat. Met z-index geef ik de volgorde van lagen aan en (nu komt het) verplaats ik de 2e div met een position:relative en een negatieve waarde voor top (top:-380px). Dit was de enige oplossing die ik werkend kreeg in zowel IE6, IE7 en FF2. Maar dit geeft toch wat vervelende bij-effecten.
Nu wilde ik nog een ultieme poging doen om met float de lagen over elkaar heen te leggen. In FF werkt dat dus als een trein, maar zowel IE6 als IE7 trappen hier niet in. Kan iemand zien wat ik verkeerd doe? Of heeft iemand nog een andere oplossing?

Hieronder de css-code van de twee div's.

Code: Select all

/* menu, laag 2, menuteksten */
.menu-div
{ border: 0px solid blue;
  float: left; 
  height:380px;
}

/* menu, laag 1: transparante achtergrond */
.menu-background
{ height:380px; 
  background-image:url(../images/transparant.png);
}

.

User avatar
sc00zy
Joomla! Exemplar
Joomla! Exemplar
Posts: 9529
Joined: Thu Aug 18, 2005 9:07 am
Location: Assen, Netherlands
Contact:

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by sc00zy » Sun Aug 26, 2007 8:41 pm

Moet je geen gebruik maken van z-index?
Arjan Menger
http://www.welldotcom.nl - Professionele Joomla! Design, Ontwikkeling en Hosting
http://www.joomlaideal.nl - iDEAL betaalmethode voor Joomla! en Virtuemart

GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Sun Aug 26, 2007 8:47 pm

Dat heb ik ook in het origineel (dus met de top:-380px) staan, en dat werkt daar wel. Maar met float heeft de z-index geen invloed, tenminste daar lijkt het op.

GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Sun Aug 26, 2007 8:48 pm

Bovendien zie ik (door border om de div's te plaatsen) dat de 2e div er niet achter geplaatst wordt, maar er naast (in IE6 en 7).

User avatar
renem
Joomla! Hero
Joomla! Hero
Posts: 2465
Joined: Tue Aug 23, 2005 11:04 am

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by renem » Mon Aug 27, 2007 8:28 am

Ik snap je probleem maar je CSS is een zootje waardoor er rare dingen gebeuren:

Code: Select all

  position:relative;
  top: -380px;  /* over transparant weer heen plaatsen */
  left: 20px;
top en left horen bij position:absolute bijvoorbeeld.

een directe oplossing niet maar kijk eens bij de commerciële voorbeelden icm met firefox webdeveloper daarkanje dus live css mee bekijken.

Veel succes.
"Het mooie aan standaards is dat er zoveel zijn om tussen te kiezen.." 
Layoutproblemen Zie>> http://forum.joomla.org/index.php/topic,17708.0.html

GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Mon Aug 27, 2007 10:16 am

renem wrote: Ik snap je probleem maar je CSS is een zootje waardoor er rare dingen gebeuren:

Code: Select all

  position:relative;
  top: -380px;  /* over transparant weer heen plaatsen */
  left: 20px;
top en left horen bij position:absolute bijvoorbeeld.

een directe oplossing niet maar kijk eens bij de commerciële voorbeelden icm met firefox webdeveloper daarkanje dus live css mee bekijken.

Veel succes.
Ik weet dat ik nog sporen van uitprobeersels moet opruimen, maar om nou te zeggen dat het een zootje is...Wat je hierboven aangeeft, top en left moet volgens documentatie wel kunnen in combinatie met position:relative. Maar misschien heb je wel gelijk dat ik beter absolute kan proberen om alles een vaste plek te geven. Ik zal ´s kijken.
Bedankt in ieder geval.

Reind
Joomla! Explorer
Joomla! Explorer
Posts: 382
Joined: Sat Aug 27, 2005 1:14 am
Contact:

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by Reind » Thu Aug 30, 2007 3:08 pm

Positioneer je achtergrond div relatief en daar binnen je bovenliggende div absoluut en je bent klaar. Cross browser proof en werkt prima, zo heb ik het ook gedaan op aboutdj.nl en die werkt in alle bekende browsers.

User avatar
salty
Joomla! Ace
Joomla! Ace
Posts: 1533
Joined: Thu Sep 21, 2006 3:35 pm
Location: Amsterdam

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by salty » Sat Sep 29, 2007 5:37 pm

Ik snap niet helemaal waarom je een aparte div maakt voor de achtergrond, deze kun je toch net zo goed in je menu div plaatsen?
.menu-div
{ border: 0px solid blue;
  float: left;
  height:380px;
  background-image:url(../images/transparant.png);
}

als het tenminste de bedoeling is dat ie achter het menu verschijnt.
Klikstudio New media workshops
http://www.klikstudio.net

GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Sun Sep 30, 2007 6:34 pm

Dat werkt dus niet, omdat de achtergrond áchter de tekst moet komen te vallen. Dat lukt met een z-index met twee div's, maar niet als je dit in 1 div probeert te regelen. Tenminste niet voor IE6, IE7 én FF.

User avatar
salty
Joomla! Ace
Joomla! Ace
Posts: 1533
Joined: Thu Sep 21, 2006 3:35 pm
Location: Amsterdam

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by salty » Sun Sep 30, 2007 6:37 pm

Natuurlijk werkt dat wel maar de code moet zijn
background: url(path/na/de achtergrond);
Klikstudio New media workshops
http://www.klikstudio.net

User avatar
theLoneDeranger
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Thu Nov 23, 2006 11:37 am

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by theLoneDeranger » Mon Nov 17, 2008 4:01 pm

Een wat verlaat antwoord, maar even terug naar het begin..

Floats en z-index lijken inderdaad niet (goed) samen te gaan

Waarom twee divs met z-index ipv geneste divs danwel css voor een achtergrondplaatje?

Bijvoorbeeld als je de ene div een opacity mee wil geven: zo maak je het achtergrond plaatje lichter/donkerder door de css aan te passen ipv het arbeidsintensieve phhotshoppen. Je kunt dit ook combineren met een achtergrondkleur om het geheel een (kleur) gloed mee te geven.

Geneste divs met opacity werken niet want dan wordt immers ook de binnenste div (menu) (semi-) transparant

Zelf krijg ik de combi z-index, position absolute en (veel) floats tot op heden ook niet werkend. Enkel in semantische opbouw maar das nou net het hele punt van z-index... maar ik blijf proberen
In Chinese the word 'crisis' consists of two characters. One means 'danger,' the other 'opportunity.'

User avatar
theLoneDeranger
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Thu Nov 23, 2006 11:37 am

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by theLoneDeranger » Mon Nov 17, 2008 5:19 pm

Voor de goede orde... Dit werkt bij mij

Deze (dynamisch gegenereerde) css

Code: Select all

 
 @import url("templates/mantorville/css/generic.css");
 @import url("templates/mantorville/theme/mantorville/css/theme.css");
 body {text-align:center; margin:0px; padding:0px;}
 html {height:auto; height:101%;}
 body {min-height:101%; height:101%;}
 .clearboth {clear:both;width:0px;height:0px;overflow:hidden;}
 #wrap-borders {z-index:1;}
 #wrap-maincontent {z-index:5;}
 #wrap-topcorners {z-index:10;}
 #wrap-maincontent {position:absolute;top:10px;left:0px;width:100%;text-align:center;border:none;padding:0px;}
 #body-maincontent {width:630px;margin:0px auto 10px auto;text-align:left;border:none;padding:0px}
 #wrap-borders {position:absolute;top:10px;left:0px;min-width:650px;width:100%;height:auto;text-align:center;}
 #border-11 {width:50px;height:50px;float:left;background:transparent url('templates/mantorville/theme/mantorville/images/border-11-chamfer.png') top left no-repeat;}
 #border-12 {width:650px;height:auto;margin:0px auto;background:aqua url('templates/mantorville/theme/mantorville/images/border-12.png') top left repeat-x;}
 #border-13 {width:50px;height:50px;float:right;background:transparent url('templates/mantorville/theme/mantorville/images/border-13-chamfer.png') top right no-repeat;}
 #border-21 {width:650px;height:auto;margin:0px auto;background:transparent url('templates/mantorville/theme/mantorville/images/border-21.png') top left repeat-y;}
 #border-23 {width:650px;height:auto;margin:0px auto;background:transparent url('templates/mantorville/theme/mantorville/images/border-23.png') top right repeat-y;}
 #wrap-topcorners {min-width:650px;width:100%;height:10px;position:absolute;top:0px;left:0px;text-align:center;}
 #page-topcorners {width:650px;margin:0px auto;}
 #border-32 {width:650px;height:10px;margin:0px auto;margin-top:-10px;margin-bottom:-10px;background:transparent url('templates/mantorville/theme/mantorville/images/border-32.png') bottom left repeat-x;}
 #border-31 {width:50px;height:50px;float:left;position:relative;top:-40px;margin-bottom:-50px;background:transparent url('templates/mantorville/theme/mantorville/images/border-31-chamfer.png') top left no-repeat;}
 #border-33 {width:50px;height:50px;float:right;position:relative;top:-40px;margin-bottom:-50px;background:transparent url('templates/mantorville/theme/mantorville/images/border-33-chamfer.png') top right no-repeat;}
Tesamen met deze body

Code: Select all

<body> 
 
 
<div id="wrap-maincontent"> 
 <div id="body-maincontent" style="overflow:hidden;padding-top:10px;"> 
   <div style="width:100%;height:0px;">&nbsp;</div> 
   <div style="overflow:hidden;"><div class="blog"><div class="blogleading"><div class="itemblock item_0">			<div class="contentitem"> 
		<div class="contentintro"><div><img src="images/stories/453686-140.png" alt="merkkleding"/></div></div>		</div> 
		</div></div></div></div> 
   <div style="width:100%;height:0px;background:red;">&nbsp;</div> 
 </div> 
   <div id="border-32"> 
   <div id="border-31">&nbsp;</div> 
   <div id="border-33">&nbsp;</div> 
  </div> 
 </div> 
 
<div id="wrap-borders"><div id="page-borders"><div id="border-12"><div id="border-21"><div id="border-23">&nbsp;</div></div></div><div></div> 
 
 
<div id="wrap-topcorners"><div id="page-topcorners"><div id="border-11">&nbsp;</div><div id="border-13">&nbsp;</div><div class="clearboth">&nbsp;</div></div></div> 
 
 
</body>

Geeft het resultaat zoals in de bijgevoegde printscreen

Voor de goede orde:

Ik gebruik JavaScript om de schaduwbox borders/achtergrond en de daadwerkelijke content (hier 1 content item met enkel de <img src=bladibla ... ) op dezelfde hoogte te krijgen...

de hoekjes even met een "hoekje' uit een ander schema slice and dice.. je kunt zo even goed zien wat waar zit en wat waar overheen gaat

Negeer even de @import s (die zijn praktisch leeg, enkel een lettertype en background (grijs.png 1x1 repeat)

de box is verdeeld in "negen" blokjes

11 12 13
21 -- 23
31 32 33

in de printscreen zie je 11 linksboven, 13 rechtsboven, 31 linksonder en 33 rechtsonder (allen roze variant)

html volgorde is
1. wrap-maincontent met daarbinnen de mosmainbody al dan niet vergezeld van module posities
tevens hierbinnen de onderkant van de box welke iets naar boven geplaatst met position:relative zodat hij bijv (deels) over een (footer) module zou vallen met twee floats, te weten links voor vakje 31 en rechts voor vakje
floatszindex.png
floatszindex.png
33
2. wrap-border met daarbinnen drie geneste divs, vakje 12, vakje 21 en vakje 23.. gebruik css om de binnenkant op aqua te zetten en de achtergrond plaatjes voor bovenkant en beide zijkanten van de box
3. wrap-topcorners met daarbinnen een linker-float voor hoekje 11 en een rechterfloat over hoekje 13

z-index is zoals het hoort
wrap-topcorners valt immers zoals bedoeld over de content heen...

1. box met bovenkant en zijkanten box, inclusief in dit geval aqua background
2. content (mosmainbody enzo)
(binnen 2: onderkant box, relatief naar boven gepositioneerd. zie de onderste roze hoekjes over de aqua heen)
3. bovenkant box: de hoekjes (roze valt weer inderdaad over aqua)

Over wrap-topcorner kun je uiteraard weer een andere div leggen, bijvoorbeeld link naar de homepage (display block zo breed/hoog)

Juiste z-index en happetekee, je hebt dit (pseudo)

<body>
<wrap><inner><a href="home"><h1>sitename</h1></a></inner></wrap>
<wrap><inner> mosmainbody() </inner></wrap>

dan pas
meer <wrap>jes voor de modules
meer <wrapjes> voor de achtergronden

en dan pas </body>

Gebruik evt spacers voor mosmainbody of css om mosmainbody naar beneden te duwen (daar kunnen namelijk mooi die modules met een hogere z-index

Zo hehe, ben zo blij dat ik mijn vergelijkbaar probleem heb kunnen oplossen... hoop dat je wat aan dit voorbeeld hebt, mocht het nog van toepassing zijn
You do not have the required permissions to view the files attached to this post.
In Chinese the word 'crisis' consists of two characters. One means 'danger,' the other 'opportunity.'

GJ-s4u
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Wed Nov 22, 2006 8:56 pm

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by GJ-s4u » Mon Nov 17, 2008 9:01 pm

Hoi Dylan1968,
pfoej...da's effe geleden dat ik hiermee bezig was (in de tijd dat ik nog structuur in tabellen zette...). Wat ik er nog van weet is dat de moeilijkheid was dat er een blokjes-achtergrond gebruikt wordt en dat het content-deel deze blokjes half transparant moest weergeven en steeds gecentreerd. Probleem was dat als de gebruiker het scherm kleiner maakte de transparante overlay mee moest schuiven.
Heel lastig om uit te leggen, kijk anders even op www.kaatje-maatje.nl. Dan weet je misschien wat ik bedoel. Het lastige was ook om het zowel in ie6, ie7 en FF goed te krijgen (wat niet 100% gelukt is overigens). Uiteindelijk heb ik een component gebruikt, Ultimate png fix, waarmee het dan toch nog redelijk voor elkaar is gekomen.

User avatar
theLoneDeranger
Joomla! Explorer
Joomla! Explorer
Posts: 462
Joined: Thu Nov 23, 2006 11:37 am

Re: Float gebruiken om 2 lagen over elkaar heen te leggen

Post by theLoneDeranger » Mon Nov 17, 2008 10:03 pm

GJ-s4u wrote:Probleem was dat als de gebruiker het scherm kleiner maakte de transparante overlay mee moest schuiven.
Ja das lastig. Op de breedte is niet zo lastig, zowel in percenten als in pixels. Op de hoogte is wel lastig omdat bij twee afzonderlijke divs de een niet meegroeit met de ander.

Trouwens: in de bovenste laag heb je meestal toch iets (module, mosmainbody) dat meegroeit

Leuk ontwerp wel, kaatje maatje
In Chinese the word 'crisis' consists of two characters. One means 'danger,' the other 'opportunity.'


Locked

Return to “Templates 1.0.x”