растановка по позициям в CSS

DzSoft · 2 Янв 2016

Всем привет!
Кажется у меня проблемы с css.
Не могу выровнять стрелки Back и Next.
Что бы они были с слева и права + по вертикали в середине. Поскольку шаблон имеет свойства как бокс, так и резины.
Код такой

HTML:

.yjmediaslider a.next {
    display:block;
    position:relative;
    float:right;
    right: -1300px;
    top: 50%;
    width:20px;
    height:85px;
    text-indent:-4200px;
    background-image:url(../images/next.svg);
}
.yjmediaslider a.prev {
    display:block;
    position:relative;
    float:left;
    left: -10px;
    top: auto;
    width:20px;
    height:85px;
    text-indent:-4200px;
    background-image:url(../images/back.svg);
    margin-right:10px;
}

ykpon · 2 Янв 2016

HTML код тоже присылай.

bork75 · 2 Янв 2016

HTML:

<div class="yjmediaslider">
  <a class="next"></a>
  <a class="prev"></a>
  <a class="center"></a>

</div>

HTML:

.yjmediaslider {
position:relative;
max-width:1500px;
/*или width:80%;*/
margin:0 auto;
}
.yjmediaslider a.next {
display:block;
position:absolute;
right: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/next.svg);
}
.yjmediaslider a.prev {
display:block;
position:absolute;
left: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

.yjmediaslider a.center {
display:block;
position:absolute;
left: 48%;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

mdss · 3 Янв 2016

Код:

.yjmediaslider {
	position:relative;
}
.yjmediaslider a.next, .yjmediaslider a.prev {
	position:absolute;
	top:50%;
	width:20px;
	height:85px;
	text-indent:-9000pt;
	margin-top:-42px;
}
.yjmediaslider a.next {
	right:-10px;
	background:url(../images/next.svg);
}
.yjmediaslider a.prev {
	left:-10px;
	background:url(../images/back.svg);
}

DzSoft · 4 Янв 2016

не один из вариантов не подошел.

Код

PHP:

        <div class="yjmediaslider">
            <?php if ($countSlides  == 1) { ?>
            <a href="javascript:;" title="<?php echo JText::_('SLIDE_STOP') ?>" class="prev"><?php echo JText::_('SLIDE_STOP') ?></a>
            <?php }else{ ?>
            <a href="javascript:;" title="<?php echo JText::_('PREV_SLIDE') ?>" class="prev"><?php echo JText::_('PREV_SLIDE') ?></a>
            <?php } ?>
            <a href="javascript:;" title="<?php echo JText::_('NEXT_SLIDE') ?>" class="next"><?php echo JText::_('NEXT_SLIDE') ?></a>
        </div>

Полный код стилей

HTML:

/*======================================================================*\
|| #################################################################### ||
|| # Package - YJMediaSlider                    ||
|| # Copyright (C) 2010  Youjoomla.com. All Rights Reserved.  ||
|| # license - PHP files are licensed under  GNU/GPL V2  ||
|| # license - CSS  - JS - IMAGE files  are Copyrighted material  ||
|| # bound by Proprietary License of Youjoomla.com  ||
|| # for more information visit http://www.youjoomla.com/license.html  ||
|| # Redistribution and  modification of this software  ||
|| # is bounded by its licenses  ||
|| # websites - http://www.youjoomla.com | http://www.yjsimplegrid.com  ||
|| #################################################################### ||
\*======================================================================*/
.yjmediaslider {
   display:block;
   position:relative;
   max-width:80%;
   max-height:300px;
   overflow:hidden;
   padding:0;
   margin:0 auto;
}
.yjmediaslider .slide:after,
.yjmediaslider:after {
   content:"";
   display:table;
   clear:both;
}
.yjmediaslider.loading {
   background-image:url(../images/loading.gif);
   background-position:center center;
   background-repeat:no-repeat;
   background-color:#333;
}
.yjmediaslider .slide {
   display:block;
   position:relative;
   visibility:hidden;/* hide all slides on first run */
   width:100%;
}
.yjmediaslider .slide img.poster {
   width:100%;
   max-width:100%;
   z-index:1;
}
.yjmediaslider .slide .slide-details {
   display:block;
   position:absolute;
   color:#FFF;
   text-shadow: 1px 1px #000000;
}
.yjmediaslider .slide .slide-details .slide-title {
   font-size:28px;
   color:#FFF;
   border-bottom:1px #FFF solid;
   padding-bottom:15px;
   margin-bottom:15px;
}
.yjmediaslider .slide .slide-details .slide-title .slide-tags {
   display:block;
   clear:both;
   font-size:14px;
   font-weight:normal;
   margin-top:10px;
}
.yjmediaslider .slide .slide-details .slide-title .slide-tags a {
   color:#FFF;
   text-decoration:none;
}
.yjmediaslider .slide .slide-details .description {
   font-size:14px;
   margin:0px;
   padding:0px;
}
.yjmediaslider .slide .slide-details .buttons {
   display:block;
   margin-top:30px;
}
.yjmediaslider .slide .slide-details .buttons .play-video {
   background-color:#2eaff7;
   padding:10px;
   text-transform:uppercase;
   color:#FFF;
   text-decoration:none;
   text-shadow:none;
   border-radius:5px;
   margin-right:10px;
}
.yjmediaslider .slide .slide-details .buttons .read-more {
   background-color:#FFF;
   padding:10px;
   text-transform:uppercase;
   color:#000;
   text-decoration:none;
   text-shadow:none;
   border-radius:0px;
}
.yjmediaslider div.main-nav {
   display:block;
   position:absolute;
   left:30px;
   bottom:30px;
   z-index:1800;
}
.yjmediaout.singleslide div.main-nav{
   display:none;
}
/* CSS class attached to main nav container when video is visible; allows reposition of navigation on video */
.yjmediaslider div.main-nav.video_on {
   bottom:50%;
   width:98%;
   left:1%;
}
.yjmediaslider a.next {
   display:block;
   position:absolute;
   float:right;
  right: -1300px;
   width:20px;
   height:85px;
   text-indent:-4200px;
   background-image:url(../images/next.svg);
}

.yjmediaslider a.prev {
   display:block;
   position:absolute;
   float:left;
  left: -10px;
  width:20px;
   height:85px;
   text-indent:-4200px;
   background-image:url(../images/back.svg);
   margin-right:10px;
}
.yjmediaout.singleslide div.main-nav.video_on {
   display:block;
   top:10px;
}
.yjmediaout.singleslide a.next{
   display:none;
}
.yjmediaout.singleslide a.prev {
   background-image:url(../images/stop.png);

}
.yjmediaslider .video-player {
   display:none;
   position:absolute;
   width:100%;
   height:100%;
   z-index:1600;
   top:0;
   left:0;
   background-color:#000;
   background-image:url(../images/loading.gif);
   background-position:center center;
   background-repeat:no-repeat;
}
.yjmediaslider .video-player iframe {
   width:100%;
   height:100%;
   max-width:100%;
}
/*Individual navigation*/
.yjmediaout {
   display:block;
   position:relative;
}
.yjmediaout:after {
   content:"";
   display:table;
   clear:both;
}
.yjmediaout.secondnav {
   padding-bottom:40px;
}
.yjmediaout .secondary-nav {
   display:block;
   width:100%;
   height:16px;
   clear:both;
   position:absolute;
   bottom:15px;
   z-index:1700;
}
.yjmediaout .secondary-nav ul {
   list-style-type:none;
   margin:0;
   padding:0px;
   float:none;
   height:12px;
   display:block;
   text-align:center;
}
.yjmediaout .secondary-nav ul li {
   display:inline-block;
   float:none;
   margin:0;
   padding:0;
   background:none;
   margin-right:5px;
}
.yjmediaout .secondary-nav ul li a {
   text-indent:-5000px;
   display:block;
   position:relative;
  top:-35px;
  width:12px;
   height:12px;
   overflow:hidden;
   background:#000;
   -webkit-border-radius:50%;
   -khtml-border-radius:50%;
   -moz-border-radius:50%;
   border-radius:50%;
}
.yjmediaout .secondary-nav ul li a:hover,
.yjmediaout .secondary-nav ul li a.current {
   position:relative;
  top:-35px;
   background:#99CC33;
}
div.yjsquare.yjmslider,
div.yjsquare.yjmslider div.yjsquare_in {
   margin:0!important;
   padding:0!important;
}
@media screen and (max-width: 780px) {
.yjmediaslider .slide .slide-details {
   width:95%!important;
   margin:0 10px!important;
   left:0!important;
}
.yjmediaslider .slide .slide-details .slide-title {
   font-size:22px;
}
.yjmediaslider div.main-nav {
   display:block;
   position:absolute;
   left:auto;
   right:10px;
   bottom:auto;
   top:10px;
}
.yjmediaslider .slide .slide-details .buttons .play-video,
.yjmediaslider .slide .slide-details .buttons .read-more {
   font-size:10px;
   padding:5px;
}
}
@media screen and (max-width: 620px) {
.yjmediaslider .slide .slide-details .description {
   display:none;
}
.yjmediaslider .slide .slide-details .slide-title {
   font-size:22px;
   border-bottom:none;
   padding-bottom:0;
   margin-bottom:15px;
}
}
.dim_lights {
   background: #000;
   position:fixed;
   display: none;
   left: 0;
   top: 0;
   width:100%;
   height:100%;
   z-index:1500;
}

DzSoft · 4 Янв 2016

Код одинаков, если не ошибаюсь

bork75 написал(а):

HTML:

<div class="yjmediaslider">
  <a class="next"></a>
  <a class="prev"></a>
  <a class="center"></a>

</div>

HTML:

.yjmediaslider {
position:relative;
max-width:1500px;
/*или width:80%;*/
margin:0 auto;
}
.yjmediaslider a.next {
display:block;
position:absolute;
right: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/next.svg);
}
.yjmediaslider a.prev {
display:block;
position:absolute;
left: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

.yjmediaslider a.center {
display:block;
position:absolute;
left: 48%;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

Как только ставлю yjmediaslider в php код все поднимается наверх, появляются на стрелках слова Next и Previous, а сам слайдер на них не реагирует.
Картинки получаются якобы на заднем плане.
Ставлю обратно:

PHP:

        <div class="main-nav">
            <?php if ($countSlides  == 1) { ?>
            <a href="javascript:;" title="<?php echo JText::_('SLIDE_STOP') ?>" class="prev"><?php echo JText::_('SLIDE_STOP') ?></a>
            <?php }else{ ?>
            <a href="javascript:;" title="<?php echo JText::_('PREV_SLIDE') ?>" class="prev"><?php echo JText::_('PREV_SLIDE') ?></a>
            <?php } ?>
            <a href="javascript:;" title="<?php echo JText::_('NEXT_SLIDE') ?>" class="next"><?php echo JText::_('NEXT_SLIDE') ?></a>
        </div>

Все работает, но стрелки собираются в кучку в правом нижнем углу и слова Next и Previous не пропадают.

Со словами Next и Previous разобрался. Сразу не заметил.

Всё осталось актуальным. кроссбраузерность не решилось. жесткие параметры не помогли

bork75 · 5 Янв 2016

мой вариант и mdss правильны и несут одинаковый смысл.
Удаляй свои стили и пробуй подставлять одиз из вариантов выше.

DzSoft написал(а):
Код одинаков, если не ошибаюсь

Со словами Next и Previous разобрался. Сразу не заметил.

для скрытия текста.
text-indent:-9000pt;

Если не разберешься, скинь страницу где собираешь, так быстрее помогу.

DzSoft · 5 Янв 2016

bork75 написал(а):
мой вариант и mdss правильны и несут одинаковый смысл.
Удаляй свои стили и пробуй подставлять одиз из вариантов выше.

для скрытия текста.
text-indent:-9000pt;

Если не разберешься, скинь страницу где собираешь, так быстрее помогу.

Я удалял свои стили. страницу скинуть не смогу ибо учусь на Open Servere

DzSoft · 23 Янв 2016

bork75 написал(а):

HTML:

<div class="yjmediaslider">
  <a class="next"></a>
  <a class="prev"></a>
  <a class="center"></a>

</div>

HTML:

.yjmediaslider {
position:relative;
max-width:1500px;
/*или width:80%;*/
margin:0 auto;
}
.yjmediaslider a.next {
display:block;
position:absolute;
right: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/next.svg);
}
.yjmediaslider a.prev {
display:block;
position:absolute;
left: 10px;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

.yjmediaslider a.center {
display:block;
position:absolute;
left: 48%;
top: 50%;
width:20px;
height:85px;
background-image:url(../images/back.svg);
}

Разобрался, что к чему и почему и какой конфликт был. НО вот мистика top: 50%; не работает и перестали работать сами кнопки next и back

bork75 · 23 Янв 2016

DzSoft написал(а):
Разобрался, что к чему и почему и какой конфликт был. НО вот мистика top: 50%; не работает и перестали работать сами кнопки next и back

попробуй top:50% !important;
не видя страницу в живую, не смогу подсказать, почему не работает.

растановка по позициям в CSS

DzSoft

3T

ykpon

Постоялец

bork75

The Team

mdss

♖♘♗♕♔♗♘♖

DzSoft

3T

DzSoft

3T

bork75

The Team

DzSoft

3T

DzSoft

3T

bork75

The Team