Jump to content
  • 0

Левая фиксированная колонка наезжает на резиновый центр


Olekh
 Share

Question

Не получается сделать резиновый шаблон, на примере - http://www.medtechnika.com.ua/

Когда все колонки резиновые, при увеличении, левая и правая растягиваются сужаясь. Когда устанавливаю левую колонку фиксировано, тогда при увеличении, левая колонка наезжает на центр.

В шаблоне, который выше указан, используется CSS expression. Однако когда я отключил в браузере javaScript, шаблон растягивался точно также, как и с javaScript.

Может, кто-то подскажет как такое сделать или где почитать?

/* Центр */

div#wrapper

{

float: left;

width: 100%;

}

div#content

{ margin: 0 20%; /* отступ центра от боковых колонок */

}

/* /Центр */

/* Левая колонка */

div#left

{

float: left;

width: 19% ; /* Ширина левой колонки */

margin-left: -100%;

background: transparent;

}

/* /Левая колонка */

/* Правая колонка */

div#right

{

float: left;

overflow: auto;

width: 19% ;/* Ширина правой колонки */

margin-left: -19%;

background: transparent;

}

/* /Правая колонка */

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Точнее нужно формулировать свои вопросы. К примеру я так и не услышал вопрос. Вобщем по аналогии с ссылкой на пример, имеем одну жесткую колонку и три динамические итого:

HTML


<div id="colum-1"></div> // Это жесткая колонка
<div id="wrapper">
<div></div> // Это резиновые колонки
<div></div>
<div></div>
</div>

CSS:


* {
padding: 0;
border: 0;
margin: 0}
#colum-1 {
width: 250px;
position: absolute;
top: 0;
left: 0}
#wrapper {
border-left: 250px solid #fff}
#wrapper div {
width: 33.3%;
float: left}

Link to comment
Share on other sites

  • 0

Точнее нужно формулировать свои вопросы. К примеру я так и не услышал вопрос. Вобщем по аналогии с ссылкой на пример, имеем одну жесткую колонку и три динамические итого:

HTML

Спасибо. Буду экспериментировать.

Link to comment
Share on other sites

  • 0

Точнее нужно формулировать свои вопросы. К примеру я так и не услышал вопрос. Вобщем по аналогии с ссылкой на пример, имеем одну жесткую колонку и три динамические итого:

HTML

Ещё раз большое спасибо. Сделал как написали, только колонок резиновых две, а фиксированная одна. Еще добавил float: left по центру и сделал отступы. Получилось нормально. Каталог расширяется так как нужно было. Остался только один момент. При увеличении Ctrl+ с 0 до 4 - всё ок, а после пятого Ctr+, правая колонка съезжает вниз. На примере по ссылке http://www.medtechnika.com.ua/ в таком случае всё уходит вправо. Чтобы так получилось нужно править css или использовать expression?



<!-- Левая колонка -->
<div id="left"></div>
<!-- /Левая колонка -->

<!-- Центр -->
<div id="wrapper">
<div id="content">
{$main_content}
</div>
</div>
<!-- /Центр -->

<!-- Правая колонка -->
<div id="right"></div>
<!-- /Правая колонка -->



/* Центр */
div#wrapper
{
border-left: 220px solid #fff;
}

div#content
{
margin-left: 5px; /* отступ центра от боковых колонок */
width:75%;
float: left;
}

/* /Центр */

/* Левая колонка */
div#left
{
width: 220px; /* Ширина левой колонки */
position: absolute;
top: 140px;
left: 0}
/* /Левая колонка */

/* Правая колонка */
div#right
{ margin-left: 5px;
width: 18%;
float: left;
}

/* /Правая колонка */

Edited by Olekh
Link to comment
Share on other sites

  • 0

Установил position: absolute; right: 20px; top: 140px и проблема со сползанием правой колонки вниз решилась. Однако, сделать так, чтобы при увеличении Ctr+ сайт съезжал вправо, как на этом сайте http://www.medtechnika.com.ua/, а не оставался в рамках экрана, сужая контент, у меня не получается. Пожалуйста подскажите, каким образом это делается?

/* Правая колонка */

div#right

{ margin-left: 5px;

width: 18%;

float: left;

position: absolute; right: 20px; top: 140px

}

/* /Правая колонка */

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy