Нужно центрировать div, но останавливаться, когда он достигает определенной левой позиции, чтобы оставить место для бокового меню - PullRequest
Новая
       29

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

0 голосов
/ 10 января 2011

Вероятно, есть простой ответ на этот вопрос, который я пропускаю. Мой контент находится в контейнере div на главной странице. Я хочу, чтобы он был горизонтально центрирован, однако, когда браузер уменьшен до маленького размера, он перекрывает мое боковое меню. Я хочу, чтобы он перестал двигаться влево, например, когда он достигнет 200 пикселей.

В настоящее время он центрируется, имея отрицательное поле в половину ширины (-350px), а затем позиционирует его на 50%.

Мой css здесь

бумага {

position:absolute;
z-index:6;
overflow: hidden;
visibility: visible;
float: left;
left: 50%;
margin-top: 0px;
padding-top: 0;
padding-right: 0;
padding-bottom:200;
padding-left: 0;
background-color: #000;
height: 900px;
width: 700px;
margin-left: -350px;

}

любая помощь будет высоко ценится

ура

Ответы [ 3 ]

0 голосов
/ 10 января 2011

Вам придется переделать ваш HTML и CSS, чтобы это произошло. 

<div id = "sidebar"></div>
<div id = "content">
    <div id = "content_inner"></div>
</div>

с этим новым HTML вам также понадобится новый CSS 

#sidebar{
float:left;
width:200px;
}

#content{
padding-left:200px;
}

#content_inner{
    margin:0px auto; /* This will center your box in the parent box */
    width:700px;
}

В определенный момент,вам все еще, возможно, придется отказаться от своего дизайна, вы не можете остановить кого-то, кто просматривает ваш сайт на экране шириной 100px.Вы должны попытаться оптимизировать свои страницы для минимального размера (на самом деле большинство сайтов разрабатываются для отображения 960 пикселей или более)

, вы также можете найти дополнительную информацию по этому вопросу здесь: http://css -tricks.com / The идеальной жидкости ширина-макет / * +1012 *

0 голосов
/ 10 января 2011

Этот первый бит является скорее общим комментарием по решению проблем CSS.Если вы устанавливаете надстройку Firebug для Firefox, то всякий раз, когда вы просматриваете страницу, вы можете редактировать стили CSS и inline в режиме реального времени, чтобы увидеть, какое свойство влияет на ваш пользовательский интерфейс.В этом случае вы загрузите свою страницу, просмотрите div 'paper' и попытаетесь изменить свойства, такие как padding-left, position, margin и т. Д.

В этом случае ваша проблема связана сДело в том, что этот div является плавающим, поэтому он может перекрывать другой контент.Если ваше боковое меню также является плавающим (слева), то оно не будет перекрываться с другими элементами с плавающей точкой: left.Кроме того, поскольку вы используете переполнение: скрытое, оно не будет переноситься ниже меню, как обычно.

Наконец, это не ясно в ОП, но если меню, о котором вы говоритесправа, затем сделайте оба плавающих: вправо.

0 голосов
/ 10 января 2011

Центрируйте контейнер, используя: margin:0 auto; вместо абсолютного позиционирования, затем примените левый и правый отступ в 200 пикселей;(padding: 0 200px;.

...