WP vertikalne zarovnane 3 obrazky [vyriešené]

eMp · Napísal **eMp**: 28.03.2015 17:45

Mam problem s pozadim. Je to Wordpress. Chcem do sidebaru dat na pozadie 3 obrazky - horny, stredny a spodny. Problem je vtom, ze neviem dostat text/obsah/vypis sidebaru k hornej casti, tak aby sa opakoval stredny obrazok. Ked dam obsah do stredneho, tak sa vsetko zobrazuje, ale stale mam medzeru v podobe vysky horneho obrazku.

sidebar.php

Kód:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
      <div id="secondary" class="widget-area" role="complementary">
         <div id="sidebar-top"></div>         
         <div id="sidebar-center"><?php dynamic_sidebar( 'sidebar-1' ); ?></div>
         <div id="sidebar-bottom"></div>
      </div>
<?php endif; // end sidebar widget area ?><!-- #secondary .widget-area -->

style.css

Kód:

#sidebar-top { 
   background: url("images/bg-sidebar-top.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
   height: 190px;
   width: 288px;
}
#secondary { 
   background: url("images/bg-sidebar-center.jpg") repeat-y scroll left top rgba(0, 0, 0, 0);
   width: 288px;
}
#sidebar-bottom { 
   background: url("images/bg-sidebar-bottom.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
   height: 190px;
   width: 288px;
}

hatto13 · Napísal **hatto13**: 28.03.2015 17:59

neviem ci som presne pochopil to chces, bolo by dobre keby si dal nejaky printscreen alebo link...
ale myslim ze by sa dalo dosiahnut to co chces cez pseudoelementy :before :after, nepotrebujes mat dalsie dva divy ak je to iba kvoli obrazku a ani to nie je semanticky korektne. a das im position absolute a umiestnis kam len chces.

eMp · Napísal autor témy **eMp**: 28.03.2015 18:22

Nech sa paci. Proste tie obrazky maju vyplnat obsah sidebaru.
http://www.upnito.sk/0/rppjetcb6epjtpjjxs8wb223vws5wrj5.jpg

hatto13 · Napísal **hatto13**: 28.03.2015 20:40

ten center daj ako background image a tie dva aplikuj na :before a :after

nejak takto:

Kód:

#secondary {
  position: relative;
  background: url('obrazok.jpg') center top repeat;
  padding: 100px 0;
  ...
}
#secondary:before, #secondary:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
#secondary:before {
  top: 0;
  height: 100px;
  background: url('obrazok.jpg') center top repeat;
}
#secondary:after {
  bottom: 0;
  height: 100px;
  background: url('obrazok.jpg') center top repeat;
}

a tie dva divy #sidebar-top a #sidebar-bottom mozes vymazat. inak snaz sa nepouzivat id v css, lepsie je pouzivat class.

eMp · Napísal autor témy **eMp**: 28.03.2015 21:15

Iny kod. Schovalo to nadpis prveho bloku. Problem vpodstate rovnaky

hatto13 · Napísal **hatto13**: 28.03.2015 21:23

tak potom nedavaj ten padding co som pisal. len zrejme budes potrebovat zmenit z-index pre tie before a after

eMp · Napísal autor témy **eMp**: 12.04.2015 18:45

Vyriesil som to pridanim sidebarov. Takze kazdy dostane svoj obsah a nebudu prazdne divka.

Kód:

<div id="secondary" class="widget-area" role="complementary">
       <?php if ( is_active_sidebar( 'sidebar-top' ) ) : ?><div id="sidebar-top"><?php dynamic_sidebar( 'sidebar-top' ); ?></div><?php endif; ?>
       <?php if ( is_active_sidebar( 'sidebar-center' ) ) : ?><div id="sidebar-center"><?php dynamic_sidebar( 'sidebar-center' ); ?></div><?php endif; ?>
       <?php if ( is_active_sidebar( 'sidebar-bottom' ) ) : ?><div id="sidebar-bottom"><?php dynamic_sidebar( 'sidebar-bottom' ); ?></div><?php endif; ?>
</div><!-- #secondary .widget-area -->

WP vertikalne zarovnane 3 obrazky [vyriešené]

Podobné témy