Как сверстать заголовок?

[borus]

Вот что надо получить:

лого и название компании есть единая ссылка, причем название отцентрировано относительно лого. Этот блок + телефон с адресом отцентрированы по вертикали в отдельном контейнере

А вот попытки:

<div id ="preheader">
  <a href="/" alt="ООО Агроминералпро">ООО "Агроминералпро"</a>
  <div id="contact">
      <span>
            <p>(8793)38-35-87</p>
            <p>г. Пятигорск, ул. Ермолова, д.12А</p>
      </span>
  </div>
</div>

CSS:
#preheader{
	margin: 5px auto;
	width: 1000px;
	height: 70px;
	border:1px solid black;

	vertical-align:middle;
	display:table-cell;
	position:relative;
	overflow: hidden;
}
#preheader a{
	display:block;float:left;
	width:265px;height:51px;
	background:url(images/logo.png) no-repeat left;
	padding-left:10px;
}
#preheader div{
	position: absolute;
    top: 50%;
}
#preheader span{
	position:relative;
	top: -50%;
}
#contact{
	float: right;
	width:300px;
	text-align:left;
}

Edited October 21, 2011 by borus

[Softlink]

Засунуть картинку фоном в название, выставить высоту последнему и отцентрировать через background-position. Телефон во float:right. Или на позиционировании оба блока сделать.

[borus]

Засунуть картинку фоном в название, выставить высоту последнему и отцентрировать через background-position. Телефон во float:right. Или на позиционировании оба блока сделать.

поясните кодом? не понятно

[Softlink]

Засунуть картинку фоном в название, выставить высоту последнему и отцентрировать через background-position. Телефон во float:right. Или на позиционировании оба блока сделать.

поясните кодом? не понятно

<div><a href="" class="logo">Название</a></div>
<div class="contacts">123456</div>

.logo{
display:block;
background:url(image.png) no-repeat;
background-position:20px 20px; /*выравнивание картинки*/
padding-left:50px;
}

.contacts{
float:right;
........
}

[ceil100]

зачем несколько тем создавать из за одного и того же?

только путаница получается

ссылку на сайт дайте

line-height: ...;

выровнять по вертикали ваш текст

padding-left сдвинет его вправо

не забудьте задать ширину контейнера больше ширины картинки

Edited October 21, 2011 by ceil100

[borus]

ссылку на сайт дайте

line-height: ...;

выровнять по вертикали ваш текст

padding-left сдвинет его вправо

не забудьте задать ширину контейнера больше ширины картинки

Сайт нигде пока не весит. А вы где вывешиваете для таких отладочных целей?

Поставил line-height. Похоже это не то, ведь у меня справа в строке контактов две строки (номер и адрес) по разному оформленные(разной высоты). Кстати, как из этих двух строк при разном оформлении каждой сделать единую ссылку ?

Вот, что получается с line-height пока (рамки белые - отладочные):

    <div id ="preheader">
    	<div>
    		<a href="" alt="ООО Агроминералпро" class="logo">ООО "Агроминералпро"</a>
        </div>
        <div id="contact">
            <p>(8793)38-35-87</p>
            <p id="smallwhitetext">г. Пятигорск, ул. Ермолова, д.12А</p>
    	</div>
    </div>
... 
CSS:
#preheader{
	margin: 0 auto 0px;
	width: 1000px; height: 90px; line-height:90px;
	vertical-align:middle;
	color:#fee183;
	border:1px solid white;
}
.logo{
	height:65px; width:265px; 
	display:block; background:url(images/logo.png) no-repeat;
	background-position:left center; /*выравнивание картинки*/
	padding-left:51px;
	float:left;
	color:#fee183; line-height:65px;
        border:1px solid white;
}
#contact{
	float: right;
	width:300px;
	text-align:left;
}
#smallwhitetext{
	color: #fff;
	font-size:0.7em;
}

А вот результат:

Кстати, если строку <p id="smallwhitetext">г. Пятигорск, ул. Ермолова, д.12А</p> убрать, то еще куда ни шло:

но лого-ссылка всё равно не выравнена по верикали относительно опоясывающего контейнера #preheader

Edited October 23, 2011 by borus

[ceil100]

просто отодвиньте лого вниз марджином, в чем проблема то?

а чтобы не отодвинулся весь контейнер, задайте ему padding-top:1px(для #preheader )

телефон с адресом сделайте в другом контейнере

вам же все уже написали

Засунуть картинку фоном в название, выставить высоту последнему и отцентрировать через background-position. Телефон во float:right.