Теперь стало проясняться чуток…
Возможно, имелось в виду такое?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
#header {
padding: 10px;
_height: 0px;
}
body > #header {
overflow: hidden;
}
#header a, #header h1 {
float: left;
}
#header a {
display: block;
padding: 0 10px;
}
#header a img {
position: relative;
border: 0;
margin: -10px 0;
}
#header a#logo {
border-right: 1px solid #000;
}
#header a#banner {
border-left: 1px solid #000;
}
</style>
</head>
<body>
<div id="header">
<a id="logo" href="/"><img src="logo.gif" alt="супермегафирма" /></a>
<h1>Welcome to site!</h1>
<a id="banner" href="/superpuper/"><img src="banner.gif" alt="суперпуперпредложение" /></a>
</div>
site content
</body>
</html>
Нужны пояснения, что к чему? Или из кода понятно?
P.S. К сожалению, проверялось не во всех браузерах, а только в восьми оказавшихся под рукой. В порядке эксперимента были допущены формальные ошибки, то есть код сделан невалидным — ошибок отображения при этом не появилось. Строго говоря, сейчас код и есть невалидный, но писать отдельный файл для IE старых версий ради одной строчки в данном случае мне было лениво, так что прошу простить. Опять же в порядке эксперимента менялся доктайп — никаких неожиданностей, в отдельных браузерах начинает отображаться несколько не так, как задумано.
Для примера можно было и не добавлять div#header, все элементы и без него располагаются как задумано, но семантически он верен, в реальном коде его уместность будет очевидна. Тэги «a» добавлены исходя из соображений здравого смысла. Надеюсь, в данном проекте не предполагается подрывать общепринятые устои?
Пример делался и испытывался с картинками разной высоты. Насколько я понимаю, задумка дизайнера в том, чтобы размеры этих линий отталкивались от размеров картинок?
Вот как-то так…