Bonsoir,
Depuis peu, j'ai décider de passer d'un design délimité à un design extensible. Bien sûr, cette évolution m'apporte son lot de problèmes et pour compliquer les choses, j'ai décidé de passer au HTML5 et pourquoi pas sur du CSS3 dans la mesure du possible.
Seulement voilà, j'ai un formulaire de connexion que j'ai été contraint de faire sous forme de tableau
Je souhaiterais placer ce formulaire a droite de ma bannière et que celui-ci soit mobile en cas de redimensionnement de la fenêtre. Jusqu'ici, rien de compliquer me direz-vous.
Dans le cadre d'un design extensible, je me fixe une largeur de 1024px minimum. Dans le cas ou le tableau arrive au seuil critique des 1024px je souhaite qu'il se fige !
Pour ceux qui n'aurait rien compris, je vous invite à regarder sur le site du Zér0 (Loin de moi l'envie de faire de la pub
). Vous verrez un cadre blanc en haut à droite. Observez maintenant son comportement lors du redimensionnement de la page.
C'est exactement l'effet désiré.
Je souhaiterais profiter de votre expérience pour voire d'éventuelle fautes sur mon script voire des améliorations.
Modifié par Vict0 (28 Dec 2010 - 23:22)
Depuis peu, j'ai décider de passer d'un design délimité à un design extensible. Bien sûr, cette évolution m'apporte son lot de problèmes et pour compliquer les choses, j'ai décidé de passer au HTML5 et pourquoi pas sur du CSS3 dans la mesure du possible.
Seulement voilà, j'ai un formulaire de connexion que j'ai été contraint de faire sous forme de tableau
Je souhaiterais placer ce formulaire a droite de ma bannière et que celui-ci soit mobile en cas de redimensionnement de la fenêtre. Jusqu'ici, rien de compliquer me direz-vous.
Dans le cadre d'un design extensible, je me fixe une largeur de 1024px minimum. Dans le cas ou le tableau arrive au seuil critique des 1024px je souhaite qu'il se fige !
Pour ceux qui n'aurait rien compris, je vous invite à regarder sur le site du Zér0 (Loin de moi l'envie de faire de la pub
). Vous verrez un cadre blanc en haut à droite. Observez maintenant son comportement lors du redimensionnement de la page.C'est exactement l'effet désiré.
Je souhaiterais profiter de votre expérience pour voire d'éventuelle fautes sur mon script voire des améliorations.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Expose ta mode - <?php echo $title; ?></title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="../design/design.css" />
</head>
<body>
<header>
<!-- Formlaire de connexion -->
<table>
<form>
<tr>
<td style="font-size:12px;">Pseudo :</td>
<td colspan="2"><input type="text" name="pseudo" class="ChampConnexion" /></td>
</tr>
<tr>
<td style="font-size:12px;">Mot de passe</td>
<td colspan="2"><input type="password" name="MotDePasse" class="ChampConnexion" /></td>
</tr>
<tr>
<td style="font-size:12px;">Rester connecter</td>
<td><input type="checkbox" name="ResterConnecter" /></td>
<td rowspan="2" align="right"><input type="submit" class="BoutonConnexion" value="" /></td>
</tr>
<tr>
<td colspan="2" style="font-size:10px;" ><a href="" class="MotDePasseOublie">J'ai oublié mon mot de passe.</a></td>
</tr>
</form>
</table>
<!-- Formlaire de connexion -->
</header>
<nav>
</nav>
<div id="contenu">
</div>
</body>
</html>
body{
margin:0;
padding:0;
font-family:Arial;
background:url('images/fond-banniere.png') repeat-x;
}
header{
display:block;
background:url('images/banniere.png') no-repeat;
height:150px;
width:1024px;
}
header table{
width:370px;
background-color:black;
color:#808080;
border:none;
}
header table form{
text-align:center;
}
.ChampConnexion{
background:url('images/champ.png') no-repeat;
border:none;
width:239px;
height:16px;
padding:4px;
margin-top:10px;
}
.BoutonConnexion{
background:url('images/connexion.png') no-repeat;
border:none;
width:118px;
height:27px;
}
.MotDePasseOublie{
text-decoration:none;
color:#808080;
}
nav{
display:block;
background:url('images/menu.png') no-repeat;
width:1047x;
height:96px;
}Modifié par Vict0 (28 Dec 2010 - 23:22)
