Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [wolontariat][CSS, Wordpress] Nachodzące na siebie divy?
Forum PHP.pl > Inne > Giełda ofert > Poszukuję
unster
Witam,
od dłuższego czasu męczę się sam z pewnym problemem w motywie na cms Wordpress.

W mojej wizji wpis wyświetlany na pojedynczej stronie składa się z jednego diva, w nim znajduje się osobny div z miniaturką, iframe z "wykopem" a całą resztę zalewa tekst. Pod tym wyżej opisanym divem, znajduje się kolejny, z różnymi bajerami...

reasumując, efekt jaki chcę uzyskać na KAŻDYM wpisie powinien wyglądać tak:


W rzeczywistości jednak, zależnie od długości posta mam różne problemy, takie jak:


Jak widać poniżej, problemy "same się rozwiązują" po uzyskaniu pewnej długości/wysokości posta:


Proszę o pomoc w naprawieniu ułożeniu tych divów!

Oto kod strony:
  1. <!-- TU SIE ZACZYNA POST -->
  2. <div>
  3.  
  4. <!-- miniaturki -->
  5. <?php if ( get_post_meta($post->ID,'obrazek', true) ) { ?>
  6. <a href="<?php the_permalink() ?>">
  7. <img class="size-thumbnail wp-image-40 alignleft" style="border: 2px solid #e6e6e6; margin: 5px;" width="120" height="120" src="<?php bloginfo('template_url'); ?>/miniatury/phpThumb.php?src=<?php echo get_post_meta ($post->ID, "obrazek", $single = true); ?>&amp;w=120&amp;h=120&amp;zc=B"></a>
  8. <?php } ?>
  9.  
  10. <!-- wykopek -->
  11. <iframe class="alignright"
  12. src="http://www.wykop.pl/widget.php?url=<?php the_permalink() ?>&title=<?php the_title(); ?>&type=normal&bold=true"
  13. style="border: 0px;width: 80px;height: 70px;margin: 5px;" frameborder="0" border="0">
  14. </iframe>
  15.  
  16. <!-- tresc i strony -->
  17. <?php the_content('<p class="serif">Czytaj dalej &raquo;</p>'); ?>
  18. <?php wp_link_pages(array('before' => '<p><strong>Strony:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
  19.  
  20. <!-- TU SIE KONCZY >> TRESC << POST'a -->
  21.  
  22. <!-- ramka z data i kategoria - to ta rozowa pod -->
  23. <div class="postmetadata alt">
  24. <small>
  25. Wysłano: <?php the_time('l'); ?>, <?php echo pl_date('j F, Y'); ?>, o godzinie <?php the_time() ?>. Kategoria: <?php the_category(', ') ?>.
  26. </small>
  27. </div>
  28. <!-- ramka z data i kategoria - to ta rozowa pod -->
  29. </div>
  30.  
  31. <p class="categories">
  32. <?php edit_post_link('<b>Edytuj</b>', ' ', ' | '); ?>
  33. <u>Kategoria:</u> <?php the_category(', ') ?>;
  34. <?php the_tags('<u>Tagi:</u> ', ', ', ''); ?>
  35. </p>
  36. <!-- TU SIE KONCZY POST - calosc -->



jeszcze trochę css'ow:
Kod
.post {padding:5px 5px 10px 5px; width:550px; margin-bottom:10px; text-align:justify;}
.post p { padding-top:10px; line-height:140%;}
html>body .post ul { padding: 0 0 0 30px; padding-left: 10px; }
html>body .post li { margin: 7px 0 8px 10px; }
.post ul li:before { content: "\00BB \0020"; }
.post ol { padding:0; margin:0;}
.post ol li { background:#fafafa; }
.post img {margin:0 10px 10px 10px;}
.head h2 { font:normal 11px Arial; color: #999999; margin-bottom:10px; padding-left:10px; background:url(images/dot.gif) repeat-x bottom; padding-bottom:5px; }
.post h2 { display:block; background: #E6E6E6 url(images/arrow.gif) left no-repeat;padding:5px 5px 5px 25px; font:bold 14px Arial; color:#000; border-bottom:1px solid #999999;border-right:1px solid #999999;}
.post h2 a {color: #333;}
.post h2 a:hover {color: #666666;}


Kod
div.postmetadata { margin-top:10px; padding:5px; background: #F3F2ED; border:1px solid #CCCCCC; width:530px; line-height:22px; }
div.postmetadata a { border-bottom:1px dotted #666666; font-style:italic;}
div.postmetadata a:hover {background-color:#000000; color:#FFFFFF;}


z góry dziękuję za pomoc!

BlackHat.
bliitz
Spróbuj tak:
Kod
div.postmetadata { margin-top:10px; padding:5px; background: #F3F2ED; border:1px solid #CCCCCC; width:530px; line-height:22px; clear: both; }
unster
dzieki smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.