Bonsoir à tous ! 
J'ai lu avec beaucoup d'enthousiasme les derniers articles postés ici-même en rapport avec CSS3. J'ai donc décidé d'installer Firefox 3.6b4 (qui semble, au passage, souffrir de quelques problèmes vis-à-vis de la soumission de formulaires ?) et de faire joujou avec ces nouvelles propriétés.
J'essaie donc de recréer quelque chose du genre en full-css. A savoir, la page "scindée" en deux dans sa hauteur, munie d'un dégradé linéaire vertical sur toute sa superficie. Jusque là, aucun problème, tout roule au poil. Voici d'ailleurs un bout de code :
Le code HTML :
Le code CSS commun à tous les navigateurs :
Le code CSS propre à Firefox 3.6 :
Je tente maintenant de reproduire le dégradé qui donne justement cet effet de scission verticale au centre de la page. Et là, c'est le drame : j'ignore s'il est possible de définir une hauteur à un dégradé. J'ai pour l'instant cette règle appliquée à la moitié gauche de la page :
J'obtiens effectivement un dégradé radial partant du centre de la page et s'étendant sur la moitié de gauche, mais il fait donc 30px de haut. Je souhaiterais qu'il garde sa largeur de 30px mais qu'il emploie toute la hauteur de la page. Est-ce seulement possible ?
Quoi qu'il en soit, je remercie d'ores et déjà ceux qui prendront la peine de me lire.
Modifié par SolykZ (05 Dec 2009 - 00:19)
J'ai lu avec beaucoup d'enthousiasme les derniers articles postés ici-même en rapport avec CSS3. J'ai donc décidé d'installer Firefox 3.6b4 (qui semble, au passage, souffrir de quelques problèmes vis-à-vis de la soumission de formulaires ?) et de faire joujou avec ces nouvelles propriétés.
J'essaie donc de recréer quelque chose du genre en full-css. A savoir, la page "scindée" en deux dans sa hauteur, munie d'un dégradé linéaire vertical sur toute sa superficie. Jusque là, aucun problème, tout roule au poil. Voici d'ailleurs un bout de code :
Le code HTML :
<body>
<div id="main_container">
<div id="left_half">
</div>
<div id="right_half">
</div>
</div>
</body>Le code CSS commun à tous les navigateurs :
* {
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
}
html, body, #main_container, #left_half, #right_half {
height: 100%;
}
body {
background: #000000;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", Arial, sans-serif;
font-size: 1em;
}
#main_container {
background: black;
}
#left_half, #right_half {
position: absolute;
top: 0;
width: 50%;
}
#left_half {
left: 0;
}
#right_half {
right: 0;
}Le code CSS propre à Firefox 3.6 :
#main_container {
background: -moz-linear-gradient(top,
#000000 0%,
#EECCBB 100%
);
}Je tente maintenant de reproduire le dégradé qui donne justement cet effet de scission verticale au centre de la page. Et là, c'est le drame : j'ignore s'il est possible de définir une hauteur à un dégradé. J'ai pour l'instant cette règle appliquée à la moitié gauche de la page :
#left_half {
background: -moz-radial-gradient(right, ellipse,
rgba(0, 0, 0, 255) 0,
rgba(0, 0, 0, 0) 30px
);
}J'obtiens effectivement un dégradé radial partant du centre de la page et s'étendant sur la moitié de gauche, mais il fait donc 30px de haut. Je souhaiterais qu'il garde sa largeur de 30px mais qu'il emploie toute la hauteur de la page. Est-ce seulement possible ?
Quoi qu'il en soit, je remercie d'ores et déjà ceux qui prendront la peine de me lire.
Modifié par SolykZ (05 Dec 2009 - 00:19)
