<DIV> и Shadowbox - PullRequest
Новая
       5

<DIV> и Shadowbox

2 голосов
/ 24 мая 2011

У меня есть div по центру на моей странице (ширина и высота установлены, поле: авто). Затем я добавляю в него изображения, и каждое изображение запускает свой собственный Shadowbox. Однако есть две проблемы:

  1. Теневой ящик - занимая весь экран - смещен на правую сторону страницы. Как вернуть его обратно в центр, как будто не было div?
  2. Каждый раз, когда я открываю shadowbox на любом данном изображении (либо одно и то же изображение, либо другое изображение на каждом открытии), shadowbox становится меньше. У меня не было этой проблемы, пока я не поместил изображения в div.

Вы можете увидеть это в действии здесь .

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

Источник: 

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
    <script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">
        Shadowbox.init();
    </script>
</head>

<body>
    <div id="pageDiv" style="background-color:#FFFFFF">

        <a href="http://www.sport2play.com/baseball/pics/1.jpg" alt="none" rel="shadowbox"><img src="http://www.sport2play.com/baseball/pics/1.jpg" width="100px"/></a>
    </div>

</body>
</html>

Для чего стоит CSS: 

@font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}
body{
 font-family:"Officina";
 background-color:#AAAAAA;
}
img{
 box-shadow: 3px 3px 7px #777;
 background-color:#FFFFFF;
}
canvas{
 background-color:#FFFFFF;
}
div{
 width:500;
 height:647;
 margin:auto;
}

Мысли о том, как исправить эти две проблемы?

1 Ответ

0 голосов
/ 24 мая 2011

Вам нужно использовать тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Это решит вашу первую проблему.

...