Центр div с фиксированным меню на стороне

-2

Я пытаюсь создать сайт с фиксированной «боковой панелью» с левой стороны, а «контент» центрирован как по вертикали, так и по горизонтали на оставшейся части (справа) Веб-сайт. Я хочу, чтобы «контент» всегда был центрирован независимо от размера экрана. Я попробовал margin-left: auto; и margin-right: auto; но когда я это делаю, контент позиционирует себя поверх боковой панели. Может кто-нибудь мне помочь? Вот ссылка на изображение, чтобы показать, что я имею в виду https://www.dropbox.com/s/95duw8yrmlwtc26/Sk%C3%A4rmavbild%202015-01-22%20kl.%2011.51.10.png?dl=0. Вот код, у меня есть на данный момент, где боковая панель «в сторону», и содержание все в «основной»:Центр div с фиксированным меню на стороне

<aside> this box should always be fixed on the left and have a height of  100%. 

</aside><!--end side--> 


<main> 

<div id="submenu"> 
<ul> 
<li>LOGOS</li> 
<li>PRINT</li> 
<li>WEB DESIGN</li> 
<li>ALL</li> 
</ul> 
</div> 

<div class="content"> 
<ul> 
<li><img src="img1" alt="img1"/></li> 
<li> <img src="img2" alt="img2"/></li> 
<li> <img src="img3" alt="img3"/></li> 
</ul> 
</div><!--end content--> 
</main> 

aside{ 
background-color:#3A364F; 
width:340px; 
height:100%; 
min-height:710px; 
position:fixed; 
float:left; 

} 
main { 
width:67%; 
float:left; 
margin-left:auto; 
margin-right:auto; 
}

источник

2015-01-20 sara

Какова ваша вещь «в стороне» в части CSS? – chiapa

Жаль, что я пропустил его в html. Теперь я добавил его. В стороне есть фиксированная боковая панель сбоку. В то время как все в основном является частью, которая должна быть сосредоточена. – sara

Это может быть хорошим решением, если вы до использования CSS3 (который не «официально» еще, но большинство, если не все браузеры поддерживают):

div#submenu { 
    background-color:#3A364F; 
    width:340px; 
    height:100%; 
    min-height:710px; 
    position:fixed; 
    top: 0px; 
    left: 0px; 
    background-color:blue; 
} 
div.content { 
    margin-left:340px; 
    margin-right:auto; 
    background-color:red; 
}

Я создал jsFiddle, чтобы продемонстрировать этот код.

margin-left:auto; margin-right:auto работает только в том случае, если объект, на который он надет, имеет указанную ширину (т.е. не процент). Я считаю, что использование calc(...) в конечном итоге приведет к «заданной ширине». Если вы имеете в виду, что вы хотите, чтобы на самом деле контент сфокусировал на оставшейся части (и не просто занимал все пространство, которое не было в подменю), то вы могли бы добавить еще один <div> внутри красного <div class="content"> который имеет правила для размещения вложенного <div> внутри своего красного родителя.

Еще одна проблема с кодом может заключаться в том, что вы применяете правила CSS к объектам, которые не существуют; Я предполагаю, что вы хотите, чтобы правило aside применимо к подменю и main для применения к content.

источник

2015-01-20 17:22:06

Спасибо за ваш ответ! Я не уверен, что я был достаточно ясен, объясняя, что я имел в виду (мой плохой!), И из вашего jsFiddle это не похоже, что мы имеем в виду то же самое. Я отредактировал/обновил вопрос и добавил ссылку на изображение, демонстрирующее то, что я пытаюсь сделать. Буду признателен, если вы посмотрите. Кроме того, я пробовал с указанной шириной на «main», а margin-left: auto adn margin-right: auto все еще не работает. Что происходит, так это то, что он позиционирует себя в стороне. – sara

Возможно, вы также можете посмотреть хорошую структуру для создания своего сайта. Множество фреймворков имеют шаблоны и хорошую документацию для создания сайта. Хорошие рамки - это Bootstrap, Foundation и Skeleton.

Если вы хотите придерживаться своей текущей сборки, решение Alec, где вы фактически вычисляете оставшееся пространство вокруг данного измерения 340 пикселей;

источник

2015-01-20 17:33:05 SetFlame

Центр div с фиксированным меню на стороне

ответ

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