Как я могу сохранить элемент в одном и том же месте, независимо от размера браузера (хотя и не статичного) в пределах потока страницы - PullRequest
Новая
       11

Как я могу сохранить элемент в одном и том же месте, независимо от размера браузера (хотя и не статичного) в пределах потока страницы

0 голосов
/ 14 ноября 2011

Я забочусь о веб-сайте, где логотип компании является частью огромного фонового изображения, которое включает около 1/5 дизайна страницы.Мой начальник попросил меня поместить изображение логотипа поверх этого фонового изображения, чтобы его можно было скопировать или сохранить как отдельный файл.Он также хотел, чтобы пользователи могли ссылаться на домашнюю страницу, нажимая логотип.

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

Я завладел сайтом typo3 и обнаружил, что дизайн был в некотором роде таблиц DW.Мне нужно добавить это без полной реструктуризации в макет DIV.

Сайт находится здесь http://overbeckanalytics.com/typo3/menu-top/about-us.html, и если вам нужна дополнительная информация о коде, пожалуйста, спросите!

1 Ответ

0 голосов
/ 14 ноября 2011

Вам необходимо расположить a в структуре таблицы. Используя firebug, приведенный ниже код обычно работал для меня (небольшая подстройка была бы для того, чтобы сгладить его). Он добавляет div внутри строки таблицы, содержащей ссылки «Дом» и «Контакт». У div есть относительное положение, так что тег a может быть расположен абсолютно внизу, чтобы выровнять его по области логотипа. Опять же, некоторые положения пикселов, возможно, должны быть изменены, чтобы правильно расположить их, но общая идея заключается в том, что вам нужен тег a, расположенный внутри этого tr, чтобы эффект перемещался с изменением размера. 

<tr height="104">
  <td height="104" width="25" background="fileadmin/images/line_li.jpg"></td>
  <td height="162" width="826" valign="top" background="fileadmin/images/header_about_us2.gif" rowspan="2">
    <div style="width: 300px; height: 162px; position: relative; margin-bottom: -162px; z-index: 1;"><a style="background:none; position:absolute; bottom: 0; left: 0; height: 125px; width:300px;" href="http://overbeckanalytics.com"> <!-- <a href="http://overbeckanalytics.com" style="background:none; top: 112px; left: 228px;"> <!-- <img src="fileadmin/images/OAL_LOGO.png" border="none"> --> </a></div>
    <table height="104" width="826" cellspacing="0" cellpadding="0" border="0">
    ...more of you nested table code here...
    </table>
  </td>
  <td height="104" width="25" background="fileadmin/images/header_re.gif"></td>
</tr>
...