Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка по див-ам, несколько мелких вопросов! 
V
    Опции темы
NNaarreekk
Дата 8.2.2009, 15:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 1
Всего: 3



Привет!
Есть несколько вопросов по верстке в див-ах, буду рад помощи:
1.Есть 2 див а, в одном меню, в другом контекст. Как можно поставить их рядом,но без абсолютного позиционирования?
2.Как можно сделать чтоб эти самые дивы меняли размеры в соответствии с размерами окна, а именно один див оставался без изменений а другой  закрывал остальную часть страницы?
3.как можно в CSS скажем изображение поставить в центр див-а (как <center></center> в HTML)?

Я конечно могу все это сделать как нибудь  вручную, с помощю JS или еще чего, но уверен что css дает такую возможность!
PM MAIL WWW   Вверх
Forsaken
Дата 8.2.2009, 15:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



NNaarreekk, 
чтобы один див был справа используйте свойство CSS: 
Код

float: right;

Чтобы скажем див меню был фисированной ширины что слева: задайте ему размер с помощью CSS свойства: 
Код

width:

а второму неуказывайте размер ширины и он займет все пространство родительского элемента, если родительский элемет (тег): body -тогда до края окна (по ширине) браузера.

изображение можно поместить в центр, например задав диву (div) свойство CSS: 
Код

text-align:center 


Надеюсь я правильно понял Вашу задачу

Это сообщение отредактировал(а) Forsaken - 8.2.2009, 16:05
PM MAIL   Вверх
NNaarreekk
Дата 8.2.2009, 17:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 1
Всего: 3



Цитата(Forsaken @  8.2.2009,  17:57 Найти цитируемый пост)
text-align:center 

Работает тока в IE.

Цитата(Forsaken @  8.2.2009,  17:57 Найти цитируемый пост)
float: right;

Можно пример, а то я не понял как это реализовать?

Можешь написать пример, что рядом были 2 дива, один зеленный с шириной 250px и высотой 100% и рядом красный див ширина все остальное место и высота тоже 100%?
Буду очень благодарен!
PM MAIL WWW   Вверх
Forsaken
Дата 8.2.2009, 17:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



Цитата(NNaarreekk @  8.2.2009,  17:34 Найти цитируемый пост)
Работает тока в IE.

http://www.htmlbook.ru/css/text-align.html
Применять можно непосредственно к <img> который в нутри блока
(поже еще напишу про float)

PM MAIL   Вверх
NNaarreekk
Дата 8.2.2009, 18:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 1
Всего: 3



Цитата(Forsaken @  8.2.2009,  19:58 Найти цитируемый пост)
http://www.htmlbook.ru/css/text-align.html

Здесь ничего не нашел про img, сам проверил не сработало.

Код

<div style='text-align:center'><img src='sadsa' /></div>
<div><img src='sadsa'  style='text-align:center'/></div>

Оба этих варианта не работает.
Ты использовал этот метод?
PM MAIL WWW   Вверх
Forsaken
Дата 8.2.2009, 18:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



NNaarreekk, 
Код

<html><title></title>
<body><div style="text-align:center;"><img src="Sprg_mx1.jpg"></img></div></body></html>


проверил на
Firefox 3.x, Opera 10, IE 6, Safari 3.1, Google Chrome (All)

Используйте двойные кавычки  для атрибутов
Иногда может понадобится для блоков конструкция типа: margin-left:auto; margin-right:auto (например чтобы отцентрировать весь документ... и т.д.)

Приду, сейчас напишу про float

Это сообщение отредактировал(а) Forsaken - 8.2.2009, 18:57
PM MAIL   Вверх
NNaarreekk
Дата 8.2.2009, 18:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 1
Всего: 3



Цитата(Forsaken @  8.2.2009,  20:36 Найти цитируемый пост)
<div style="text-align:center;"><img src="Sprg_mx1.jpg"></img></div>

Это работает только в IE.
PM MAIL WWW   Вверх
Forsaken
Дата 8.2.2009, 19:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



NNaarreekk, 
лично проверил в Firefox 2.2, Firefox 3.x, Opera 9.6, Opera 10, IE 6, Safari 3.1, Google Chrome (All), NN 8.1.2
У меня все работает.

Если применить text-align для img то это будет действовать только в потоке текста.
PM MAIL   Вверх
Forsaken
Дата 8.2.2009, 21:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



Код

<html><title></title>
<body style="margin:0px;padding:0px;overflow:hiden">
<div style="background-color:green; width:250px; height:100%;float:left;"></div>
<div style="background-color:red;width:100%;height:100%;"></div>
</body></html>

Работает но в IE6 есть баг визуализации, обойти можно задав margin-right для блока слева отрецательным в три пиксела так:
Код

<html><title></title>
<body style="margin:0px;padding:0px;overflow:hiden">
<div style="background-color:green; width:250px; height:100%;float:left;  margin-right:-3px"></div>
<div style="background-color:red;width:100%;height:100%;"></div>
</body></html>


Это сообщение отредактировал(а) Forsaken - 8.2.2009, 21:56
PM MAIL   Вверх
NNaarreekk
Дата 8.2.2009, 22:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 768
Регистрация: 23.6.2007
Где: Армения

Репутация: 1
Всего: 3



Forsaken, Спасибо, то что надо!

А для text-align все-таки появляются неточности, но не могу сейчас найти (у меня на нескольких сайтах возникала эта проблема!)
PM MAIL WWW   Вверх
Forsaken
Дата 8.2.2009, 22:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



NNaarreekk, 
про баг в IE6 всеже почитайте чтонибудь.. может возникнуть проблема и с отрицатльным отступом..

Что касается text-align -то  если не выйдет кидайте сюда конкретный код.. так будет проще
PM MAIL   Вверх
Forsaken
Дата 9.2.2009, 09:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



Короче чтобы избежать всех багов в ie6 сделайте так лучше:
Код

<html>
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px;}
   #left {background-color:green; width:250px; height:100%;float:left;}
   /* "* html #right" сработает только для ie6 и более ранних, в т.ч. для ie под mac os.. "к сожалению" там нет этого бага, однако его уже практически не испольуют */
   * html #right {position:relative; left:-3px; margin-right:-3px;}
   #right {background-color:red;width:100%;height:100%;}
   </style>
</head>
<body>
   <div id="left"></div>
   <div id="right"></div>
</body>
</html>


Если в документе не указать DOCTYPE, то данный отступ будет иметь место и в IE 7

Если ктонить знает как это решить лучше на этом примере отпишите сюда!

Это сообщение отредактировал(а) Forsaken - 9.2.2009, 09:13
PM MAIL   Вверх
Violator
Дата 9.2.2009, 13:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



Forsaken, 
не совсем правильно
Вы ограничили блоки по высоте. Если уберете в левом блоке бэкграунд, то увидите что правый блок будет под левым, поэтому там не нужно ставить width:100%. У правого блока поставить margin-left на ширину левого блока. Да и для ие6 не нужно ничего делать.
PM MAIL   Вверх
Forsaken
Дата 9.2.2009, 15:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 193
Регистрация: 30.12.2008

Репутация: 3
Всего: 3



Violator, 
Да width:100% это избыточное свойство.
Только с margin-left:250px для правого блока невыходт -вот пример:
Код

<html>
<head>
   <title></title>
   <style type="text/css">
   body {margin: 0px; padding: 0px;}
   #left {background-color:green; width:250px; height:100%;float:left;}
   #right {background-color:red;height:100%;margin-left:250px;}
   </style>
</head>
<body>
   <div id="left"></div>
   <div id="right"></div>
</body>
</html>

Проблема в ie6 остается..
PM MAIL   Вверх
Violator
Дата 9.2.2009, 17:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



Forsaken, 
какая проблема?
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0602 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.