[Help] Slider

GTI

Well-Known Member
Joined
Jan 1, 2011
Messages
1,364
Reaction score
422
Направих слайдер с 5 картинки. Искам под всяка картинка да има фон,за тази цел в един див съм поместил картинка и в него в друг див направих фона на css. проблема е,че фона отива върху картинката.

PHP:
<div class='num0 img slide'><li> <img src='images/1.png' alt='1' title='1' /></li><div class="div1"></div></div>

PHP:
.div1{
	position: fixed;
	height: 50vh;
	background-color: #0AA699;
	bottom: 0;
	width: 100%;
	}

Правя го така за да не правя картинка с фон - става прекалено голяма като размер.
 

misho_rb

Well-Known Member
Joined
Feb 1, 2010
Messages
1,146
Reaction score
98
Здравей,

Ако те разбирам правилно, подобен подход трябва да ти свърши работа(вместо снимката съм сложил друг <div>):
Colored footer - JSFiddle

Идеята е, да не ползваш фиксиран елемент, ами блоков елемент, който обхваща цялата дължина на контейнера.

Ако снимката ти няма clear/не се показва като блоков елемент(пример: position: aboslute) пак ще имаш overlap.

Това ще ти свърши работа ако растоянието под снимката ти е фиксирано. Ако се променя, може да сложиш background-a на parent-a '.img.slide', като той ще е под снимката. След това остава да го направиш малко по-дълъг от нея(за да стърчи отдолу).

Ако не се оправиш прати примера и как искаш да стане, ще го нашляпаме това.
 

Dea7h

Admiral General Aladeen
Joined
Jan 16, 2009
Messages
1,189
Reaction score
426
Слагаш див-а с фона след картинката?
Пробвай така
<div class='num0 img slide'><div class="div1"></div><li> <img src='images/1.png' alt='1' title='1' /></li></div>

ако не стане направо сложи фона в 1вия див "num0 img slide"
 

TwIsTeR

Member
Joined
Apr 28, 2009
Messages
89
Reaction score
14
а защо не ползваш bootstrap ? има си и слайдер и си решаваш проблемите ( хем е и responsive )
 

misho_rb

Well-Known Member
Joined
Feb 1, 2010
Messages
1,146
Reaction score
98
а защо не ползваш bootstrap ? има си и слайдер и си решаваш проблемите ( хем е и responsive )

Ето една причина - защото както всеки grid-based layout е "restrictive-as-shit". Изключително удобен е ако искаш да подкараш нещо бързо и надеждно, но при повечето проекти(поне в комерсиален аспект) на мен ми е по-удобно да го пропусна.
 

RaFa

Team Member
Joined
Jan 24, 2009
Messages
783
Reaction score
472
Ето една причина - защото както всеки grid-based layout е "restrictive-as-shit". Изключително удобен е ако искаш да подкараш нещо бързо и надеждно, но при повечето проекти(поне в комерсиален аспект) на мен ми е по-удобно да го пропусна.

Кое му е "restrictive-as-shit" на Bootstrap или на Foundation?

Имаш свободата да пишеш собствен CSS и да използваш само компонентите, които искаш (може да не ползваш grid системата). А на всичкото отгоре ти спестява една седмица (ако сайта е от 2 страници, няма да е една седмица, разбира се) писанe на CSS за responsive.
 
Last edited:

GTI

Well-Known Member
Joined
Jan 1, 2011
Messages
1,364
Reaction score
422
Хора оправих се,мерси все пак за вниманието.