l0g4n Expert en tout :o | Mesdames et messieurs, bonsoir....
Aujourd'hui, en codant salement un design pour un site devant être en ligne le plus rapidement, j'ai du m'arrêter à un problème un peu déroutant...
En effet, pour un cadre arrondie extensible, j'ai choisis la facilitée du tableau de neuf cases, contenant les coins, cotés et intérieur du cadre...
Bon, après quelques tâtonnements, j'arrive à coller les images les une au autres, mais un problème persiste...
Les coté "haut" et "bas" : composé tout deux de la même image de 50x1px dans un div contenu dans une cellule d'un tableau, ils s'étendent correctement....
Mais il n'en est rien pour les coté "droite" et "gauche", qui, pourtant construits de la même façon, à l'aide d'une image de 1x50, ne s'étendent pas à toute la cellule...
Ou plutôt, ne s'étendent pas du tout, car WebDeveloper m'indique un div de... 0x50....
Alors, je passe surement à coté de quelque chose, mais, si quelqu'un pouvait éclairer ma lanterne...
Le code css concerné :
*
{
margin: 0;
}
tr
{
margin: 0;
padding: 0;
border: 0;
}
td
{
margin: 0;
padding: 0;
border: 0;
}
table
{
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
border-spacing: 0;
}
.hg, .hd, .bg, .bd
{
width: 50px;
height: 50px;
}
.haut, .bas
{
background-image: url('images/haut_bas.png');
background-repeat: repeat-y;
height: 50px;
}
.gauche, .droite
{
background-image: url('images/cote.png');
background-repeat: repeat-x;
width: 50px;
}
.contenu
{
width: 700px;
background-color: #080808;
}
.hg
{
background-image: url('images/haut_gauche.png');
}
.hd
{
background-image: url('images/haut_droit.png');
}
.bg
{
background-image: url('images/bas_gauche.png');
}
.bd
{
background-image: url('images/bas_droit.png');
}
.haut, .bas, .droite, .gauche
{
background-color: #080808;
}
|
Et le html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>~~Moroi~~</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="banniere"></div>
<div class="news">
<table>
<tr><td><div class="hg"></div></td><td><div class="haut"></div></td><td><div class="hd"></div></td></tr>
<tr><td><div class="gauche"></div></td><td><div class="contenu">
<h3>TEST</h3>
le jour
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar condimentum posuere. Aliquam pharetra elit eu sem facilisis a dignissim ipsum aliquam. Fusce faucibus augue vitae mauris congue non fringilla est consequat. Sed in tellus nibh. In sed lacinia odio. Vivamus scelerisque enim non leo volutpat vitae facilisis purus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor mi in est ullamcorper luctus. Integer ac libero ante. Nunc dignissim pulvinar varius. Proin semper orci a nunc ornare tempor.
Praesent erat dolor, condimentum in euismod at, elementum at risus. Vivamus adipiscing malesuada sem, eu hendrerit lectus scelerisque nec. Nulla ipsum elit, congue in faucibus in, interdum non sapien. Ut in elementum dolor. In id quam dui, in bibendum orci.
</p>
</div></td><td><div class="droite"></div></td></tr>
<tr><td><div class="bg"></div></td><td><div class="bas"></div></td><td><div class="bd"></div></td></tr>
</table>
</div>
|
Ah pis, pour ceux qui aimerais se rendre compte par eux même : le site, encore en construction : http://moroi.webou.net/index.php?page=news (oui, le cadre n'est pour l'instant présent que sur cette page)
Par avance, merci, bonne nuit, toussa 
EDIT : c'moi le dev php... S'pour sa que je bloque sur un truc alakhon...
Message édité par l0g4n le 03-08-2009 à 01:42:25
---------------
Fort et motivé. Sauf parfois.
|
FORUM HardWare.fr
)