для UL не указан ID, потому правила и не применяются
поясните, пожалуйстаOriginally posted by Xepec@Apr 17 2007, 13:03
[b]ЗЫ по поводу верстики дивами/таблицами: дивами возможно перспективнее (ибо их развивают), но на данный момент корявее.
для UL не указан ID, потому правила и не применяются
поясните, пожалуйстаOriginally posted by Xepec@Apr 17 2007, 13:03
[b]ЗЫ по поводу верстики дивами/таблицами: дивами возможно перспективнее (ибо их развивают), но на данный момент корявее.
Вроде как все применяется... толькo все LI оочень широкие. Если в цсс прописать widht к li, то все становится нормально...
По поводу пояснить: что пояснить, корявость, перспективность?
[/quote]Originally posted by Xepec@Apr 17 2007, 13:47
Вроде как все применяется... толькo все LI оочень широкие. Если в цсс прописать widht к li, то все становится нормально...
По поводу пояснить: что пояснить, корявость, перспективность?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
в приведенном тобой коде отсутствует идентификатор TopMenuContainer, потому стили никогда к нему не применятся пока у тэга UL не появится какой-нить родительский элемент с соответствующим ID.
что ты имел в виду под корявостью, то и требует пояснения
А, вот ты (можно на ты? или лучше на Вы?) о чем, все это дело у меня в div TopMenuContainer (тут урезанный код) и поэтому к ul и к li все применяется...
Проблема с шириной li.
Хмммм... А как так получилось, что мой ответ появился перед твоим постом?
А, вот ты о чем, все это дело у меня в div TopMenuContainer (тут урезанный код) и поэтому к ul и к li все применяется...
Проблема с шириной li.
Под корявостью имел в виде разное отображение в браузерах, и все те хаки и фичи, о которых уже сто раз говорилось.
Нет никаких описываемых Вами проблем. Ни в одном из браузеров.
Можете проверить:
Так что ищите Вашу проблему в другом месте Вашего кода...Код:<!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>
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
- [Только зарегистрированные пользователи могут видеть ссылки. ]
Нашел ошибку:
Все дело было в том, что для <a> ктоторые в каждом[*] не был определен float: left;
Из-за этого все косячилось.
Огромное спасибо за помощь!
Еще вопрос :blush2:
Про position:absolute;
Что-то не пойму как он работает.
HTMLBook:
Но, почему-то, иногда absolute он считает от браузера, а иногда от div'a родителя...Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
От чего это зависит? От position родителя?
[Посты не плодите, есть замечательная кнопка "правка"]
[/quote]
Если для пункта списка[*] задан float: left;, то задавать это же свойство для находящейся в нем ссылки <a> совсем не обязательно. Должно работать и так...
<div class='quotetop'>Цитата</div>Ересь полная.Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.[/b]
[/quote]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]
дивами не корявее, просто поддержка стандартов во всемилюбимом браузере - далека от идеала
да, отсчет идет о позиции родителя, если для него указан position: relative (даже без указания значений) либо от элемента <body>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* родителя?
[/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>
[/quote]
Павел, не задавай для body position: relative; и сам все увидишь...
И body {height: 100%;} когда-нибудь все-таки аукнется... ))
[/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. Как с этим бороться?
[/quote]
Вот Ваша проблема: a {height: 40px;}. Уберите эту высоту. Она не нужна. Тогда и флоат для ссылки не потребуется. Кстати, вот это – padding: 9 19 9 19; – у Вас не работает. Необходимо задавать единицы измерения для значений свойств.
[/quote]
Разносить по углам блоки рекомендую не флоатами, а исключительно абсолютным позиционированием.
[/quote]
Не Вы первый. ))
Лично я обычно делаю так:
С правым краем у IE проблемы и без бордера, кстати...Код:* html #AdvertCornerTR {right: -2px;}
Как ни странно, но работаетOriginally posted by Aykroyd+Apr 17 2007, 20:04-->Тогда ссылка по высоте получается маленькая, и hover непосредственно над ней работает, а не над боксом с height: 40px;.Вот Ваша проблема: a {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]Не Вы первый. ))
Лично я обычно делаю так:
С правым краем у IE проблемы и без бордера, кстати...Код:* html #AdvertCornerTR {right: -2px;}
Чего делать?
ЗЫ добавленно через час...
Что-то я совсем не понимаю...
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>
[/quote]
хм и правда... а про body... пока еще не аукалось =)
не понял вопроса в контексте обсуждаемой проблемыOriginally posted by Xepec+Apr 18 2007, 07:32--><div class='quotetop'>Цитата(Xepec @ Apr 18 2007, 07:32)</div>diasplay: block для ссылки и она займет всю область liТогда ссылка по высоте получается маленькая, и hover непосредственно над ней работает, а не над боксом с height: 40px;.[/b]
<!--QuoteBegin-Xepec@Apr 18 2007, 07:32
А как избежать переноса строки? Ставить Height?
Пробывал, тогда в опере едет...
Чего делать?
[/quote]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'>[Только зарегистрированные пользователи могут видеть ссылки. ]
Эта тоже. Но в принципе все понятно, надо делать вложенные дивы.
Теперь новая проблема:
Есть формочка с инпут текст и картинкой. В эксплорере не правильно отображается см аттач... такое ощущение, что align="top" как-то не так работает.
Решилось, когда поставил float к input и img. Но не слишком ли это?
[/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>
Не слишком, иногда делаем ещё вот так:
input { vertical-align: middle; }
А вообще формы это больная тема для всех браузеров.