Page 1 of 1

Float gebruiken om 2 lagen over elkaar heen te leggen

Posted: Sun Aug 26, 2007 8:30 pm
by GJ-s4u
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);
}

.

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

Posted: Sun Aug 26, 2007 8:41 pm
by sc00zy
Moet je geen gebruik maken van z-index?

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

Posted: Sun Aug 26, 2007 8:47 pm
by GJ-s4u
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.

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

Posted: Sun Aug 26, 2007 8:48 pm
by GJ-s4u
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).

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

Posted: Mon Aug 27, 2007 8:28 am
by renem
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.

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

Posted: Mon Aug 27, 2007 10:16 am
by GJ-s4u
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.

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

Posted: Thu Aug 30, 2007 3:08 pm
by Reind
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.

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

Posted: Sat Sep 29, 2007 5:37 pm
by salty
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.

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

Posted: Sun Sep 30, 2007 6:34 pm
by GJ-s4u
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.

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

Posted: Sun Sep 30, 2007 6:37 pm
by salty
Natuurlijk werkt dat wel maar de code moet zijn
background: url(path/na/de achtergrond);

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

Posted: Mon Nov 17, 2008 4:01 pm
by theLoneDeranger
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

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

Posted: Mon Nov 17, 2008 5:19 pm
by theLoneDeranger
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

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

Posted: Mon Nov 17, 2008 9:01 pm
by GJ-s4u
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.

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

Posted: Mon Nov 17, 2008 10:03 pm
by theLoneDeranger
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