Фиксированное положение боковой панели и отзывчивое

Я хочу узнать медиа-запросы и немного больше в CSS. На данный момент я хочу фиксированную боковую панель, которая не прокручивает вниз содержимое.Фиксированное положение боковой панели и отзывчивое

Кроме того, я читал о медиазапросах ранее .. Просто не мог понять их еще .. Может образец даст мне намеки ...

Вот мой код ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
.wrapper { 
    width: 1024px; 
    margin: 0 auto; 
} 
.content { 
    background-color: #CCC; 
    width: 700px; 
    float: left; 
} 
.sidebar { 
    float: right; 
    height: 500px; 
    width: 300px; 
    padding: 10px; 
    background-color: #666; 
} 
</style> 
</head> 

<body> 
<div class="wrapper"> 
    <div class="content"> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    <div class="post"> 
     <h1>Header</h1> 
     <p>This is a excerpt or a content</p> 
    </div> 
    </div> 
    <div class="sidebar"></div> 
</div> 
</body> 
</html>

Чтобы сделать это коротко, я просто пытаюсь подражать этому site .. просто чтобы проверить свои навыки. Это выглядит просто ...

Как вы можете видеть, если вы измените размер окна браузера, меню изменилось: это какой-то эффект jQuery? Если да, то где я могу найти учебник, который ..

источник

2013-08-16 Jeremi Liwanag

Смотрите эту скрипку http://jsfiddle.net/uPpJr/ .. добавляемые положение закрепленного на боковую панель, теперь в отзывчивых один раз удалить позицию фиксированной в запросе на медиа –

Я только что посмотрел исходный код для примера сайта. Фиксированный бар справа находится в элементе html5, в стороне (это может быть просто div). CSS для этого имеет фиксированную позицию и маржа слева больше, чем столбец слева, который содержит сообщения. Установите боковую панель div с фиксированным положением. – dotnethaggis

боковая панель с левым краем более 700 пикселей? –

медиазапросов: http://css-tricks.com/css-media-queries/

Для полосы прокрутки вашего любопытный сам сказал .. это сделать ПОлОжЕНИЕ: фиксированный; left: with-of-the-wrapper; и возьмите боковую панель из обертки div.

Gr. Kevin

источник

2013-08-16 12:31:29 KevinB

О, так боковая панель находится за пределами обертки div ??и дать классу боковой панели позицию: зафиксировано ?? Хм. как насчет примеров выше .. Действительно ли это тоже? –

Да, но они дали вам код для использования, я только дал вам материал, чтобы читать и учиться. – KevinB

Можете ли вы сделать код? и плохо сравнить это с их? –

Вы можете скрыть боковую панель DIV, когда ширина экрана становится меньше определенного размера, как так:

@media all and (max-width: 720px) { 
    #sidebar { 
    display:none; 
    } 
}

Или вы могли бы плавать он оставил, который будет отображаться в нижней части страницы:

@media all and (max-width: 720px) { 
     #sidebar { 
     float:left; 
     } 
    }

Возможно, вам потребуется настроить CSS так же, как и максимальную ширину, на то, что вы лично хотите, чтобы запросы на мультимедиа запускались.

Edit - меню Изменение размера на Mobile

простое решение было бы использовать сетку Framework.

Две главные из которых:

Если вы идете на свои сайты и изменять размер окна, вы увидите, смена меню в зависимости от размера экрана. Изучите код и посмотрите, как они это делают, и это поможет вам это понять. Очевидно, читайте также все уроки.

Здесь также учебник, который проходит через его реализацию с нуля http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

источник

2013-08-16 12:41:07 dotnethaggis

Да, я думаю, что я уже знаю о позициях div, когда он встречает определенную ширину устройства ... Думаю, теперь мой вопрос - это меню Clickable, которое меняется при просмотре его на маленьком экране. –

Я обновил ответ, чтобы помочь с изменением размера меню. – dotnethaggis

Ваш вопрос не запрашивает изменение размера меню - попробуйте сохранить все в контексте. Обновите исходный вопрос, чтобы узнать о меню. – dotnethaggis

Фиксированное положение боковой панели и отзывчивое

ответ

Смежные вопросы