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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 30.11.2010, 17:25   #1
mutabor
Телепат с дипломом
Старожил
 
Аватар для mutabor
 
Регистрация: 10.06.2007
Сообщений: 4,929
По умолчанию Не правильно (или правильно?) работает позиционирование в WebKit

Всем привет. У меня такой вопрос: не работает в некоторых браузерах позиционирование как нужно. Выдрал код из контекста, чтобы легче было разобраться, нужно сделать так, как в первом варианте (чтоб картинка вниз не съезжала). Подскажите, как их побороть (Хром и Сафари)?

Код HTML:
<body>
    <div id="main">
	  <div class="abs" id="lite"><a class="white" href="#">
	  HEIGHT OF KILIMANJARO 19,340 FEET</a>&nbsp;
	  <img id="img" src="klm.jpg" alt="Kilimanjaro"></div>
	</div>
</body>
CSS
Код HTML:
#main {
position:relative;
width:500px;
height:500px;
background-color:gray;
}
div.abs {
position:absolute;
}
#lite {
left:60px;
top:46px;
font-family:sans-serif;
font-size:13px;
word-spacing:1px;
background-color:purple;
}
a.white {
color:white;
}
#img {
float:right;
}
Изображения
Тип файла: jpg prop.jpg (8.9 Кб, 61 просмотров)
Тип файла: jpg wrong.jpg (9.4 Кб, 56 просмотров)
The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen)
Проверь себя! Онлайн тестирование | Мой блог
mutabor вне форума Ответить с цитированием
Старый 01.12.2010, 04:25   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

попробуйте с тегом
Код:
<nobr>
либо в цсс пошаманить с
Код:
vertical-align
у картинки
либо убрать флоэт
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 01.12.2010, 06:08   #3
Alexei91
Заблокирован
Форумчанин
 
Аватар для Alexei91
 
Регистрация: 30.12.2009
Сообщений: 544
По умолчанию

Поэксперементируйте с тэгом -webkit.
http://www.webmasters.by/articles/ht...-gradient.html
http://habrahabr.ru/qa/317/
Цитата:
...используются в Webkit-браузерах (например Safari), которые начинаются с -webkit-, и Gecko-браузеры (например Firefox), которые начинаются с -moz-. Konqueror (-khtml-), Opera (-0-) и Internet Explorer (-ms-) имеют свои собственные проприетарные расширения.
- http://dreamhelg.ru/2009/06/take-you...vel-with-css3/
Темы для WordPress. Русские WordPress шаблоны

Последний раз редактировалось Alexei91; 01.12.2010 в 06:19.
Alexei91 вне форума Ответить с цитированием
Старый 01.12.2010, 09:08   #4
Alex Cones
Trust no one.
Старожил
 
Аватар для Alex Cones
 
Регистрация: 07.04.2009
Сообщений: 6,526
По умолчанию

Обязательно ли использовать два дива? Одним обойтись нельзя?
Код:
<div>
Ссылка
Имага
</div>
На крайняк табличку замутить.
SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА.
МОЙ БЛОГ
GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ
Alex Cones вне форума Ответить с цитированием
Старый 01.12.2010, 17:33   #5
mutabor
Телепат с дипломом
Старожил
 
Аватар для mutabor
 
Регистрация: 10.06.2007
Сообщений: 4,929
По умолчанию

Всё, вопрос решил. Убрал все лишнее, и вернулся к тому, от чего хотел уйти - отступ под картинкой. Отступ убрал с помощью vertical-align:bottom;
Вот здесь я нашел решение http://www.xiper.net/collect/html-an...the-block.html
и заодно понял в чем была проблема. Картинка выравнивалась по базовой линии, и т.к. высотой она 16px, она подрывала крышу div блоку. Из-за этого я и начал float городить, чтобы как-то выровнять.
The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen)
Проверь себя! Онлайн тестирование | Мой блог
mutabor вне форума Ответить с цитированием
Старый 09.12.2010, 09:54   #6
dekameron
Форумчанин
 
Аватар для dekameron
 
Регистрация: 27.04.2010
Сообщений: 185
По умолчанию

если float задан для картинки, то попробуйте в HTML коде ее первой вписать
Код:
<body>
    <div id="main">
	  <div class="abs" id="lite">
                  <img id="img" src="klm.jpg" alt="Kilimanjaro" />
                  <a class="white" href="#">
	  HEIGHT OF KILIMANJARO 19,340 FEET</a>&nbsp;</div>
	  
	</div>
</body>
Помог - тырк на весы
dekameron вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не правильно работает функция mansp Общие вопросы C/C++ 15 07.11.2010 16:35
Программа работает не правильно artem611 Паскаль, Turbo Pascal, PascalABC.NET 2 22.09.2010 07:49
Не правильно работает запрос ww01031977 Microsoft Office Access 12 21.04.2010 10:52
программа работает. правильно ли? getUp Общие вопросы C/C++ 10 26.03.2010 07:07
Не правильно работает программа Virus_L Помощь студентам 0 28.12.2009 22:52