В сотый раз об одном и том же...

**Zigzag** · 17.04.2007, 16:54

Originally posted by Xepec@Apr 17 2007, 13:47
Вроде как все применяется... толькo все LI оочень широкие. Если в цсс прописать widht к li, то все становится нормально...

По поводу пояснить: что пояснить, корявость, перспективность?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

в приведенном тобой коде отсутствует идентификатор TopMenuContainer, потому стили никогда к нему не применятся пока у тэга UL не появится какой-нить родительский элемент с соответствующим ID.

что ты имел в виду под корявостью, то и требует пояснения

**Xepec** · 17.04.2007, 16:55

Хмммм... А как так получилось, что мой ответ появился перед твоим постом?

А, вот ты о чем, все это дело у меня в div TopMenuContainer (тут урезанный код) и поэтому к ul и к li все применяется...
Проблема с шириной li.

**Xepec** · 17.04.2007, 16:57

Под корявостью имел в виде разное отображение в браузерах, и все те хаки и фичи, о которых уже сто раз говорилось

.

**Aykroyd** · 17.04.2007, 18:34

Нет никаких описываемых Вами проблем. Ни в одном из браузеров.

Можете проверить:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul {height: 40px; border: 1px solid #ff0000;}
li {display: block; float: left; border: 1px solid #ff0000;}
</style>
</head>
<body>
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
</body>
</html>

Так что ищите Вашу проблему в другом месте Вашего кода...

**Xepec** · 17.04.2007, 18:51

Нашел ошибку:
Все дело было в том, что для <a> ктоторые в каждом[*] не был определен float: left;
Из-за этого все косячилось.

Огромное спасибо за помощь!

Еще вопрос :blush2:
Про position:absolute;
Что-то не пойму как он работает.
HTMLBook:

Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

Но, почему-то, иногда absolute он считает от браузера, а иногда от div'a родителя...
От чего это зависит? От position родителя?

[Посты не плодите, есть замечательная кнопка "правка"]

**Aykroyd** · 17.04.2007, 19:26

Originally posted by Xepec@Apr 17 2007, 18:51
Нашел ошибку:
Все дело было в том, что для <a> ктоторые в каждом[*] не был определен float: left; Из-за этого все косячилось.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если для пункта списка[*] задан float: left;, то задавать это же свойство для находящейся в нем ссылки <a> совсем не обязательно. Должно работать и так...

<div class='quotetop'>Цитата</div>

Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.[/b]

Ересь полная.

Originally posted by Xepec@Apr 17 2007, 18:51
Но, почему-то,* иногда absolute он считает от браузера, а иногда от div'a родителя...
От чего это зависит? От position* родителя?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
[Только зарегистрированные пользователи могут видеть ссылки. ]

**Zigzag** · 17.04.2007, 21:48

Originally posted by Xepec@Apr 17 2007, 13:57
Под корявостью имел в виде разное отображение в браузерах, и все те хаки и фичи, о которых уже сто раз говорилось .
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

дивами не корявее, просто поддержка стандартов во всемилюбимом браузере - далека от идеала

Originally posted by Xepec+Apr 17 2007, 15:51--><div class='quotetop'>Цитата(Xepec @ Apr 17 2007, 15:51)</div>

Нашел ошибку:
Все дело было в том, что для <a> ктоторые в каждом[*] не был определен float: left;
Из-за этого все косячилось.[/b]

это не причина, флоатить ссылку абсолютно не нужно
<!--QuoteBegin-Xepec@Apr 17 2007, 15:51
Огромное спасибо за помощь!

Еще вопрос* :blush2:
Про position:absolute;
Что-то не пойму как он работает.
HTMLBook:

Но, почему-то,* иногда absolute он считает от браузера, а иногда от div'a родителя...
От чего это зависит? От position* родителя?

да, отсчет идет о позиции родителя, если для него указан position: relative (даже без указания значений) либо от элемента <body>

**Aykroyd** · 17.04.2007, 22:03

Originally posted by Zigzag@Apr 17 2007, 21:48
либо от элемента <body>
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Поправлю. )
Не от элемента <body>, а от окна браузера.

**Zigzag** · 17.04.2007, 22:44

Originally posted by Aykroyd@Apr 17 2007, 19:03
Поправлю. )
Не от элемента <body>, а от окна браузера.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

нет, если body по ширине будет меньше окна, тогда можно четче увидеть, от чего отсчет идет

посмотри вот это в браузере

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
****<head>
 *<title>webDev</title>
 *<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 *<meta http-equiv="Content-Language" content="en" />
 *<meta name="description" content="" />
 *<meta name="keywords" content="" />
 *<meta name="copyright" content="" />
 *<meta name="robots" content="all" />
 *<link rel="stylesheet" type="text/css" media="screen, projection" href="css/all-screen.css" />
 *<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 *<style type="text/css">
 * *html { width: 100%; height: 100%; background: maroon; }
 * *body { width: 50%; height: 100%; margin-left:-25%; position: relative; left: 50%; background: silver; }
 * *div { width: 100px; height: 100px; position: absolute; left: 100px; top: 100px; background: red; }
 *</style>
****</head>
****<body>
 *<div></div>
****</body>
</html>

**Aykroyd** · 17.04.2007, 22:49

Originally posted by Zigzag@Apr 17 2007, 22:44
нет, если body по ширине будет меньше окна, тогда можно четче увидеть, от чего отсчет идет

посмотри вот это в браузере
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Павел, не задавай для body position: relative; и сам все увидишь...
И body {height: 100%;} когда-нибудь все-таки аукнется... ))

**Xepec** · 17.04.2007, 23:32

Originally posted by Zigzag@Apr 17 2007, 17:48
...это не причина, флоатить ссылку абсолютно не нужно...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Хмммм... Действительно, когда я добавлял флоат, я тоже об этом подумал.
Стиль ссылки у меня определяется так:
Судя по всему, она переопределяет li, но почему?

Код:

#TopMenuContainer li a
{
****text-decoration: none;
****color: 223344;
****display: block; 
****float: left;
****height:40px;
****padding: 9 19 9 19;
****border: 0px;
****background: *url(img/top_menu_bg.png) repeat-x 0 0;
}

Такой еще вопрос:

Делаю рамку с круглыми краями, вот так:

Код:

#AdvertContainer{ position:relative; background: #ffffff 0 0; height:230; width:245; border: 1px solid #50656f; margin: 0px; text-align: left; padding: 0 0 0 0; font-size: 12;}
#AdvertCornerTL { float: left; background: url(img/advert/corner_tl.png) no-repeat; width:5px; top: -1px; left: -1px; position: absolute;}
#AdvertCornerTR { float: right; background: url(img/advert/corner_tr1.png) no-repeat; width:5px; top: -1px; right: -1px; position: absolute;}
#AdvertCornerBL { float: left; background: url(img/advert/corner_bl.png) no-repeat 0 bottom; bottom: -1px; width:5px; left: -1px; position: absolute;padding:0px; margin:0px;}



 *<div id="AdvertContainer"> *****
 *****<div id="AdvertCornerTL"></div>****
 *****<div id="AdvertCornerTR"></div>
 *****<div id="AdvertCornerBR"></div>
 *****<div id="AdvertCornerBL"></div>****
 *</div>

В ие правые уголки левее чем надо на один пиксел.

Выяснилось, что при добавлении бордера опера и ие по разному определяют right. Как с этим бороться?

**Aykroyd** · 18.04.2007, 00:04

Originally posted by Xepec@Apr 17 2007, 23:32
Хмммм... Действительно, когда я добавлял флоат, я тоже об этом подумал.
Стиль ссылки у меня определяется так:
Судя по всему, она переопределяет li, но почему?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вот Ваша проблема: a {height: 40px;}. Уберите эту высоту. Она не нужна. Тогда и флоат для ссылки не потребуется. Кстати, вот это – padding: 9 19 9 19; – у Вас не работает. Необходимо задавать единицы измерения для значений свойств.

Originally posted by Xepec@Apr 17 2007, 23:32
Такой еще вопрос:
Делаю рамку с круглыми краями, вот так:
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Разносить по углам блоки рекомендую не флоатами, а исключительно абсолютным позиционированием.

Originally posted by Xepec@Apr 17 2007, 23:32
В ие правые уголки левее чем надо на один пиксел.* Выяснилось, что при добавлении бордера опера и ие по разному определяют right. Как с этим бороться?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не Вы первый. ))
Лично я обычно делаю так:

Код:

* html #AdvertCornerTR {right: -2px;}

С правым краем у IE проблемы и без бордера, кстати...

**Xepec** · 18.04.2007, 10:32

Originally posted by Aykroyd+Apr 17 2007, 20:04-->

Вот Ваша проблема: a {height: 40px;}. Уберите эту высоту. Она не нужна.

Тогда ссылка по высоте получается маленькая, и hover непосредственно над ней работает, а не над боксом с height: 40px;.

<!--QuoteBegin-Aykroyd@Apr 17 2007, 20:04
[b]Тогда и флоат для ссылки не потребуется. Кстати, вот это – padding: 9 19 9 19; – у Вас не работает. Необходимо задавать единицы измерения для значений свойств.

Как ни странно, но работает

. Но всерано спасибо за совет! когда буду чистить код все это обязательно исправлю...

Originally posted by Aykroyd+Apr 17 2007, 20:04-->

Разносить по углам блоки рекомендую не флоатами, а исключительно абсолютным позиционированием.

А как избежать переноса строки? Ставить Height?

<!--QuoteBegin-Aykroyd@Apr 17 2007, 20:04
[b]Не Вы первый. ))
Лично я обычно делаю так:

Код:

* html #AdvertCornerTR {right: -2px;}

С правым краем у IE проблемы и без бордера, кстати...

Пробывал, тогда в опере едет...

Чего делать?

ЗЫ добавленно через час...
Что-то я совсем не понимаю...
margin-top в ие тоже не работает?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head>
<body>

****<style type="text/css">
 *#id0
 *{
 *****background: url(img/grid.gif) repeat 0 0;
 *****padding: 10px;
 *}
 *
 *#id1
 *{
 *****width: 100;
 *****height: 100;
 *****margin-top: 400px;
 *****padding: 10px;****
 *****border: 1px solid #ff0000;
 *}
****</style>
****
****<div id="id0">
 *<div id="id1">
 *****Text Text Text Text
 *</div>
****</div>
****
</body>
</html>

**Zigzag** · 18.04.2007, 14:10

Originally posted by Aykroyd@Apr 17 2007, 19:49
Павел, не задавай для body position: relative; и сам все увидишь...
И body {height: 100%;} когда-нибудь все-таки аукнется... ))
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

хм и правда... а про body... пока еще не аукалось =)

Originally posted by Xepec+Apr 18 2007, 07:32--><div class='quotetop'>Цитата(Xepec @ Apr 18 2007, 07:32)</div>

Тогда ссылка по высоте получается маленькая, и hover непосредственно над ней работает, а не над боксом с height: 40px;.[/b]

diasplay: block для ссылки и она займет всю область li

<!--QuoteBegin-Xepec@Apr 18 2007, 07:32
А как избежать переноса строки? Ставить Height?
Пробывал, тогда в опере едет...
Чего делать?

не понял вопроса в контексте обсуждаемой проблемы

**Xepec** · 18.04.2007, 17:06

Originally posted by Zigzag+Apr 18 2007, 10:10--><div class='quotetop'>Цитата(Zigzag @ Apr 18 2007, 10:10)</div>

diasplay: block для ссылки и она займет всю область li[/b]

Вроде не помогает... Точнее она и так блок.
Сейчас поменял доктайп на стрикт... И проблема потеряла актуальность
<!--QuoteBegin-Zigzag@Apr 18 2007, 10:10
не понял вопроса в контексте обсуждаемой проблемы
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Эта тоже. Но в принципе все понятно, надо делать вложенные дивы.

Теперь новая проблема:

Есть формочка с инпут текст и картинкой. В эксплорере не правильно отображается см аттач... такое ощущение, что align="top" как-то не так работает

.
Решилось, когда поставил float к input и img. Но не слишком ли это?

**agat** · 18.04.2007, 18:25

Не слишком, иногда делаем ещё вот так:

input { vertical-align: middle; }

А вообще формы это больная тема для всех браузеров.

**Zigzag** · 18.04.2007, 18:57

а что на картинке не так, не вижу никакого vertical-align

**Aykroyd** · 18.04.2007, 21:56

Originally posted by Zigzag@Apr 18 2007, 14:10
а про body... пока еще не аукалось =)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Раз уж речь зашла, и тема вполне располагает, приведу конкретный пример на тему "Чем может быть чревато body {height: 100%;}":

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Почему нельзя body {height: 100%;}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {height: 100%;}
body {background: #CCFFFF; height: 100%; position: relative;}
#footer {background: #FFCCFF; width: 100%; height: 200px; position: absolute; bottom: 0px;}
p {margin: 6px 10px;}
</style>
</head>

<body>
Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

Основной контент
Основной контент
Основной контент
Основной контент
Основной контент

<div id="footer">


Это – абсолютно спозиционированный футер высотой в 200px.</p>


Если для body задана высота в 100%, данный футер не будет "отъезжать" вниз при наполнении body контентом, который превышает одну полную высоту окна браузера (вертикальный скролл).</p>


Конечно же, это касается только "нормальных" браузеров. IE, в отличие от них, неправильно интерпретирует свойство height. Оно в нем работает как раз так, как min-height в нормальных браузерах.</p>


В связи с вышеизложенным, наиболее правильной на мой взгляд является следующая констукция:</p>


body {min-height: 100%;}</p>


* html body {height: 100%;}</p>
</div>
</body>
</html>

**Xepec** · 19.04.2007, 00:33

Originally posted by Zigzag@Apr 18 2007, 14:57
а что на картинке не так, не вижу никакого vertical-align
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Просто к моменту написания поста, уже переделал через флоаты и скриншот было не с чего делать...
Проблема была в том, что опера и ие по разному понимали в-алигн элементов с бордером и без. (У эдита был бордер, а у кнопки нет и они в эксплорере находились на разной высоте.)

О, как вариант можно бордер у кнопки на хтмле написать.

**Aykroyd** · 19.04.2007, 01:17

Originally posted by Xepec@Apr 18 2007, 10:32
Тогда ссылка по высоте получается маленькая, и hover непосредственно над ней работает, а не над боксом с height: 40px;.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Есть такой момент. Это я проглядел, честно говоря. У IE извечные сюрпризы. Наверное, оптимальным решением здесь действительно будет float: left; для ссылки. Но не для того, для чего это свойство используется обычно, а для того, чтобы в IE включилось для ссылки специфическое свойство hasLayout. При этом для ссылки уже не обязательно задавать display: block; и height: 40px;. Все будет работать и так.

Как альтернатива float: left; может также рассматриваться еще вот такая конструкция:

Код:

* html a {display: inline-block;}

Она тоже надлежащим образом хакнет IE и заставит занимать ссылку все пространство родительского элемента. Но это уже более мудреное решение, т.к. float: left; – и короче, и проще.

Originally posted by Xepec@Apr 18 2007, 10:32
Как ни странно, но работает . Но всерано спасибо за совет! когда буду* чистить код все это обязательно исправлю...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Могу даже объяснить почему работает. Вы доктайп свой видели?
Поставьте правильный (полный) доктайп – и работать не будет. ))
Потому что не должно... Без правильного доктайпа, кстати, Ваш документ рендерится в браузерах не по стандартам.

Originally posted by Xepec@Apr 18 2007, 10:32
А как избежать переноса строки? Ставить Height?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Простите, какой еще перенос строки в абсолютном позиционировании?

Originally posted by Xepec@Apr 18 2007, 10:32
Пробывал, тогда в опере едет...
Чего делать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В Опере не может ничего ехать. Потому что конструкцию, начинающуюся с * html, Опера не понимает... )

Originally posted by Xepec@Apr 18 2007, 10:32
Что-то я совсем не понимаю...
margin-top в ие тоже не работает?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Бывает, что не работает. ))

Тема: В сотый раз об одном и том же...

Опции темы

Поиск по теме

Отображение

Похожие темы

нужен дизайнер + верстальщик в одном лице

Два дисплея в одном ноутбуке

Информация меняется только в одном окне таблицы

собираем все приведы в одном месте!

Сотый пост:)

Ваши права