Отчаянная проблема позиционирования изображения - PullRequest
Новая
       13

Отчаянная проблема позиционирования изображения

0 голосов
/ 12 июля 2009

То, что я хочу, это: http://www.freeimagehosting.net/image.php?11b1fcb689.png

Редактировать: Добавлена ​​более полная картина того, что я пытаюсь сделать. Я могу сделать так, чтобы это выглядело правильно, используя абсолютное позиционирование, но когда размер окна слишком мал, контент скользит по странице без горизонтальной полосы прокрутки. Вот почему я хочу использовать относительное расположение элементов div. Еще раз спасибо. http://www.freeimagehosting.net/image.php?75c33eaf6e.png

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

Любая помощь будет принята с благодарностью!

Mike 

<!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}
.footer {
  color: #202054;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
  margin-left: 20px;
}
a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
a.footer:hover {
  color: #EE001E;
  text-decoration: underline;
}
</style>

</head>
<body>

<img style="position: absolute; right: 50%; top: 50%; margin-top: -128px;" src="Resources/chart.png" width="432" height="256"/>

<div style="position: absolute; left: 50%; top: 50%; margin-top: -200px; width: 368px; height: 400px;">
  <!-- text content -->
</div>

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
  <a style="text-decoration: none;" href="http://www.company.com" >
    <img class="footer" src="Resources/logo.png" alt="company" width="21" height="13"/>
  </a>
  <a class="footer" href="#">Terms of Use</a>
  <a class="footer" href="#">Privacy Policy</a>
  <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span>
</div>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 12 июля 2009

Я думаю, вы можете захотеть что-то вроде этого: 

<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto">
<img src='...'>
</div>

Но для центрирования изображения по вертикали вам нужно поместить его в таблицу или использовать JavaScript.

0 голосов
/ 12 июля 2009

Может работать с позиционированием absolute или relative, если ширина и высота изображения определены.

Обновление для вашей недавней правки

Проблема в том, что вам нужно использовать относительное позиционирование. У вас также должен быть контейнер DIV для изображения и div боковой панели, потому что они все равно будут работать некорректно, только с родительским телом.

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

Обратите внимание, что для содержания боковой панели в этом коде нужно другое поле. Я не уверен, почему, потому что я немного заржавел с моим CSS, но теперь, когда оба позиционированы relative, если у вас нет отрицательного поля в содержимом боковой панели, верхняя часть будет выровнена по нижней части изображения , Я знаю, что margin-top: -256px выровняет его по верху изображения. Затем для их вертикального центрирования вам нужно добавить половину их разности или (256 - 400) / 2, поэтому вы добавляете -72px к полю -256px, чтобы снова центрировать их.

Вот код, который работает для меня: 

<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}

#container {
  background: #DDD;
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 900px;
}

img#image {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -432px;
  background: black;
  display: block;
}

div#sidebar {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -328px 0 0 0;
  width: 368px;
  height: 400px;
  background: grey;
}

.footer {
  color: #202054;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
  margin-left: 20px;
}

a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

a.footer:hover {
  color: #EE001E;
  text-decoration: underline;
}
</style>

</head>
<body>

<div id="container">

    <img id="image" src="" width="432" height="256"/>

    <div id="sidebar" style="">
      <!-- text content -->
      content
    </div>

</div>

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
  <a style="text-decoration: none;" href="http://www.company.com" >
    <img class="footer" src="" alt="company" width="21" height="13" />
  </a>
  <a class="footer" href="#">Terms of Use</a>
  <a class="footer" href="#">Privacy Policy</a>
  <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span>
</div>


</body>

</html>

Обратите внимание, я добавил цвета, чтобы помочь мне, а также я обнаружил, что вы должны добавить display: block к изображению.

Надеюсь, это поможет.

Примечание. Значение min-width было произвольным. Это просто должно быть больше, чем ширина обоих элементов. Возможно, вы захотите поиграть и посмотреть, с какой ширины боковая панель начинает падать со страницы (в браузерах отсечение справа неизбежно)

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

Нет похожих вопросов

...