[Help] Slider

GTI

Well-Known Member
Joined
Jan 1, 2011
Messages
1,360
Reaction score
413
Направих слайдер с 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

🔽😈🔽😈🔽😈🔽
Joined
Jan 16, 2009
Messages
1,097
Reaction score
346
Слагаш див-а с фона след картинката?
Пробвай така
<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
87
Reaction score
12
а защо не ползваш 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
746
Reaction score
440
Ето една причина - защото както всеки 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,360
Reaction score
413
Хора оправих се,мерси все пак за вниманието.