Автор: Corwin Celebdil›
« : 30/11/2005, 10:49:42 »Вот черт. Почему я это пропустил 
Стоп! Я знаю почему пропустил. Я не ставил width: 100%.
Стоп! Я знаю почему пропустил. Я не ставил width: 100%.
Новости:
В тестовом режиме открыт раздел сайта «Встречи»
Здесь больше нет рекламы. Но могла бы быть, могла.
Автор: Аццкая сотона›
« : 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>
<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›
« : 29/11/2005, 18:35:27 »Нет двухпиксельного зазора между ними
Автор: Аццкая сотона›
« : 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>
<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›
« : 29/11/2005, 16:42:48 »Цитата из: Аццкая сотона on 29-11-2005, 16:28:53
Ты про бордеры?
Эээ.. Я хочу, чтобы ссылки-прямоугольнички были ближе друг к другу
Без большого количества пустого места между ними.Автор: Аццкая сотона›
« : 29/11/2005, 16:28:53 »Ты про бордеры? Никак, к сожалению.
Только таблами и border-collapse.
Только таблами и border-collapse.
Автор: Corwin Celebdil›
« : 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 пикселя, допустим)? И функциональность сохранилась.
Вот интересно: все сразу знают что нужно делать и я один такой, что искал пол часа решение
<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 пикселя, допустим)? И функциональность сохранилась.
Вот интересно: все сразу знают что нужно делать и я один такой, что искал пол часа решение
Автор: Corwin Celebdil›
« : 28/11/2005, 14:39:18 »Цитата из: Аццкая сотона on 28-11-2005, 13:59:01
1. Логично. Он затем и нужен. Очень часто используемое решение, весьма корректное, кстати.
Для данного упрощенного примера оно-то да, подходит, но в реале у меня картинки-бэкграунды, и при этом способе вылазят разные левые куски в разных местах
Цитата из: Аццкая сотона on 28-11-2005, 13:59:01
2. А ты собирался его пустым оставить?
Нет, но с гораздо более коротким текстовым блоком.
Автор: Аццкая сотона›
« : 28/11/2005, 14:06:21 »Цитата из: Corwin Celebdil on 28-11-2005, 13:37:18
Еще один вопрос: чем использование @import лучше тега link?
По сути ничем. Кому как удобней.
Автор: Аццкая сотона›
« : 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. А ты собирался его пустым оставить?
Писать разные цссы - неспортивно
Автор: Corwin Celebdil›
« : 28/11/2005, 13:37:18 »Еще один вопрос: чем использование @import лучше тега link?
Автор: Corwin Celebdil›
« : 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.
Автор: Аццкая сотона›
« : 28/11/2005, 12:48:27 »Нет времени перекопать. В чем трабла конкретно?
Автор: Corwin Celebdil›
« : 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>
<!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>
Автор: Аццкая сотона›
« : 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 речи не идет пока, но играться можно.
<!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 речи не идет пока, но играться можно.