28172 sujets

CSS et mise en forme, CSS3

Bordure sur un div extensible : utiliser des images

Bonjour,

J'aimerais savoir s'il existe un moyen pas trop "usine à gaz" pour créer un div dont le background est une répétition d'une image (ça c'est bon), et dont les bordures sont également des images.

Ceci sans créer une image entière avec une taille précise car j'aimerais que le div prenne des dimensions différentes.

Je ne peux donc pas utiliser une image en background que je répéterais à l'horizontal ou à la vertical qui contiendrait les bordures de chaque côté car j'aimerais qu'il soit extensible aussi bien en largeur qu'en hauteur.

Des suggestions ?

Merci
A+
ah oui j'étais tombé sur ce tuto mais justement je me demandais s'il n'y avait pas un moyen "plus simple" mais bon je doute en effet... Smiley smile
J'ai essayé le premier exemple de flattazor, et apparemment ca ne fonctionne pas...
J'ai recopié le code et sauf erreur de ma port, c'est décalé.

Mais je n'ai pas trouvé la démo en live de l'auteur donc peut être que j'ai mal recopié un bout.

A voir
bonjour,

je suis moi aussi parti du tuto de flatazor et je l'ai un peu adapté...
en effet sa marche bien

mais il faut que la div sur laquelle on impose les bordure soit en position relative.

    .twoColHybLtHdr #footer {
	background-color: #419184;
	width: 100%;
	position: relative;
    }

le css des bordures :

    .hgauche {
	position:absolute;
	background:url(images/tl_vert.jpg) left top;
	background-repeat:no-repeat;
	top:0px;
	left:0px;
	height:50px;
	width:50px;
    }		
    .hdroite {
	position:absolute;
	background:url(images/tr_vert.jpg) top right;
	background-repeat:no-repeat;
	top:0px;
	right:0px;
	height:50px;
	width:50px;
    }		
    .bgauche {
	position:absolute;
	background:url(images/bl_vert.jpg) bottom left;
	background-repeat:no-repeat;
	bottom:0px;
	left:0px;
	height:50px;
	width:50px;
    }		
    .bdroite  {
	position:absolute;
	background:url(images/br_vert.jpg) bottom right;
	background-repeat:no-repeat;
	bottom:0px;
	right:0px;
	height:50px;
	width:50px;
    }		
    .haut {
	top:0px;
	height:50px;
	background:url(images/t_vert.jpg) repeat-x 0 0;
    }		
    .bas {
	background:url(images/b_vert.jpg) repeat-x 0 100%;
    }	
    .gauche {
	background:url(images/l_vert.jpg) repeat-y 0 0;
	background-position:center left;
    }		
    .droite {
	background:url(images/r_vert.jpg) repeat-y 100% 0;
	background-position:center right;
    }


le php:

        <div id="footer">
            <div class="gauche">
            <div class="droite">
            <div class="haut">
            <div class="bas">
            <div class="hgauche"></div>
            <div class="hdroite"></div>
            <div class="bgauche"></div>
            <div class="bdroite"></div>
      
        <?php
    include('footer.htm');
?>          
                </div>
                </div>
                </div>
                </div>
		</div>


mon petit fichier footer.htm:

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
#boite {
	margin: 50px;
}
  

</style>
</head>

<div id="boite">
  <p>tgdrg</p>
  <p>djxdtj</p>
  <p>trketk</p>
  <p> </p>
</div>

<p> </p>


et sa marche .... Smiley cligne
il doit même avoir moyen de gérer les *.gif en indiquant le background dans le footer.htm et en indiquant none dans le php. je vais essayer...
Sujet clos
Aller à