Не получается добавить изображение в шапку сайта

[ProRus]

Здрасте .. пишу к вам с просьбой о помощи, если как-то не ясно напишу, скажите сразу.

Собственно, есть сайт.

Таблица стилей там и всё как положено.

Проблема заключается в том, что я не могу пока что понять, как добавить изображения в шапку сайта при этом не допустив сдвигов дизайна сайта. Копался в таблице стилей и в div'ах - не смог понять своими мозгами <img src="http://forum.htmlbook.ru/public/style_emoticons/<#EMO_DIR#>/sad.gif" style="vertical-align:middle" emoid="" border="0" alt="sad.gif" /> а хочется ...

Представлю скрины:

1. Так, как должна быть страница. Между ТЕКСТ и цифрами должно поместить два небольших изображения.

<img src="" border="0" class="linked-image" />

2. Добавляю одно изображение в файлы между div'ами и вот что у меня выходит.

<img src="" border="0" class="linked-image" />

Как не допустить подобного рода сдвигов?

<b>Вырезка этого места из таблицы стилей:</b>

<i>/* Top

————————————————————-- */

#page {

display:block;

overflow:hidden;

margin:0 auto;

padding:0;

width:934px;

border:none;

background:#E6F0FF;

color:#ffffff;

}

.top_part {

/*position:relative;

display:inline;*/

float:left;

margin:0;

padding:9px 0 0 0;

width:934px;

/*background:#045E92 url(../images/bg_top_part.jpg) repeat-x 0 72px;*/

background:#1156A4 url(../images/bg_top_part.jpg) repeat-x 0 80px;

/*border-bottom:#999999 1px solid;*/

}

.left_strp .logo {

float:left;

position:relative;

margin:-78px 0 18px 0;

padding:0;

/*float:left;

position:relative;

overflow:visible;

margin:-74px 0 18px 0;

padding:0;

height:206px;

z-index:2;*/

}

.left_strp .logo img {

display:block;

}

.top_part .title {

float:left;

margin:0 0 0 220px;

padding:0;

font:normal 25px "Tahoma","Arial",sans-serif;

}

*html .top_part .title {

display:inline;

}

.top_part .phone {

float:right;

margin:0 32px 0 0;

padding:0;

font:normal 25px "Tahoma","Arial",sans-serif;

}

.top_part .phone span {

font-size:17px;

}</i>

<b>Вырезка этого места из файла страницы .php:</b>

<i><div class="top_part">

<div class="title">"ТЕКСТ" текст</div>

<div class="phone"><span>+7 (495)</span> циферки</div></i>

Спасибо заранее за любую помощь.

Edited March 25, 2011 by ProRus

[psywalker]

Поменяй структуру. Выровни Текст по левому краю, Телефон по правому, а тот див, которые между ними, уже пусть идёт ЗА ними с overflow:hidden; а в него уже засовывай картинки.

[ProRus]

Поменяй структуру. Выровни Текст по левому краю, Телефон по правому, а тот див, которые между ними, уже пусть идёт ЗА ними с overflow:hidden; а в него уже засовывай картинки.

Спасибо за оперативность! Попробую разобраться

[Игорь Ермаков]

Я так понял, что сайт фиксированной ширины? Если так, то создай блок с тем что нужно и абсолютным позиционированием помести куда надо, все будет нормально. Но правильнее будет сделать так как предложил psywalker, ибо очевидно, что структура неправильна.

Сразу:

http://htmlbook.ru/css/position.html

[ProRus]

Я так понял, что сайт фиксированной ширины? Если так, то создай блок с тем что нужно и абсолютным позиционированием помести куда надо, все будет нормально. Но правильнее будет сделать так как предложил psywalker, ибо очевидно, что структура неправильна.

Сразу:

http://htmlbook.ru/css/position.html

Просто писал всё это дело не я, но мне приходиться с этим иметь дело .. а особо ещё в таких делах не силён

Текст по левому краю, Телефон по правому,

А разве в .css он уже не выровнен?

.top_part .title {

float:left;

margin:0 0 0 220px;

padding:0;

font:normal 25px "Tahoma","Arial",sans-serif;

}

*html .top_part .title {

display:inline;

}

.top_part .phone {

float:right;

margin:0 32px 0 0;

padding:0;

font:normal 25px "Tahoma","Arial",sans-serif;

}

[psywalker]

Да, но в HTML это совсем другое дело. Структура не позволяет добиться цели друг.

[Игорь Ермаков]

<div class="top_part">
<div class="block"></div>
<div class="title">"ТЕКСТ" текст</div> 

<div class="phone"><span>+7 (495)</span> циферки</div>

.top_part {position:relative;}

.block {
background:;

width:;
height:;
position:absolute;
left:;
top:;
}

Edited July 6, 2010 by Игорь Ермаков

[ProRus]

<div class="top_part">
<div class="block"></div>
<div class="title">"ТЕКСТ" текст</div> 

<div class="phone"><span>+7 (495)</span> циферки</div>

.top_part {position:relative;}

.block {
background:;

width:;
height:;
position:absolute;
left:;
top:;
}

Всё добавил. .block в css, div в страницу, добавил изображение - всё равно смещение.

[psywalker]

Я смотрю ты нихрена не сделал так, как я тебе сказал.

[ProRus]

Я смотрю ты нихрена не сделал так, как я тебе сказал.

Я попробывал. Выровнял в файле .php эти div'ы, добавил overflow в css, но эффекта не увидел ... видимо что-то не так сделал.

Edited July 6, 2010 by ProRus

[psywalker]

<div class="top_part">

<div class="title" style="float: left; width: 100px;">"ТЕКСТ" текст</div>

<div class="phone" style="float: right; width: 100px;"><span>+7 (495)</span> циферки</div>
<div class="block" style="overflow: hidden;"></div>

[ProRus]

<div class="top_part">

<div class="title" style="float: left; width: 100px;">"ТЕКСТ" текст</div>

<div class="phone" style="float: right; width: 100px;"><span>+7 (495)</span> циферки</div>
<div class="block" style="overflow: hidden;"></div>

Сделал точь-в-точь как вы написали ... когда div class="block" + img src находятся в файле - смещение ... когда удаляю изображение - смещения нет.

[psywalker]

А дай ссылку на проблемную страницу

[ProRus]

А дай ссылку на проблемную страницу

http://www.ссылко.com/

Edited July 6, 2010 by ProRus

[psywalker]

Смотри, вставь вот это в браузер и посмотри как должно быть

<div class="title" style="float: left; width: 100px; background: red;">"ТЕКСТ" текст</div>

<div class="phone" style="float: right; width: 100px;background: red;"><span>+7 (495)</span> циферки</div>
<div class="block" style="overflow: hidden;"> <img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt="" /></div>

Да, а ещё погрузи этот код в ещё один блок и также задай overflow: hidden;

[ProRus]

Смотри, вставь вот это в браузер и посмотри как должно быть

<div class="title" style="float: left; width: 100px; background: red;">"ТЕКСТ" текст</div>

<div class="phone" style="float: right; width: 100px;background: red;"><span>+7 (495)</span> циферки</div>
<div class="block" style="overflow: hidden;"> <img src="http://forum.htmlbook.ru/style_images/elegance/logo4.gif" alt="" /></div>

Да, а ещё погрузи этот код в ещё один блок и также задай overflow: hidden;

Вставил. Можете наблюдать смещение.

В css добавил:

.top_part .block {

overflow: hidden;

width: 230px;

height: 50px;

padding: 1px;

border: solid 1px black;

}

Edited July 6, 2010 by ProRus

[ProRus]

Кажется я всех доканал

[psywalker]

Всё хорошо, не волнуйся.

Смотри, ты добавил в стили код, но в HTML ты ведь ничего не добавлял. Куда ты вставляешь картинку? Я так понял, между телефоном и надписью "АИФ-ТУР" турагенство ?

[ProRus]

Всё хорошо, не волнуйся.

Смотри, ты добавил в стили код, но в HTML ты ведь ничего не добавлял. Куда ты вставляешь картинку? Я так понял, между телефоном и надписью "АИФ-ТУР" турагенство ?

Я на время убрал то безобразие с сайта с смещением, а то рабочий же всё-таки он.

Да .. мне необходимо вставить две картинки 125х45 и 88х45 в место между номерами и названием.

В HTML я ничего не могу добавить, ведь там шапка сайта выглядит как:

<div id="page">

<?php include("menu/top_menu.php"); ?>

А файл top_menu.php - это то, где мы работаем с div'ом.

[stars]

кхм...

Я бы так сделал

<div class="title">"АИФ-ТУР" турагенство</div>
<div style="overflow: hidden;float:left;">11133</div>
<div class="phone"><span>+7 (495)</span> 772 76 86, 772 76 69</div>

для наглядности добавим бордер и ширину с высотой нормальные

<div style="overflow:hidden;float:left;width:90px;height:30px;border: 1px solid;">11133</div>

И вот как это выглядит: http://s005.radikal.ru/i209/1007/bd/346b4275309c.jpg

Соответственно циферки меняем на картинки...

Edited July 6, 2010 by stars

[ProRus]

кхм...

Я бы так сделал

<div class="title">"АИФ-ТУР" турагенство</div>
<div style="overflow: hidden;float:left;">11133</div>
<div class="phone"><span>+7 (495)</span> 772 76 86, 772 76 69</div>

для наглядности добавим бордер и ширину с высотой нормальные

<div style="overflow:hidden;float:left;width:90px;height:30px;border: 1px solid;">11133</div>

И вот как это выглядит: http://s005.radikal.ru/i209/1007/bd/346b4275309c.jpg

Соответственно циферки меняем на картинки...

Так получилось. Но 90х30 мне не хватит .. а когда, соответственно, ставлю чуть больше - смещение тут как тут.

2 stars:

Но, с другой стороны, можно попробывать уменьшить размер текста и уменьшить картинки ... лишь бы они не оказались очень мелкие.

[stars]

Естественно вам нуно поменять текст или подвинуть его чуть чуть или уменьшить шрифт и т.д. невозможно вставить картинку шириной 1000px имея при этом в запасе всего 90 и рассчитывать на верстку )))

У вас же ник Pro! ) Вас кстати не смутило что я сделал скрин вашего сайта со своими изменениями?

P.S. Лично я бы чуть чуть сдвинул текст и возможно попробовал расстоянием между букв поиграться + можешь на 1 кеглю его уменьшить и конечно же что-то сделал с телефонами они смотрятся не очень красиво... Но я не дизайнер, и проект не мой ))

Edited July 6, 2010 by stars

[ProRus]

Естественно вам нуно поменять текст или подвинуть его чуть чуть или уменьшить шрифт и т.д. невозможно вставить картинку шириной 1000px имея при этом в запасе всего 90 и рассчитывать на верстку )))

У вас же ник Pro! ) Вас кстати не смутило что я сделал скрин вашего сайта со своими изменениями?

P.S. Лично я бы чуть чуть сдвинул текст и возможно попробовал расстоянием между букв поиграться + можешь на 1 кеглю его уменьшить и конечно же что-то сделал с телефонами они смотрятся не очень красиво... Но я не дизайнер, и проект не мой ))

Да картинки то сами по себе были не очень большие, ужал на максимум как казалось, но не хватало ни как и думал, что дело не совсем в из размере, а методе их вставки.

Ммм .. сначала я подумал, что это скрин + фотошоп ... но тут что-то не то

Текст тут тоже странный .. его уменьшаешь, а он ни в какую не уменьшается. Теперь буду с ним копаться. Безусловно, телефоны я собирался изменить тотально.

Спасибо

P.s. я Pro во многом другом .. но тут пока новичек

[ProRus]

Есть тут ещё кто-нибудь? У меня вопрос появился ...

[stars]

ну это-же не чат! Ты спрашивай )

[ProRus]

Очередной скрин:

<img src="" border="0" class="linked-image" />

За сегодня голова квандрантная и не могу сообразить, как сделать так чтобы "картинка" была оцентрована по тексту слева "является уполномоченным представителем", ну и чтобы не очень впритирку была?

Вот код страницы:

<div class="title" style="font-size:14pt;width:340px;height:32px;text-align:right;">"ТЕКСТ" является уполномоченным представителем</div>

<div style="overflow:hidden;float:left;width:142px;height:30px;border: 0px solid;"><a href="http://www.bsky.ru/"><img src="/images/bluesky_30.jpg" alt="BlueSky"></a><a href="http://www.coral.ru/"><img src="/images/coral_30.jpg" alt="Coral"></a></div>

<div class="phone" style="font-size:14pt;width:168px;height:32px;text-align:right;">+7 (495) цифры, цифры</div>

Edited March 25, 2011 by ProRus