Здесь больше нет рекламы. Но могла бы быть, могла.

Страницы: 1 2 [Все]   Вниз

Автор Тема: Вопросы по HTML и т.п.  (Прочитано 7346 раз)

0 Пользователей и 2 Гостей просматривают эту тему.

Corwin Celebdil›

  • Гость
Вопросы по HTML и т.п.
« : 24/11/2005, 14:44:40 »
То ли я тупой, то ли еще что, но

Код:
<html>
<head>
<style type="text/css">
div {border:1px solid red}
#menu {position:absolute; width:175px; height:   100%;}
#title1{position:absolute; left:175px; height:81px; width:561px;}
#part1 {position:absolute; left:736px; height:81px; width:14px; background-color:blue;}
#part2 {position:absolute; left:750px; right:14px; height:81px; background-color:yellow;}
#part3 {position:absolute; top:0px; right:0px; width:14px; height:81px; background-color:green;}
</style>
</head>
<body leftmargin="0px" topmargin="0px">
<div id="menu"></div>
<div id="title1"></div>
<div id="part1"></div>
<div id="part2"></div>
<div id="part3"></div>
</body>
</html>

В Опере и Мозилле работает, ИЕ желтый див отказывается отображать :(
Помогите кто чем может (только без ругани в сторону ИЕ), а то мозги вошли в ступор!

               

               
Записан

Ольгa›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #1 : 24/11/2005, 15:01:36 »
А ты на него width задать не пробовал?

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #2 : 24/11/2005, 15:27:49 »
А, забыл уточнить. Дело в том, что он мне нужен с динамически изменяющейся шириной. Т.е. при большом разрешении экрана он д.б. широким, при маленьком - узким.

               

               
Записан

Scath›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #3 : 24/11/2005, 16:40:19 »
Всё равно поставить width, хотя бы 0, потом уже изменять скриптом.

Или вставить что-то внутрь, то же &nbsp;, потому что пустой фргамент оно отображать не будет.

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #4 : 24/11/2005, 16:47:30 »
Ослик не умеет работать одновременно с left и right.

Смотри, например, сюда (http://xpoint.ru/forums/internet/html_css/css/thread/33983.xhtml).

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #5 : 24/11/2005, 17:40:10 »

Цитата из: Аццкая сотона on 24-11-2005, 16:47:30
Смотри, например, сюда (http://xpoint.ru/forums/internet/html_css/css/thread/33983.xhtml).



О, спасибо. Век живи - век учись :)
Я вот думаю сейчас что лучше - использовать предложенную там конструкцию
Код:
<!--[if IE]><link rel="stylesheet" type="text/css" href="/css/ie.css"><![endif]-->

или подставлять нужные значения в css с помощью php :)

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #6 : 24/11/2005, 17:45:59 »
Отказаться от абсолютного позиционирования, имхо, и юзать float'ы.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #7 : 25/11/2005, 12:44:56 »
А можно для тупых показать на моём примере? :) А то у меня не получилось :(

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #8 : 25/11/2005, 12:55:55 »
Код:
<html>
<head>
<style type="text/css">
div {border:1px solid red}
#menu {float:left; width:175px; height: 100%;}
#title1{float:left; height:81px; width:561px;}
#part1 {float:left; height:81px; width:14px; background-color:blue;}
#part2 {float:left; height:81px; background-color:yellow;}
#part3 {float:left; width:14px; height:81px; background-color:green;}
</style>
</head>
<body leftmargin="0px" topmargin="0px">
<div id="menu">123</div>
<div id="title1">456</div>
<div id="part1">789</div>
<div id="part2">0</div>
<div id="part3">1</div>
</body>
</html>

И далее по вкусу.

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #9 : 25/11/2005, 12:57:01 »
И за
Код:
leftmargin="0px" topmargin="0px"
 тебя надо больно бить :)

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #10 : 25/11/2005, 14:20:14 »
Меня гораздо больше интересует что дам в "далее по вкусу" :) Потому что поставленная задача не выполняется: желтый див не заполняет свободное место.

Цитата из: Аццкая сотона on 25-11-2005, 12:57:01
И за
Код:
leftmargin="0px" topmargin="0px"
 тебя надо больно бить :)



Да-да, я в курсе :) Хиф уже подсказывал как делать (только немного неправильно подсказал :)).

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #11 : 25/11/2005, 16:45:49 »

Цитата из: Corwin Celebdil on 25-11-2005, 14:20:14
Меня гораздо больше интересует что дам в "далее по вкусу" :) Потому что поставленная задача не выполняется: желтый див не заполняет свободное место.


Задавай width, экспериментируй с clear и дальше с float. Если не получится - ночером посмотрю сам.

Цитата из: Corwin Celebdil on 25-11-2005, 14:20:14
Да-да, я в курсе :) Хиф уже подсказывал как делать (только немного неправильно подсказал :)).



Код:
body {margin:0;padding:0}


               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #12 : 25/11/2005, 17:23:59 »

Цитата из: Аццкая сотона on 25-11-2005, 16:45:49
Задавай width, экспериментируй с clear и дальше с float. Если не получится - ночером посмотрю сам.


width дает только фиксированную ширину (проценты - один фиг), clear и float вообще ни в какие бока.

Сделать, что ли, таблицей ::)

Цитата из: Аццкая сотона on 25-11-2005, 16:45:49
Код:
body {margin:0;padding:0}



Ага, я уже путем эксперимента выяснил.

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #13 : 25/11/2005, 17:28:13 »
Сдается мне, что решение есть. Приду с работы -- все-таки посмотрю внимательно.

Там, кстати, для осла можно expression замутить, но я ими стараюсь не пользоваться. JS в топку.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #14 : 25/11/2005, 18:12:02 »
Злостный оффтопик
Цитата из: Аццкая сотона on 25-11-2005, 17:28:13
JS в топку.



Тоже не люблю :)

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #15 : 26/11/2005, 15:17:29 »
Код:
<!--  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
#container {width: 100%; height: 81px; background-color:yellow;}
#menu {position:absolute; left:0; top:0; width:175px; height:100%; background-color:aqua;}
#title1 {position:absolute; left:175px; top:0; width:561px; height:81px; background-color:purple;}
#blue {position:absolute; left:736px; top:0; width:14px; height:81px; background-color:blue;}
#yellow {position:absolute; left:750px; top:0; height:81px;}
#green {position:absolute; right:0; top:0; width:14px; height:81px; background-color:green;}
</style>
</head>
<body>
<div id="menu"></div>
<div id="container">
   <div id="title1">2</div>
   <div id="blue">3</div>
   <div id="yellow"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
   <div id="green">5</div>
</div>
</body>
</html>

Проверено в IE 5.5, IE 6, Firefox RC2, Opera 8 Beta. Valid XHTML 1.0 Transitional.

Есть проблемка -- в IE 6 (в пятерке, как ни странно, все ок) при указании доктайпа меню не тянется по высоте на 100%, только по величине контента. Я сбросил IE в Quirks Mode -- это решило проблему.

Разумеется о 800*600 речи не идет пока, но играться можно.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #16 : 28/11/2005, 12:27:29 »
Обмануешь :)

Код:
<!--  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
#container {width: 100%; height: 81px;}
#menu {position:absolute; left:0; top:0; width:175px; height:100%; background-color:aqua;}
#title1 {position:absolute; left:175px; top:0; width:561px; height:81px; background-color:purple;}
#blue {position:absolute; left:736px; top:0; width:14px; height:81px; background-color:blue;}
#yellow {position:absolute; left:750px; top:0; height:81px; background-color:yellow;}
#green {position:absolute; right:0; top:0; width:14px; height:81px; background-color:green;}
</style>
</head>
<body>
<div id="menu"></div>
<div id="container">
<div id="title1">2</div>
<div id="blue">3</div>
<div id="yellow"><p>Lorem...</p></div>
<div id="green">5</div>
</div>
</body>
</html>



               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #17 : 28/11/2005, 12:48:27 »
Нет времени перекопать. В чем трабла конкретно?

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #18 : 28/11/2005, 13:07:00 »

Цитата из: Аццкая сотона on 28-11-2005, 12:48:27
Нет времени перекопать. В чем трабла конкретно?



1. background-color:yellow ты применил к #container вместо #yellow.
2. <div id="yellow"> содержит слишком длинную фразу, которая, само собой, растягивает его как нужно.

В общем, изящного решения для одновременного использования во всех браузерах, похоже, нет.
Я выкрутился подключением разных css для IE и для Оперы/Мозиллы.

Итого, для IE мы в стиле #yellow меняем absolute на relative (IE очень удачно для нас обрезает ширину в 100% по экрану :))
Для Оперы/Мозиллы добавляем в стиль #yellow right:14px.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #19 : 28/11/2005, 13:37:18 »
Еще один вопрос: чем использование @import лучше тега link?

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #20 : 28/11/2005, 13:59:01 »

Цитата из: Corwin Celebdil on 28-11-2005, 13:07:00

Цитата из: Аццкая сотона on 28-11-2005, 12:48:27
Нет времени перекопать. В чем трабла конкретно?



1. background-color:yellow ты применил к #container вместо #yellow.
2. <div id="yellow"> содержит слишком длинную фразу, которая, само собой, растягивает его как нужно.

В общем, изящного решения для одновременного использования во всех браузерах, похоже, нет.
Я выкрутился подключением разных css для IE и для Оперы/Мозиллы.

Итого, для IE мы в стиле #yellow меняем absolute на relative (IE очень удачно для нас обрезает ширину в 100% по экрану :))
Для Оперы/Мозиллы добавляем в стиль #yellow right:14px.



1. Логично. Он затем и нужен. Очень часто используемое решение, весьма корректное, кстати.
2. А ты собирался его пустым оставить? :)

Писать разные цссы - неспортивно :)

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #21 : 28/11/2005, 14:06:21 »

Цитата из: Corwin Celebdil on 28-11-2005, 13:37:18
Еще один вопрос: чем использование @import лучше тега link?



По сути ничем. Кому как удобней.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #22 : 28/11/2005, 14:39:18 »

Цитата из: Аццкая сотона on 28-11-2005, 13:59:01
1. Логично. Он затем и нужен. Очень часто используемое решение, весьма корректное, кстати.


Для данного упрощенного примера оно-то да, подходит, но в реале у меня картинки-бэкграунды, и при этом способе вылазят разные левые куски в разных местах :)

Цитата из: Аццкая сотона on 28-11-2005, 13:59:01
2. А ты собирался его пустым оставить? :)



Нет, но с гораздо более коротким текстовым блоком.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #23 : 29/11/2005, 12:53:18 »
Следующее :)

Код:
<html>
<head>
<style type="text/css">
li {list-style-type:none;}
li a {display:block; border:3px solid #2CABE2;}
li a:hover {border:3px solid #999;}
</style>
</head>
<body>
<ul>
<li><a href="#">МЕНЮШКА №1</a></li>
<li><a href="#">МЕНЮШКА №2</a></li>
<li><a href="#">МЕНЮШКА №3</a></li>
</ul>
</body>
</html>


Что нужно сделать для того, чтобы вертикальный зазор между ссылками стал меньше (2 пикселя, допустим)? И функциональность сохранилась.
Вот интересно: все сразу знают что нужно делать и я один такой, что искал пол часа решение :)

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #24 : 29/11/2005, 16:28:53 »
Ты про бордеры? Никак, к сожалению.
Только таблами и border-collapse.

               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #25 : 29/11/2005, 16:42:48 »

Цитата из: Аццкая сотона on 29-11-2005, 16:28:53
Ты про бордеры?



Эээ.. Я хочу, чтобы ссылки-прямоугольнички были ближе друг к другу :) Без большого количества пустого места между ними.

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #26 : 29/11/2005, 16:52:37 »
Код:
<html>
<head>
<style type="text/css">
li {list-style-type:none;}
li a {border:3px solid #2CABE2;width:100%;}
li a:hover {border:3px solid #999;}
</style>
</head>
<body>
<ul>
   <li><a href="#">МЕНЮШКА №1</a></li>
   <li><a href="#">МЕНЮШКА №2</a></li>
   <li><a href="#">МЕНЮШКА №3</a></li>
</ul>
</body>
</html>


               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #27 : 29/11/2005, 18:35:27 »
Нет двухпиксельного зазора между ними :)

               

               
Записан

Аццкая сотона›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #28 : 29/11/2005, 21:20:05 »
Мог бы и сам додуматься :)

Код:
<html>
<head>
<style type="text/css">
li {list-style-type:none;margin-bottom: 2px;}
li a {display:block;border:3px solid #2CABE2;width:100%;}
li a:hover {border:3px solid #999;}
</style>
</head>
<body>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</body>
</html>


               

               
Записан

Corwin Celebdil›

  • Гость
Re: Вопросы по HTML и т.п.
« Ответ #29 : 30/11/2005, 10:49:42 »
Вот черт. Почему я это пропустил :))


Стоп! Я знаю почему пропустил. Я не ставил width: 100%.

               


               

      
Записан
Страницы: 1 2 [Все]   Вверх
 

+ Быстрый ответ