<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
.block1 {
width: 200px;
height: 200px;
border: 1px solid green;
margin: 0 4px;
}
.block2{
width: 200px;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
<div class="block1">1
</div>
<div class="block2">1
</div>
</html>
DIV'ы и друзья товарищи IE с Opera
Есть два блока - одни под другим и оба одинаковой ширины.
Но у верхнего блока бордюр 1px, а у нижнего 5px
IE отображает все красиво и блоки равной ширины.
Opera отображает нижний блок шире на двойную дозу бордюра.
Вопрос: Как сделать, чтобы в обоих браузерах блоки отображались равной ширины с разными границами?
И еще...
В IE три рядом стоящие вертикальные колонки отображаются с зазорами, а в Opera в притык, т.е. как надо. Как добиться кроссбраузерности?
Но у верхнего блока бордюр 1px, а у нижнего 5px
IE отображает все красиво и блоки равной ширины.
Opera отображает нижний блок шире на двойную дозу бордюра.
Вопрос: Как сделать, чтобы в обоих браузерах блоки отображались равной ширины с разными границами?
И еще...
В IE три рядом стоящие вертикальные колонки отображаются с зазорами, а в Opera в притык, т.е. как надо. Как добиться кроссбраузерности?
Один выход первой проблемы прост.
Второй блок делается из двух.
Второй блок делается из двух.
Вертикальные колонки в таблице? border-collapse:collapse
А по поводу дивов, так Опера правильно реагирует. Надо или дивы вкладывать или ширину задавать с учетом.
А по поводу дивов, так Опера правильно реагирует. Надо или дивы вкладывать или ширину задавать с учетом.
На самом деле, со всем этим делом бардак творится.......
А вообще, каким методом лучше всего позиционировать блоки при бестабличной верстке?
Если кто знает, подскажите хорошие линки.
А вообще, каким методом лучше всего позиционировать блоки при бестабличной верстке?
Если кто знает, подскажите хорошие линки.
Все зависит от задачи. Позиционирование в одном случае нужно применять, обтекание (float) в другом.
Цитата: MrLinker
Есть два блока - одни под другим и оба одинаковой ширины.
Но у верхнего блока бордюр 1px, а у нижнего 5px
Но у верхнего блока бордюр 1px, а у нижнего 5px
Они уже не могут быть одинаковой ширины:
Код:
А что тебе нужно должно выглядить вот так:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
.block1 {
width: 208px;
height: 200px;
border: 1px solid green;
}
.block2{
width: 200px;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
<div class="block1">1
</div>
<div class="block2">1
</div>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
.block1 {
width: 208px;
height: 200px;
border: 1px solid green;
}
.block2{
width: 200px;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
<div class="block1">1
</div>
<div class="block2">1
</div>
</html>
Цитата: MrLinker
Если кто знает, подскажите хорошие линки.
http://www.w3.org/
http://shaelf.ru/book.php
http://alekciy.ru/images/rtfm_noobs.jpg
Мне особенно третья ссылка понравилась :)
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
.block1 {
width: 208px;
height: 200px;
border: 1px solid green;
}
.block2{
width: 200px;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
<div class="block1">1
</div>
<div class="block2">1
</div>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
.block1 {
width: 208px;
height: 200px;
border: 1px solid green;
}
.block2{
width: 200px;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
</body>
<div class="block1">1
</div>
<div class="block2">1
</div>
</html>
Это понятно.
А как быть в том случае, если ширина задана в относительных величинах?
Цитата: MrLinker
А как быть в том случае, если ширина задана в относительных величинах?
А в любом случае проще вложить эти два блока в отдельный контейнер, задать выравнивание по центру и не мучаться с вычислением размеров границ и блоков :)
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
div {
margin: 0 auto;
padding: 0;
}
.block1 {
width: 40%;
height: 200px;
border: 1px solid green;
}
.block2{
width: 40%;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block1">1
</div>
<div class="block2">1
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
div {
margin: 0 auto;
padding: 0;
}
.block1 {
width: 40%;
height: 200px;
border: 1px solid green;
}
.block2{
width: 40%;
height: 200px;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block1">1
</div>
<div class="block2">1
</div>
</div>
</body>
</html>
Цитата: MrLinker
Это понятно.
А как быть в том случае, если ширина задана в относительных величинах?
Задавать ширину границы так же в относительных величинах. Корректно смешать эти вечилины в такой формулировке не получиться.
Если ты хочешь получить два блока одной ширины, но с разными границами, и при этом ширина у них относительная, то просто заключи их в другой div, для этого div задай нужную ширину, для вложенных ширина будет auto, для вложенных задай нужные границы.
Редактор Dreamweaver вам в помощь.
Руками надо писать.
Цитата: Макар Лебедев
Редактор Dreamweaver вам в помощь.
Для домохозяет уровня народ.ру безусловно. Однако веб разраб (любого уровня) должен писать код сам. Визуализатор - любой браузер. Для дебага используем лису с FireBug-ом.
А если ищем приключений, то есть еще Стрекоза и ИЕ девелопер тулбар :)
Цитата: alekciy
Для дебага используем лису с FireBug-ом
... IE с Developer Toolbar'ом, Opera с Dragonfly'ем
(Для тех, кто немного в танке).
Отдельно стрекозу можно скачать из блога разработчиков (новая версия выходит еженедельно).
http://my.opera.com/dragonfly/blog/
Как ее интегрировать в Оперу можно прочитать на http://operafan.net/forum/index.php?topic=4761.0 или http://html-coder.org.ru/opera-dragonfly/
Отдельно стрекозу можно скачать из блога разработчиков (новая версия выходит еженедельно).
http://my.opera.com/dragonfly/blog/
Как ее интегрировать в Оперу можно прочитать на http://operafan.net/forum/index.php?topic=4761.0 или http://html-coder.org.ru/opera-dragonfly/
Спасибо за ответы.
Но я никак не могу прийти к пониманию некоторых вещей.
Вот пример:
В Opera два блока располагаются в притык.
В IE c зазором в 20px.
Почему так происходит мне понятно - Opera расширяет бокс наружу, а IE внутрь.
Я не могу понять, как сделать так, чтобы в обоих браузерах они были одинаковой ширины и с равными зазорами?
А вообще, подход IE мне нравится.
Ты указал значение width для элемента, и никакие манипуляция с ним не влияют на его размер.
Что-то мне подсказывает, что это более разумный подход...
Интересно узнать мнение других по этому поводу.
Но я никак не могу прийти к пониманию некоторых вещей.
Вот пример:
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
* {
margin: 0;
padding: 0;
}
#left {
padding: 10px;
margin: 0px;
border-style: solid;
border-width: 1px;
border-color: #666;
width: 200px;
float: left;
}
#right {
padding: 10px;
margin: 0px 0px 0px 220px;
border-style: solid;
border-width: 1px;
border-color: #666;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
* {
margin: 0;
padding: 0;
}
#left {
padding: 10px;
margin: 0px;
border-style: solid;
border-width: 1px;
border-color: #666;
width: 200px;
float: left;
}
#right {
padding: 10px;
margin: 0px 0px 0px 220px;
border-style: solid;
border-width: 1px;
border-color: #666;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
В Opera два блока располагаются в притык.
В IE c зазором в 20px.
Почему так происходит мне понятно - Opera расширяет бокс наружу, а IE внутрь.
Я не могу понять, как сделать так, чтобы в обоих браузерах они были одинаковой ширины и с равными зазорами?
А вообще, подход IE мне нравится.
Ты указал значение width для элемента, и никакие манипуляция с ним не влияют на его размер.
Что-то мне подсказывает, что это более разумный подход...
Интересно узнать мнение других по этому поводу.
Подход ИЕ противоречит спецификации.
Цитата: MrLinker
Почему так происходит мне понятно - Opera расширяет бокс наружу, а IE внутрь.
Не совсем так. IE по разному рассчитывает размер блоков в режиме совместимости и в стандартном режиме. В первом случае в размеры блока не входят величина отступа и рамки. Например, если мы зададим ширину в 200px и отступ (padding) 10px в режиме совместимости общая ширина блока будет 200px, а в стандратном режиме - 220px.
Цитата:
Я не могу понять, как сделать так, чтобы в обоих браузерах они были одинаковой ширины и с равными зазорами?
Нужно всего лишь переключить браузер в стандартный режим, добавить доктайп - вот такой, например <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
Подробнее о переключении режимов для различных браузеров тут.