Другие языки программирования и технологии

Здравствуйте! Помогите пожалуйста с версткой Html+css!

Помогите пожалуйста с версткой Html+css!

Есть три кнопки, расположенные в одну строку Все было бы отлично, но две из них при изменении размера браузера (сужении) уезжают в никуда Вот код css контейнера div этих кнопок:
#obs_img
{
float:left;
border: 1px solid red;
width:230px;
height:70px;
position:relative;
margin-top:10px;
left:16.6%;
z-index:1;
margin-left:-115px;
}

#ad_img
{ border: 1px solid red;
float:right;
width:230px;
height:70px;
position:absolute;
margin-top:10px;
left:50%;

margin-left:-115px;
z-index:1;
}

#job_img {
border: 1px solid red;
float:right;
width:230px;
height:70px;
left:83%;
position:absolute;
margin-top:10px;
margin-left:-115px;
z-index:3;
}
Как я понимаю на это влияет свойство position Но если position будет не absolutу - кнопки не распологаются как нужно.

P.S. свойство min-width не предлагать, так как оно и так прописано классу body в css (min-width:900px)
АЧ
Александр Чулков
453
1) Не используйте абсолютное позиционирование без нужды.
Если используете абсолютное позиционирование, то помните, что элемент позиционируется относительно окна, за исключением одного случая - когда родительский для него элемент имеет position: relative; Тогда элемент позиционируется относительно родителя. Так что если хотите сохранить все как есть, родительскому контейнеру для этих кнопок добавьте position: relative;

2) Не используйте float без необходимости. Float для абсолютно позиционированных элементов бесполезен.

Для того, чтобы выстроить кнопки, картинки, и другие элементы в ряд, часто проще использовать свойство display: inline (если размеры не обязательны) , или display: inline-block; (если надо указать размеры блоков) . При этом блоки начинают себя вести как строчные элементы. Т. е. располагаются в строку. Но есть одно "но". Если между тегами этих блоков в коде HTML есть пробелы, или переносы строк, то между блоками появятся промежутки - как между обычными словами. Если хотите этого избежать и сохранить форматирование кода, то надо обнулять размер шрифта для родительского блока. А в самих элементах - восстанавливать по необходимости. Либо просто писать теги без промежутков.
Если воспользуетесь display: inline-block; для кнопок, то уберете и float, и position: absolute; (и всякие отрицательные отступы, left, z-index...)
Достаточно будет правильно расположить общий контейнер для этих кнопок и задать нужные размеры.

Для IE6-7 не работает display: inline-block; Исправление: после display: inline-block; добавить: //display: inline; //zoom:1;

См. примеры тут: http://webdevelopernotes.ru/2011/09/05/display-inline-block/
Анатолй Лиманюк
Анатолй Лиманюк
60 969
Лучший ответ
а где html?
Александр Климов
Александр Климов
17 178
На кой черт тут position !?!И пропиши min-width для блока а не для боди
ДМ
Дудкин Мирослав
10 416

Похожие вопросы