замена текста и порядка изображений с помощью CSS - PullRequest
Новая
       23

замена текста и порядка изображений с помощью CSS

0 голосов
/ 29 января 2010

Мне нужно поменять местами визуальный порядок 2 элементов с помощью CSS

Заказ HTML: 

<div id="text-content">
....
</div>
<div id="header-image">
....
</div>

Требуется визуальный заказ: 

   ______________________ 
  |   image              |
  |   (fixed height)     |
  |______________________|

   ______________________ 
  |   text               |
  |   (variable height)  |
  |______________________|

Я не могу заставить их отображаться правильно. У меня есть полный доступ к XHTML и CSS, просто нужно поменять местами визуальный порядок для целей SEO, сохраняя при этом текст как можно дальше от кода. Приветствия ...

Ответы [ 2 ]

1 голос
/ 29 января 2010

Лучший путь, я думаю, это

  • давая тексту div a padding-top: xyz, чтобы освободить место для логотипа, где xyz - высота логотипа

  • и position: absolute; top: 0px; left: 0px логотип.

однако, я не могу придумать ни одного сценария SEO, где это дало бы какое-либо заметное преимущество.

0 голосов
/ 29 января 2010

попробуйте это ... 

#text-content {float: left; margin: 320px 0 0 0;}
#header-image {float: left; position: absolute;}

<div id="text-content">
    Image description
</div>
<div id="header-image">
    <img src="test.gif" alt="image"/>
</div>

В этом примере предполагается, что у вас есть изображение высотой 300px, и вы хотите заполнить 20px между изображением и текстом ниже.

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

...