frontière sur le côté pour continuer tout le long de la page dynamique?

Question

une bordure, bgr_left.jpg, que je veux continuer sur le y-axel sur ma page ...

le bgr_left.jpg est 30px par 30px et je l'ai placé dans une balise div ... Je veux aussi la même frontière du côté droit, et sur le dessus tout le chemin à travers ...

Je ne peux pas obtenir ce fait, Heres mon code CSS de frontière gauche:

.bgr_left { 
    background-image: url(../Graphics/bgr_left.jpg); 
    background-repeat: repeat-y; 
    background-position: left; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 100%; 
    width: 30px; 
    background-color: #E7F5F0; 
} 

Merci pour tous help

Answer 1

Vous pouvez le faire en utilisant une table ou par dynamiquement sizi ng un div.

Table méthode

Bien que quelque chose comme cela devrait mieux dans un navigateur Web, les moteurs de recherche et d'autres consommateurs informatiques pourraient mal interpréter parce que vous en utilisant la balise de table pour baliser le contenu non sous forme de tableau.

<table> 
    <tr> 
    <td colspan="3" class="bgr_top"/> 
    </tr> 
    <tr> 
    <td class="bgr_left" /> 
    <td>Content content content</td> 
    <td class="bgr_bottom" /> 
    </tr> 
    <tr> 
    <td colspan="3" class="bgr_bottom"/> 
    </tr> 
</table> 

div dynamique

Avec l'aide de jQuery, nous pouvons émettre HTML sémantiquement correct, mais aussi de créer le rendu souhaité dans les navigateurs Web. Échantillon non testé:

<p class="bgr">Content content content</p> 

<script type="text/javascript"> 
    $('.bgr').each(function(i,el){ 
    $('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this)); 
    // similar for top, right, and bottom 
    }); 
</script>