X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> двойное веритикальное выравнивание, проблема с ie6
janeLuk
janeLuk
Topic Starter сообщение 27.2.2010, 3:51; Ответить: janeLuk
Сообщение #1


Всем доброго времени суток!!! буду очень признательна за помощь!!!
задача: нужно выровнить по вертикали (middel) два блока, расположенных в разных концах одной строки, а затем в каждом из них сделать тоже самое. Делаю с помощью inline-block и пустого span и text-align: justify (чтобы разнести их по противоположным сторонам) и потом тоже самое в каждом из блоков
проблема вот в чем: все работает замечательно, но не в ie, он оставляет пустое место под второй span, несмотря на line-height: 0px; font-size: 0px; height: 0px;, а что особенно интересно со span, который расстягивает общий блок все замечательно
может быть кто-нибудь знает как это исправить

если непонятно объяснила (чем страдаю) вот рисунок и код
задача
[attachment=36298:Untitled-1.jpg]

решение

HTML

<body>
<div id="wrap">
  <div id="block1">
    <img src="image/spacial.gif" />
    <div>Специальное<br />предложение</div>
    <span></span>
  </div>
  <div id="block2">
    <img src="image/spacial2.gif" />
    <div>Специальное<br>предложение</div>
    <span></span>
  </div>
  <span></span>  
</div>
</body>


css

*{
  padding: 0;
  margin: 0;
}
body{  background:#333333;}
#wrap{
  width: 80%;
  margin: 0 auto;
  border: 1px #000066 solid;
  text-align: justify;
}
#wrap span{
  display:-moz-inline-box;
  display: inline-block;
  width: 100%;
  height: 0px;
/*  border: 1px #000066 solid;*/
}

#block1, #block2{
  width: 40%;
  background: url(../image/bg.gif) #CCCCCC 0 center repeat-x;
  display:-moz-inline-box;
  display: inline-block;
  vertical-align: middle;
}
#block1 img, #block2 img{
  margin-left: 10px;
  display:-moz-inline-box;
  display: inline-block;
  vertical-align: middle;  
}
#block1 div, #block2 div{
  font-size: 32px;
  color: #FFFFFF;
  font-weight: bolder;
  display:-moz-inline-box;
  display: inline-block;
  vertical-align: middle;
  padding-right: 15px;
}


css для IE
#block1, #block2, #block1 img, #block2 img, #block1 div, #block2 div{ display:inline; }
#wrap span{ line-height: 0px; font-size: 0px; border: 1px #00FFFF solid; display:inline;}
#wrap{ text-justify: newspaper;}
#block1 div, #block2 div {text-align: right;}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 27.2.2010, 9:12; Ответить: klenovnn
Сообщение #2


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

Делаешь таблицу с двумя ячейками:
HTML:
<table id="adv">
<tr>
<td>Специальное предложение<br /><a href="#"><img src="/img.gif" alt="" height="" width="" /></a></td>
<td>Специальное предложение<br /><a href="#"><img src="/img.gif" alt="" height="" width="" /></a></td>
<tr>
</table>

CSS:
table#adv {border-collapse:collapse; height="200px" width:100%;}


И в таком случае изображение будут на ровне.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
janeLuk
janeLuk
Topic Starter сообщение 27.2.2010, 11:53; Ответить: janeLuk
Сообщение #3


а это прилично - посреди блочного когда вставлять таблицу??? вообще я сознательно отказалась от таблицы и js, хотя сейчас наверное выхода нет, придется прибегать к его помощи((( может все таки кто-то знает как с этим багом бороться?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 27.2.2010, 12:02; Ответить: Webmaster_hb
Сообщение #4


janeLuk, по поводу блочной верстки в целом, я конечно двумя руками "ЗА"!
но я против любых хаков, и разных стилей под разные браузеры
ответ очень простой, таким образом, мы подстраиваемся под разные браузеры, и чем больше браузеров и версий - тем еще больше мы подстраиваемся, и со временем ваш код с хаками, всё равно станет невалидным либо плохо работающим

поэтому в некоторых местах, приходится использовать гарантированно рабочий метод
с valign=middle я использую таблицы!, кроме одного случая, когда отцентрировать надо картинки - тогда оптимальным решением будет положить эти картинки на фон, и задать им позиционирование по центру
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 27.2.2010, 12:16; Ответить: klenovnn
Сообщение #5


(janeLuk @ 27.2.2010, 13:53) *
а это прилично - посреди блочного когда вставлять таблицу??? вообще я сознательно отказалась от таблицы и js, хотя сейчас наверное выхода нет, придется прибегать к его помощи((( может все таки кто-то знает как с этим багом бороться?


А что здесь такого. Хорошо, если весь макет сайта написан на дивах аккуратно и без хаков. Сайт загружается даже красиво и постепенно.

Вам необходимо уже разместить материалы внутри сайта, поэтому таблицу разместить это вполне логично. А что если потребуется разместить прайс лист размером 10 ячеек на 1500 строк, дивами вам ни когда не справится и вы будете тоже задавать себе вопрос о том, прилично это или нет?

>> Знаете почему сексом на красной площади нельзя заниматься?
>> За..бут советами!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
janeLuk
janeLuk
Topic Starter сообщение 27.2.2010, 12:16; Ответить: janeLuk
Сообщение #6


да, css хаков-то в сущности не много, а вот то что для IE js нужно применять это печально!!!!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
janeLuk
janeLuk
Topic Starter сообщение 27.2.2010, 20:58; Ответить: janeLuk
Сообщение #7


(klenovnn @ 27.2.2010, 14:16) *
А что если потребуется разместить прайс лист размером 10 ячеек на 1500 строк, дивами вам ни когда не справится и вы будете тоже задавать себе вопрос о том, прилично это или нет?

ну речь же не о том, чтобы табличные данные дивами верстать, это элемент дизайна еще и на главной странице, не хотелось бы портить краткую и лаконичную дивовскую разметку таблицей, я придумала как доделать, надо тока проверить....
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 28.2.2010, 12:07; Ответить: klenovnn
Сообщение #8


Да какая красота??? Я сейчас разрабатываю крупный портал, у меня данных там тысячи строк, и моя главная задача - чтобы минимум лишнего кода и во всех браузерах все работало (ie6 я не игнорирую), и если выбор стоит перед хаками или таблицой, смело пишу таблицу. Дело не в красоте: 1 ~ выебоны, типа умный; 2 ~ не понимание задачи; 3 ~ комплекс

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
 10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Проблема с админкой
 5 Prok 2334 29.7.2019, 20:04
автор: dvakarandasha
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
 0 press74 4992 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема с таблицей, которая выводится через скрипт
 7 vanchester 1339 15.2.2019, 19:06
автор: Artos_mw
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПроблема в тегах при сохранении контента
 1 Kord18 1426 13.3.2018, 18:19
автор: Evgeniy3200


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 18.4.2024, 4:36

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet