Позицията да е винаги една и съща на елементи

[vinsbg]

Здравейте,
малко тъпо заглавие, но не можах точно да измисля, как да го формулирам. Извинявам се за което.

Та въпроса е имам един див в който изкарвам снимка. Сега добавих 2 стрелки съответно в лаво и дясно за следваща и предишна снимка. Всичко работи, но в зависимост от височината на снимката стрелките/бутоните се местят постоянно. На една снимка са горе, на следваща са малко по-надолу..

div-a за снимката

#picture{
	text-align:center;
	width:600px;
	margin:0 auto;
	margin-top:10px;
	margin-left:60px;
}

css-a за стрелките

.bckf {
    float: left;
    position: relative;
    margin-top: -450px;
    margin-left: -40px;
}
.nxtf {
     float: right;
     position: relative;
     margin-top: -450px;
     margin-right: -40px;
 }

Може да видите снимките и разликите. На снимка 1 вижте къде отгоре са стрлките, а на снимка 2 къде отиват надолу..
http://web-tourist.net/userfiles/6/5979.jpg
снимка 2
http://web-tourist.net/userfiles/6/5980.jpg

 

[anonimen]

Това май се получава защото снимките винаги седят 450 px отдолу нагоре (по подразбиране са под снимката, и ти ги "дърпащ" 450 px нагоре).
Трябва да ги дърпаш надолу, а не нагоре. Пробвай top вместо margin-top и използвай положително число:

[css]margin-top: -450px;/*така са 450 px отдолу нагоре*/
top: 450px;/*така са 450 px отгоре надолу*/[/css]

 

[vinsbg]

Това май се получава защото снимките винаги седят 450 px отдолу нагоре (по подразбиране са под снимката, и ти ги "дърпащ" 450 px нагоре).
Трябва да ги дърпаш надолу, а не нагоре. Пробвай top вместо margin-top и използвай положително число:

[css]margin-top: -450px;/*така са 450 px отдолу нагоре*/
top: 450px;/*така са 450 px отгоре надолу*/[/css]

С top:450px; заминават много надолу в страницата. Съответно пак трябва отрицателна стойност да използвам, за да ги вдигна нагоре..

 

[RiddleR]

[css].bckf {
center left no-repeat;
cursorointer
}
.nxtf {
center right no-repeat;
cursorointer
}[/css]

 

[vinsbg]

[css].bckf {
center left no-repeat;
cursorointer
}
.nxtf {
center right no-repeat;
cursorointer
}[/css]

Така без да ги наглася коя, къде да е си стоят и двете под снимката...

 

[RiddleR]

[css].bckf {

center left no-repeat;
vertical-align: middle;
cursorointer

}

.nxtf {

center right no-repeat;
vertical-align: middle;
cursorointer

}[/css]

 

[vinsbg]

Същото, като предишното ... отиват под div-a на снимката.. Без да ги глася колко нагоре и колко настрани да ходят не се получава. Стоят си отдолу.

 

[RiddleR]

ако използваш картинки за стрелките ще е по-добре.

 

[vinsbg]

ако използваш картинки за стрелките ще е по-добре.

Те са картинки..

<a href=''><img src='media/prev.png' class="bckf"></a>
<a href=''><img src='media/next.png' class="nxtf" ></a><br/> ";

 

[RiddleR]

[css]

.bckf{
float: left;
position:absolute;
top:50%;

}
.nxtf {
float: right;
position:absolute;
top:50%;


[/css]

 

[vinsbg]

[css]
...
[/css]

Много ти благодаря. Сега стана! :?: