Bonjour,
J'ai découpé cet après midi un design web. Mon but étant que le design puisse s'adapter en hauteur.
Le design a 3 colones. Il est composé ainsi :
Header
Menu | Cadre central | Bandeau décorratif
Bande etirable | | Bande etirable
Bas du design
Niveau images, il n'y a pas de probleme de découpe.
Voila mon code html :
<HTML>
<HEAD>
<TITLE></TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<div id="header">
</div>
<table border="0" cellspacing="0" width="974">
<tr>
<td width="267" height="741">
<div id="menu"><div>
</td>
<td width="633" rowspan="2">
<div id="background">
</div>
</td>
<td width="74" height="741">
<div id="bandeau"></div>
</td>
</tr>
<tr>
<td width="267">
<div id="left"></div>
</td>
<td width="74">
<div id="right"></div>
</td>
</tr>
</table>
<div id="bas">
</div>
</BODY>
</HTML>
Mon css :
div#header
{
background-image:url("images/header.png");
background-repeat:no-repeat;
height:388px;
width:974px;
}
div#menu
{
background-image:url("images/menu.png");
background-repeat:no-repeat;
height:741px;
width:267px;
}
div#background
{
background-image:url("images/background.png");
background-position:top;
background-repeat:no-repeat;
background-color:#c0b2b1;
width:633px;
}
div#bandeau
{
background-image:url("images/bandeau.png");
background-repeat:no-repeat;
height:741px;
width:74px;
}
div#bas
{
background-image:url("images/bas.png");
background-repeat:no-repeat;
height:120px;
width:974px;
}
div#left
{
background-image:url("images/left.png");
background-repeat:repeat-y;
width:267px;
}
div#right
{
background-image:url("images/right.png");
background-repeat:repeat-y;
width:74px;
}
Le design bug :
- Il ne s'affiche pas correctement les bandes latérales ne s'étirent pas assez.
http://erasia.network-hosting.com/work