Hallo mensen, ik heb een probleempje met mijn div's, en ik kom er maar niet uit hoe ik het op moet lossen. De oplossing is vast simpel, maar ik heb al van alles geprobeerd, en niets werkt.
Het probleem is als volgt, ik heb deze situatie:

De witte blokjes zijn divs die gegenereerd worden per wordpress post (noem ze in het verdere verhaal 'postblokjes', en stretchen horizontaal naar de inhoud (de titel van de post). nu wil ik rechts van deze blokjes een div die zich helemaal naar rechts vult over de rest van het scherm, zodat ik de background van die div op wit kan zetten, en er een langgerekte balk ontstaat. De margin-right van de postblokjes animeer ik met jquery. Zo zal het eerst een volledig gevulde witte balk zijn (margin-right:0), wanneer er op wordt geklikt animeer ik de margin-right naar een aantal pixels, zodat er blokjes zichtbaar worden. De te bouwen div moet zich hier dus ook automatisch bij aanpassen qua width.
Daar komt nog bij dat het aantal posts en de breedte van deze posts variabel is, en de schermresoluties natuurlijk ook. Iemand enig idee hoe ik dit zou kunnen oplossen?
relevante code:
edit: kleine toevoeging
Het probleem is als volgt, ik heb deze situatie:

De witte blokjes zijn divs die gegenereerd worden per wordpress post (noem ze in het verdere verhaal 'postblokjes', en stretchen horizontaal naar de inhoud (de titel van de post). nu wil ik rechts van deze blokjes een div die zich helemaal naar rechts vult over de rest van het scherm, zodat ik de background van die div op wit kan zetten, en er een langgerekte balk ontstaat. De margin-right van de postblokjes animeer ik met jquery. Zo zal het eerst een volledig gevulde witte balk zijn (margin-right:0), wanneer er op wordt geklikt animeer ik de margin-right naar een aantal pixels, zodat er blokjes zichtbaar worden. De te bouwen div moet zich hier dus ook automatisch bij aanpassen qua width.
Daar komt nog bij dat het aantal posts en de breedte van deze posts variabel is, en de schermresoluties natuurlijk ook. Iemand enig idee hoe ik dit zou kunnen oplossen?
relevante code:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script type="text/javascript"> $(document).ready(function() { $(".mainmenu-overlay").click(function() { $(this).fadeOut('slow', function() { $("#automotive > .menu-item").animate({ marginRight: '20' }, 500, function() { $("#automotive > .menu-item").animate({ height: '250' }, 500, function() { //animation complete }); }); }); }); }); </script> |
HTML:
1
2
3
4
5
6
7
8
9
10
11
| <div id="automotive" class="mainmenu-item"> <a href="#"><div class="mainmenu-overlay">automotive design</div></a> <?php query_posts( 'cat=3' ); if (have_posts()) : while (have_posts()) : the_post();?> <div class="menu-item"> <?php the_title();?> </div> <?php endwhile; endif;?> </div> <!-- automotive --> |
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .mainmenu-item { height:auto; width:100%; margin:40px 0px; overflow:hidden; } .mainmenu-overlay{ height:80px; position:absolute; width:100%; z-index:10; background-color:white; } .menu-item{ height:80px; background-color:white; position:relative; display:block; float:left; z-index:1; } |
edit: kleine toevoeging
[ Voor 3% gewijzigd door paidur op 14-01-2012 13:58 ]