[ Príspevkov: 7 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
WP vertikalne zarovnane 3 obrazky

Registrovaný: 05.11.11
Prihlásený: 13.12.17
Príspevky: 1128
Témy: 49 | 49
Bydlisko: Bratislava
NapísalOffline : 28.03.2015 17:45 | WP vertikalne zarovnane 3 obrazky

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;
}


_________________
CPU: Intel Core i5 2500k, MB: Asus P8Z68-V-PRO-GEN3, GPU: Gigabyte GF GTX1060, RAM: Corsair 2x4GB 1600Mhz, HDD: Seagate 2TB
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 16.11.17
Príspevky: 451
Témy: 9 | 9
NapísalOffline : 28.03.2015 17:59 | WP vertikalne zarovnane 3 obrazky

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.


Offline

Užívateľ
Užívateľ
WP vertikalne zarovnane 3 obrazky

Registrovaný: 05.11.11
Prihlásený: 13.12.17
Príspevky: 1128
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 28.03.2015 18:22 | WP vertikalne zarovnane 3 obrazky

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


_________________
CPU: Intel Core i5 2500k, MB: Asus P8Z68-V-PRO-GEN3, GPU: Gigabyte GF GTX1060, RAM: Corsair 2x4GB 1600Mhz, HDD: Seagate 2TB
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 16.11.17
Príspevky: 451
Témy: 9 | 9
NapísalOffline : 28.03.2015 20:40 | WP vertikalne zarovnane 3 obrazky

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.


Offline

Užívateľ
Užívateľ
WP vertikalne zarovnane 3 obrazky

Registrovaný: 05.11.11
Prihlásený: 13.12.17
Príspevky: 1128
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 28.03.2015 21:15 | WP vertikalne zarovnane 3 obrazky

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


_________________
CPU: Intel Core i5 2500k, MB: Asus P8Z68-V-PRO-GEN3, GPU: Gigabyte GF GTX1060, RAM: Corsair 2x4GB 1600Mhz, HDD: Seagate 2TB
Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 16.11.17
Príspevky: 451
Témy: 9 | 9
NapísalOffline : 28.03.2015 21:23 | WP vertikalne zarovnane 3 obrazky

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


Offline

Užívateľ
Užívateľ
WP vertikalne zarovnane 3 obrazky

Registrovaný: 05.11.11
Prihlásený: 13.12.17
Príspevky: 1128
Témy: 49 | 49
Bydlisko: Bratislava
Napísal autor témyOffline : 12.04.2015 18:45 | WP vertikalne zarovnane 3 obrazky

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 -->


_________________
CPU: Intel Core i5 2500k, MB: Asus P8Z68-V-PRO-GEN3, GPU: Gigabyte GF GTX1060, RAM: Corsair 2x4GB 1600Mhz, HDD: Seagate 2TB
 [ Príspevkov: 7 ] 


WP vertikalne zarovnane 3 obrazky



Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy.

Pozadie zarovnane na okrajoch

v HTML, XHTML, XML, CSS

5

307

20.07.2008 12:17

p360t

V tomto fóre nie sú ďalšie neprečítané témy.

Obrázky boli úspešne odoslané! - ale obrázky nikde !!!

v PHP, ASP

5

417

13.05.2008 15:22

Tominator

V tomto fóre nie sú ďalšie neprečítané témy.

Vertikalne menu

[ Choď na stránku:Choď na stránku: 1, 2 ]

v HTML, XHTML, XML, CSS

34

456

21.03.2014 13:14

petko117

V tomto fóre nie sú ďalšie neprečítané témy.

vertikalne zarovnanie textu

v HTML, XHTML, XML, CSS

20

1794

03.01.2008 15:12

vkmt

V tomto fóre nie sú ďalšie neprečítané témy.

vertikalne menu IE

v HTML, XHTML, XML, CSS

1

520

01.03.2012 16:14

Ďuri

V tomto fóre nie sú ďalšie neprečítané témy.

vertikalne rozbalovacie menu

v JavaScript, VBScript, Ajax

7

4101

24.01.2007 22:07

m@-nX

V tomto fóre nie sú ďalšie neprečítané témy.

Vertikalne 3-urovnove menu

v HTML, XHTML, XML, CSS

7

248

13.03.2014 20:31

Mego

V tomto fóre nie sú ďalšie neprečítané témy.

vertikalne jquery accordion menu

v JavaScript, VBScript, Ajax

7

191

30.01.2013 22:48

shaggy

V tomto fóre nie sú ďalšie neprečítané témy.

Vertikálne rolovacie menu v JS

v JavaScript, VBScript, Ajax

0

629

28.01.2009 10:40

jtomcik

V tomto fóre nie sú ďalšie neprečítané témy.

Ako vertikalne zarovnan na stred toto?

v HTML, XHTML, XML, CSS

4

354

21.12.2007 19:46

Matho

V tomto fóre nie sú ďalšie neprečítané témy.

Vertikalne aj horizontalne zarovnanie na stred

v HTML, XHTML, XML, CSS

2

164

07.10.2016 9:52

17mark

V tomto fóre nie sú ďalšie neprečítané témy.

<li> a vertikalne zarovnanie textu

v HTML, XHTML, XML, CSS

5

494

29.03.2010 15:01

max-m

V tomto fóre nie sú ďalšie neprečítané témy.

OBRAZKY

v Operačné systémy Microsoft

8

490

14.10.2009 21:57

Nicole16111

V tomto fóre nie sú ďalšie neprečítané témy.

Obrázky

v HTML, XHTML, XML, CSS

4

178

02.04.2017 23:30

LukIneskoNR

V tomto fóre nie sú ďalšie neprečítané témy.

obrazky

v PHP, ASP

6

417

18.04.2009 20:20

dessert

V tomto fóre nie sú ďalšie neprečítané témy.

Obrázky

v Ostatné programy

13

252

08.11.2015 13:34

4040



© 2005 - 2017 PCforum, edited by JanoF