Как разместить фотографию в верхнем левом углу заголовка моего веб-сайта

#css #drupal #drupal-6

Вопрос:

Это мой сайт.
Я хочу разместить фотографию руководителя службы поддержки клиентов в верхнем левом углу заголовка веб-сайта, который сейчас пуст.

Как я могу это сделать? Я не могу понять, почему графика, размещенная в #header, не размещена в верхнем левом углу, то есть с левой стороны есть немного места.

Я бы хотел добавить фотографию как отдельную. Если я не могу, я могу объединить фотографию вместе с существующим графическим заголовком (содержащим логотипы компании ..).
Какой вариант будет лучшим?

1. На левой стороне есть набор логотипов компании. Вы хотите, чтобы эта фотография была поверх логотипов компании? Или вы имеете в виду правую часть заголовка?

2. Слева от логотипов компании есть немного места. Я хочу разместить здесь фотографию руководителя. Я не могу понять, почему перед логотипом компании есть пробел. В файле css я не нахожу левого поля для #header div, в котором размещен логотип компании.

3. На этом сайте вверху есть пробел белого цвета (из #header-region). Градиенты неуместны (оба в FF / Chrome / IE8). Я не вижу, где вы можете получить какое-либо изображение в этом левом конце. Как насчет правого конца? Я также не знаю, что такое фотография руководителя. у вас есть размеры фотографии этого руководителя?

4. У меня есть фотография женщины-руководителя, и мы можем изменить ее размер, чтобы она была такой же высоты, как изображение логотипа компании. Что вы подразумеваете под неуместными градиентами? Я думаю, мне придется объединить обе фотографии руководителя, разместив их в левой части логотипа компании.

5. Вы не видите, что градиенты / тени не выровнены? bit.ly/fgaaVL

Ответ №1:

Во-первых, изображение логотипа компании является фоном, поэтому на него не повлияет ничего, что вы разместите внутри заголовка div #. На самом деле это не обязательно должен быть фон, но это ничему не вредит таким образом. Я бы удалил градиент в Photoshop и сохранил его в формате PNG с прозрачным фоном. Это устранит проблему с выравниванием градиентов.

Что касается вставки изображения, вы можете сделать это —

HTML —

 <div id="header"><img src="path/to/executive/image.jpg" /></div>

CSS —

 #header{background:url(path/to/logos/image.png) no-repeat XXXpx 0px;}

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