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

Тема в разделе "Мегафлуд", создана пользователем DzSoft, 2 янв 2016.

  1. DzSoft

    DzSoft

    Регистр.:
    13 сен 2007
    Сообщения:
    206
    Симпатии:
    41
    Всем привет!
    Кажется у меня проблемы с 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;
    }
     
  2. ykpon

    ykpon

    Регистр.:
    8 дек 2012
    Сообщения:
    248
    Симпатии:
    143
    HTML код тоже присылай.
     
  3. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    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);
    }
    
    
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Код:
    .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);
    }
     
    bork75 нравится это.
  5. DzSoft

    DzSoft

    Регистр.:
    13 сен 2007
    Сообщения:
    206
    Симпатии:
    41
    не один из вариантов не подошел.

    Код
    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;
    }
    
     
    Последнее редактирование: 4 янв 2016
  6. DzSoft

    DzSoft

    Регистр.:
    13 сен 2007
    Сообщения:
    206
    Симпатии:
    41
    Код одинаков, если не ошибаюсь
    Как только ставлю 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 разобрался. Сразу не заметил.

    Всё осталось актуальным. кроссбраузерность не решилось. жесткие параметры не помогли
     
    Последнее редактирование: 4 янв 2016
  7. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    мой вариант и mdss правильны и несут одинаковый смысл.
    Удаляй свои стили и пробуй подставлять одиз из вариантов выше.
    для скрытия текста.
    text-indent:-9000pt;

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

    DzSoft

    Регистр.:
    13 сен 2007
    Сообщения:
    206
    Симпатии:
    41
    Я удалял свои стили. страницу скинуть не смогу ибо учусь на Open Servere
     
  9. DzSoft

    DzSoft

    Регистр.:
    13 сен 2007
    Сообщения:
    206
    Симпатии:
    41
    Разобрался, что к чему и почему и какой конфликт был. НО вот мистика top: 50%; не работает и перестали работать сами кнопки next и back
     
  10. bork75

    bork75 Д☼брая собака )

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