Bonjour à tous,
Pour mon premier message sur ce forum je vous amène une petite colle...
Je dois réaliser l'intégration d'une charte graphique en xhtml / css, d'habitude je ne rencontre pas de problèmes particuliers car les charte sont très rectangulaires et optimisées pour la découpe.
Or, avec celle-ci, je galère....
Tout d'abord voici un aperçu de ce que j'ai déjà intégré (en réalité uniquement le header) (testé sous firefox uniquement).
La contrainte technique qui me bloque, est que le site dois avoir une largeur de 100% afin de s'adapter aux différentes résolutions supérieures à 1024*768.
Le fait que les angles en haut gauche et droite ne soit pas rectangulaires m'a poussé à découper le header en plusieurs div comme ceci :
Voici mon css :
Bon, pas de problèmes d'affichage particulier, mais comment faire pour que le header prenne 100% de la largeur avec des div qui ont des tailles fixes...
Après réflexion je pensais mettre un width: xx% dans #header-middle-left et #header-middle-right pour qu'ils complètent l'espace vide, mais la encore comment mélanger des tailles fixes et des % pour retrouver un 100% global ?
Je ne voit pas d'issues, je vient donc vous demander si vous avez une idée particulière ? N'hésitez surtout pas a démonter l'intégration que j'ai faite si des choses vous semblent abhérentes, aussi j'accepte volontier n'importe qu'elle technique pour m'en sortir, quitte a abandonner le travail déjà fait.
Je vous remercie par avance pour votre aide et me tient à votre disposition pour tout complément d'information.
(omg la phrase toute faite
)
Modifié par kromack (28 May 2008 - 21:19)
Pour mon premier message sur ce forum je vous amène une petite colle...
Je dois réaliser l'intégration d'une charte graphique en xhtml / css, d'habitude je ne rencontre pas de problèmes particuliers car les charte sont très rectangulaires et optimisées pour la découpe.
Or, avec celle-ci, je galère....
Tout d'abord voici un aperçu de ce que j'ai déjà intégré (en réalité uniquement le header) (testé sous firefox uniquement).
La contrainte technique qui me bloque, est que le site dois avoir une largeur de 100% afin de s'adapter aux différentes résolutions supérieures à 1024*768.
Le fait que les angles en haut gauche et droite ne soit pas rectangulaires m'a poussé à découper le header en plusieurs div comme ceci :
<div id="main-container">
<div id="header">
<div id="header-left"></div>
<div id="header-middle-left"></div>
<div id="header-center"></div>
<div id="header-middle-right"></div>
<div id="header-right"></div>
<div class="clearer"></div>
</div>
</div>Voici mon css :
@CHARSET "UTF-8";
.clearer {
clear: both;
overflow: hidden;
height: 0;
}
/* Structure */
body {
background-color: #81879a;
}
#main-container {
margin: 10px;
}
#header {
width: 100%;
height: 172px;
/*background-color: #707070;*/
/*border: 1px solid #3A3A3A;*/
}
#header-left {
background-image: url('../images-test/header-left.jpg');
background-position: left;
background-repeat: no-repeat;
width: 270px;
height: 270px;
float: left
}
#header-middle-left {
background-repeat: y;
height: 171px;
float: left;
border-top: 1px solid #3A3A3A;
border-bottom: 1px solid #3A3A3A;
background-color: #707070;
}
#header-center {
background-image: url('../images-test/header-center.jpg');
background-position: top center;
background-repeat: no-repeat;
width: 188px;
height: 172px;
float: left;
border-bottom: 1px solid #3A3A3A;
background-color: #707070;
}
#header-middle-right {
background-repeat: y;
height: 171px;
float: left;
border-top: 1px solid #3A3A3A;
border-bottom: 1px solid #3A3A3A;
background-color: #707070;
}
#header-right {
background-image: url('../images-test/header-right.jpg');
background-position: right;
background-repeat: no-repeat;
width: 341px;
height: 270px;
float: left;
}Bon, pas de problèmes d'affichage particulier, mais comment faire pour que le header prenne 100% de la largeur avec des div qui ont des tailles fixes...
Après réflexion je pensais mettre un width: xx% dans #header-middle-left et #header-middle-right pour qu'ils complètent l'espace vide, mais la encore comment mélanger des tailles fixes et des % pour retrouver un 100% global ?
Je ne voit pas d'issues, je vient donc vous demander si vous avez une idée particulière ? N'hésitez surtout pas a démonter l'intégration que j'ai faite si des choses vous semblent abhérentes, aussi j'accepte volontier n'importe qu'elle technique pour m'en sortir, quitte a abandonner le travail déjà fait.
Je vous remercie par avance pour votre aide et me tient à votre disposition pour tout complément d'information.
(omg la phrase toute faite
) Modifié par kromack (28 May 2008 - 21:19)
