Установка изображения на левой стороне страницы для ссылки в социальных сетях

0

Я создаю веб-приложение для ipad, где я хочу предоставить ссылку в социальных сетях в левой части страницы. Если моя страница прокручивается, в этом случае ссылка также должна быть исправлена навсегда. Может ли кто-нибудь помочь мне в этом проекте, или любая ссылка будет полезна.

Вот мой код:

.PreCycleContent{width:100%;margin-top:6%;position:absolute;}
.PreCycleContentLeftAside{
    width:28%;
    margin-left:2%;
}
.PreCycleContentRightAside{
    width:60%;
    margin-left:2%;
}
.PreCycleContentLeftAside,.PreCycleContentRightAside{   
    min-height:33.5em;
    overflow-y:auto;
    border:1px solid #000000;
    border-radius:5px;
    padding:1em 1% 1em 1%;
    background:#ffffff;
    display:inline-block;
}

.PreCycleContentLeftAside>ul,.PreCycleContentRightAside>ul{
    margin-top:1em;
}
.leftSwipeImage,.rightSwipeImage{
    display:inline-block;
}
.leftSwipeImage{
    float:left;
    margin-top:8em;
    position:fixed;
}
.rightSwipeImage{
    margin-top:8em;
    position:fixed;
    float:right;

}

Код HTML:

<div class="PreCycleContent">
                <div class="leftSwipeImage">
                    <img src="appimages/left_handle.png" alt="leftSwipeImage" />
                </div>
                <div class="PreCycleContentLeftAside">
                    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">                       
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>   
                    </ul>
                </div>
                <div class="PreCycleContentRightAside">
                        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
                            <li><a href="#">Apple</a></li>
                            <li><a href="#">Banana</a></li>
                            <li><a href="#">Cherry</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>>
                        </ul>
                </div>
                <div class="rightSwipeImage">
                    <img src="appimages/right_handle.png" alt="rightSwipeImage" />
                </div>
            </div>

Изображение с правой стороны не устанавливается в правом углу страницы. float: право не работает должным образом с положением: исправлено.

  • 0
    да, вы можете использовать положение: исправить для вашего контейнера
Теги:

1 ответ

0

Используйте следующий код css

 .linkclass {
    position:fixed;
    margin-top:10px;
    width:10px;
    height:10px;
 }

На экране появится 10px.

  • 0
    Это для iOS 5+. Более старые версии должны иметь запасной вариант к обработчикам прокрутки / сенсорного перемещения, перемещающим секцию программно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню