texte permutation et de l'ordre d'image en utilisant le CSS

Question

je dois échanger l'ordre visuel de 2 éléments en utilisant CSS

ordre HTML:

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

Ordre visuel nécessaire:

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

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

je peux » Je semble les amener à afficher correctement. J'ai un accès complet à XHTML et CSS, juste besoin d'échanger l'ordre visuel à des fins de référencement, tout en gardant le texte aussi loin que possible le code. Des cris de joie ...

Answer 1

La meilleure façon d'y aller, je pense, est

• donnant le texte div un padding-top: xyz pour faire de la place pour le logo, où xyz est la hauteur du logo

• et position: absolute; top: 0px; left: 0px le logo.

Cependant, je ne peux pas vraiment penser à un scénario SEO où cela donnerait un avantage notable.

Answer 2

essayer ...

#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> 

cet exemple suppose que vous avez une image de hauteur 300px et que vous voulez un rembourrage 20px entre l'image et le texte ci-dessous.

espérons que cela aide