Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 31.07.2009, 07:06   #1
Obey-Kun
Линуксоид
Участник клуба
 
Аватар для Obey-Kun
 
Регистрация: 31.07.2009
Сообщений: 1,403
По умолчанию Div, находящийся в 20px от левой части окружения и занимающий всю оставшуюся его часть

Как такое сделать?
То есть есть такой xhtml:
Код:
<div id="wrapper">
   <div id="stuff">
      тут контент
   </div>
</div>
У wrapper прописана ширина 70%.
Как сделать так, чтобы #stuff находился в 20 пикселах от левой части обёртки (#wrapper) и занимал всю оставшуюся её часть?

Пояснительная картинка:


Это нужно, чтобы здесь место, где написано «Контактная информация» (в самом верху страницы) было фиксировано относительно левого края враппера и распространялось на всю его остальную часть. Ну и ещё для двух мест в этом шаблоне.
Я схожу с ума или это глючит реальность?
Jabber ID: obey@obey.su

Последний раз редактировалось Obey-Kun; 31.07.2009 в 07:43.
Obey-Kun вне форума Ответить с цитированием
Старый 31.07.2009, 09:55   #2
wall66
Участник клуба
 
Аватар для wall66
 
Регистрация: 04.10.2008
Сообщений: 1,485
По умолчанию

Код HTML:
<div style="width:70%;height:320px;background-color:red">
	<div style="height:40%;margin-left:20px;background-color:blue"></div>
</div>
свободен...
wall66 вне форума Ответить с цитированием
Старый 31.07.2009, 10:29   #3
Obey-Kun
Линуксоид
Участник клуба
 
Аватар для Obey-Kun
 
Регистрация: 31.07.2009
Сообщений: 1,403
По умолчанию

Я уже пытался использовать такой приём на сайте — получается не то.

http://www.obey.su/modx/ - вот, внизу применил, не помогает. Отступ есть, но заполняется не вся обёртка, заполняется только столько, сколько занимает контент. Никак не могу понять, с чем связано.
http://www.obey.su/modx/triov_files/navbottom.css — вот та часть, которая преобразовывает список в менюшку. #navbottom — собственно тот div, который должен быть сдвинут и растянут.
Что не так?
Я схожу с ума или это глючит реальность?
Jabber ID: obey@obey.su

Последний раз редактировалось Obey-Kun; 31.07.2009 в 10:34.
Obey-Kun вне форума Ответить с цитированием
Старый 31.07.2009, 10:33   #4
wall66
Участник клуба
 
Аватар для wall66
 
Регистрация: 04.10.2008
Сообщений: 1,485
По умолчанию

видимо, проблема в родительском элементе
свободен...
wall66 вне форума Ответить с цитированием
Старый 31.07.2009, 10:47   #5
Obey-Kun
Линуксоид
Участник клуба
 
Аватар для Obey-Kun
 
Регистрация: 31.07.2009
Сообщений: 1,403
По умолчанию

Вот так код выглядит. Что не так?

Код HTML:
<div id="wrapper">
	<div id="footer">
		<div id="navbottom">
			<!-- Тут ненумерованный список ссылок -->
		</div>
	</div>
</div>
Код:
#wrapper {
 width: 80%;
 min-width: 760px;
}

#footer {
 width: 100%;
}

#navbottom, #navbottom ul {
 list-style: none;             /* Убрали буллеты из нашего списка  */
 margin: 0;                    /* Обнулили отступы margin и ... */
 padding: 0;                   /* ... padding у элементов меню */
 background: #ccc;             /* Фон всего меню */
 float: left;
}

#navbottom {
 margin-left: 20px;
}

#navbottom li {
 float: left;                  /* Заставили каждый элемент списка <li>, встать на одну линию */
 width: auto;
 position: relative;
}

#navbottom a {                        /* Все ссылки */
 display: block;               /* Теперь у наших ссылок есть ширина и высота */
 width: auto;
 height: 23px;
 text-align:center;
 font-size:11px;
 padding-top: 10px;
 padding-left: 7px;
 padding-right: 3px;
}
Я схожу с ума или это глючит реальность?
Jabber ID: obey@obey.su
Obey-Kun вне форума Ответить с цитированием
Старый 31.07.2009, 10:53   #6
wall66
Участник клуба
 
Аватар для wall66
 
Регистрация: 04.10.2008
Сообщений: 1,485
По умолчанию

почему-то вы умолчали о свойстве float left
Код:
#wrapper {
 width: 80%;
 min-width: 760px;
}

#footer {
 width: 100%;
}

#navbottom, #navbottom ul {
 list-style: none;             /* Убрали буллеты из нашего списка  */
 margin: 0;                    /* Обнулили отступы margin и ... */
 padding: 0;                   /* ... padding у элементов меню */
 background: #ccc;             /* Фон всего меню */
 float: left;                 /* ширина блока по содержимому */
}

#navbottom {
 margin-left: 20px;
}

#navbottom li {
 float: left;                  /* Заставили каждый элемент списка <li>, встать на одну линию */
 width: auto;
 position: relative;
}

#navbottom a {                        /* Все ссылки */
 display: block;               /* Теперь у наших ссылок есть ширина и высота */
 width: auto;
 height: 23px;
 text-align:center;
 font-size:11px;
 padding-top: 10px;
 padding-left: 7px;
 padding-right: 3px;
}
свободен...
wall66 вне форума Ответить с цитированием
Старый 31.07.2009, 10:58   #7
Obey-Kun
Линуксоид
Участник клуба
 
Аватар для Obey-Kun
 
Регистрация: 31.07.2009
Сообщений: 1,403
По умолчанию

убрал эту строку — пропал фон...
Я схожу с ума или это глючит реальность?
Jabber ID: obey@obey.su
Obey-Kun вне форума Ответить с цитированием
Старый 31.07.2009, 11:02   #8
wall66
Участник клуба
 
Аватар для wall66
 
Регистрация: 04.10.2008
Сообщений: 1,485
По умолчанию

Цитата:
Сообщение от Obey-Kun Посмотреть сообщение
убрал эту строку — пропал фон...
значит не надо было бездумно ее стирать, подумайте что она значит, за что отвечает, и вообще - почитайте про это свойство

как только поймете как это работает - можете перейти к изучению css-свойства clear
свободен...
wall66 вне форума Ответить с цитированием
Старый 31.07.2009, 11:11   #9
Obey-Kun
Линуксоид
Участник клуба
 
Аватар для Obey-Kun
 
Регистрация: 31.07.2009
Сообщений: 1,403
По умолчанию

При добавлении clear: right к #navbottom ничего не изменилось (float:left я вернул).
Вроде бы, это должно было отменить обтекание справа и всё бы встало на свои места, ан нет. Что я понимаю не так?
Я схожу с ума или это глючит реальность?
Jabber ID: obey@obey.su

Последний раз редактировалось Obey-Kun; 31.07.2009 в 11:14.
Obey-Kun вне форума Ответить с цитированием
Старый 31.07.2009, 11:18   #10
wall66
Участник клуба
 
Аватар для wall66
 
Регистрация: 04.10.2008
Сообщений: 1,485
По умолчанию

Цитата:
Сообщение от Obey-Kun Посмотреть сообщение
При добавлении clear: right к #navbottom ничего не изменилось (float:left я вернул).
Вроде бы, это должно было отменить обтекание справа и всё бы встало на свои места, ан нет. Что я понимаю не так?
добавленное свойство очищает очередь правого обтекания (float right) для предыдущих элементов (которых нет)
свободен...
wall66 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Позиционирование двух плавающих DIV внутри одного DIV allocator HTML и CSS 5 22.07.2009 13:48
Вырубился комп, после его включения один из локальных дисков стал глючить - часть файлов не открывается AnthonyTom Компьютерное железо 12 21.06.2009 18:47
поиск слова по его части Рустам Помощь студентам 3 10.03.2009 20:54
div на всю высоту ячейки Nikolay 0001 JavaScript, Ajax 5 30.11.2008 12:14
Растягивающийся DIV и толкающий в низ следующий DIV Суриков HTML и CSS 6 29.08.2008 12:01