Предотвратить прокрутку кадра, когда экран слишком маленький - PullRequest
0 голосов
/ 07 февраля 2012

Я использую кадры.Моя рамка с логотипом содержит 2 картинки.Один - 150 пикселей, а другой - 600 пикселей, что делает логотип размером 750 пикселей.Теперь, когда пользователь делает окно меньше целого числа, тогда мое второе изображение прокручивается вниз без возможности его видеть.

Самый простой из возможных способов - это соединить 2 изображения в одно 750px, но этоЕсть ли способ избежать этого?

Все, что у меня есть в виде кода на рамке с логотипом, это ...

<body class="logo_background">
    <img src="assets/logo.png">
    <img src="assets/logo_name.png">
</body>

мой index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
  <frame src="logo.html" name="logo" scrolling="no">
  <frameset rows="*" cols="150,100%">
    <frame src="menu.html" name="menu" scrolling="no">
    <frame src="main_page.html" name="page" scrolling="no">
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

Ответы [ 2 ]

1 голос
/ 07 февраля 2012

используйте минимальную ширину на контейнере изображений до 750px. Это решит проблему .. и я согласен с @elclanrs .. используйте div для достижения этого .. кадры могут быть не лучшим способом ..

.logo_background{
min-width:760px;/* just to be sure adding an extra 10px */
}

Теперь контейнер будет иметь размер 760 пикселей независимо от размера окна, поэтому ваши изображения не теряют своего расположения - не выходят из поля зрения, вы все равно можете прокрутить вправо, чтобы увидеть логотипы - оба из них .. :)

Вот скрипка для вашей проблемы - http://jsfiddle.net/mvivekc/h4gVe/

0 голосов
/ 07 февраля 2012

Просто создайте рамку логотипа шириной не менее 750 пикселей. Я думаю, это сработает.

...