Проблемы с выравниванием картинки справа вверху в Opera

podlom · October 16, 2007

Недавно решил сверстать шапку слоями, а не таблицами. В IE и Firefox страница выглядит нормально, а вот в Opera правая картинка залазит влево. Может быть кто-то сталкивался с подобной проблемой и подскажет как правильно сделать, чтобы во всех трех браузерах шапка выглядела одинаково хорошо.

Dimitry Wolotko · October 16, 2007

Тему бы в "проблемы с версткой"

guvatara · October 16, 2007

диву с картинкой right:0px; Как я понял он должен быть всегда справа.

Опера (как и остальные) очень придирчива к указаниям для слоев. Поэтому советую ставить размеры для блоков, чтоб она понимала. Да и используйте свойство display. Очень сильно лечит ее.

Scrum · October 16, 2007

как нибудь так

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 #carrier {
 background-color: #4d4d4d; /* для наглядности */
 }
 #left img {
 height: 100px; /* для наглядности */
 width: 100px; /* для наглядности */
 background-color: silver; /* для наглядности */
 }
 #right img {
 height: 100px; /* для наглядности */
 width: 100px; /* для наглядности */
 background-color: orange; /* для наглядности */
 float: right;
 }
 /*]]>*/
 </style>
</head>

<body>
 <div id="carrier">
 <div id="right"><img /></div>
 <div id="left"><img /></div>
 </div>
</body>

</html>

{... перенесено в Проблемы с версткой lancer}

podlom · October 16, 2007

Пробовал сделать как советовал Scrum, но почему-то не работает растяжка, которую мне нужно вставить в виде фона (по середине). Еще непонятно как туда лого нужно будет вставлять.

Вариант, котрый предложил guvatara лучше, но еще одна проблема возникла с шириной. Правая картинка "наезжает" на логотип.

Еще пробовал так, но эффекта нету.

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

yopopt · October 16, 2007

position:absolute;top:0;float:right

Полная ерунда. почитайте внимательно как работает position и float.

Простейший вариант:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Морской дом</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body { padding:0;margin:0; }
img { border:0; }
#hdr
{
 background:url('i/hdr.png') repeat-x top left;
 width:100%;
}
#hdrc
{
 background:fixed url('i/tbg1.jpg') no-repeat top left;
}
#hdrc a img
{
 padding:20px 72px;
}
</style></head><body>
<div id="hdr">
 <div id="hdrc"><img src="i/tbg2.jpg" style="float: right;" alt=""><a href="http://shkodenko.kiev.ua/"><img src="i/logo.png" alt="Морской дом"></a></div>
</div>
</body></html>

Но так при нехватке ширины окна браузера логотип "Морской дом" будет сползать вниз. Поэтому надо указать минимальную или фиксированную ширину для сайта или основного блока.

Так-же можно сделать так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Морской дом</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body { padding:0;margin:0; }
img { border:0; }
#hdr
{
 background:url('i/hdr.png') repeat-x top left;
 width:100%;
}
#hdrc
{
 background:fixed url('i/tbg1.jpg') no-repeat top left;
 position: relative;
}
#hdrc a img
{
 padding:20px 72px;
 position: relative;
 z-index: 2;
}
</style></head><body>
<div id="hdr">
 <div id="hdrc"><a href="http://shkodenko.kiev.ua/"><img src="i/logo.png" alt="Морской дом" /></a><img src="i/tbg2.jpg" style="position:absolute;top:0;right:0" alt="" /></div>
</div>
</body></html>

Так изображение "Морской дом" будет перекрываться правым изображением. Чтобы этого избежать присваеваем ему z-index тем самым "поднимая" его над правым слоем.

podlom · October 16, 2007

yopopt,

спасибо огромное за ответ.

Первый вариант мне не понравился совсем.

Второй вариант вполне подходит.

Полная ерунда. почитайте внимательно как работает position и float.

Обязательно еще раз внимательно прочитаю float и position. А может это еще где-то описано?

Scrum · October 16, 2007

Пробовал сделать как советовал Scrum, но почему-то не работает растяжка, которую мне нужно вставить в виде фона (по середине). Еще непонятно как туда лого нужно будет вставлять.

конечно не получиться если так пытаться поставить бг

background-color: #444 url('i/hdr.png') repeat-x top left;

добавляем для

#carrier {

width: 100%;

float: left;

background: #444 url('i/hdr.png') repeat-x top left;

}

podlom · October 17, 2007

Scrum,

сорри за невнимательность. Уставший был - не заметил. Сейчас исправлюсь.

Sign In

Проблемы с выравниванием картинки справа вверху в Opera

Question

podlom

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

guvatara

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

podlom

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

podlom

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

podlom

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information