Sephirius2 | Bonjour à tous, on m'a proposé de créer un kit graphique pour un site web au couleur politique (Belgique, je n'en dirai pas plus ).
Donc j'ai réalisé un premier kit que je monte via un CSS et je construit une page html tt simple... Jusque la tout va bien... mais jusque mtnt je n'avais jamais travaillé en 1024 et je suis perdu... mon header est coupé il manque presque 2 cm à l'écran et il manque 2 cm sur tout le coté droit de mon site... ça me pose un petit problème surtout que je ne maitrise pas encore les codes CSS pr un site extensible.
Donc j'aurais besoin d'une infos... soit je crée un site extensible mais pour mettre ma bannière en flash ds un futur proche j'aurai des ruses, ou bien vous m'indiquez sous quel taille je dois développer mon kit graphique ou comment modifier mon CSS en sachant que j'ai défini le "body pour 1024"
Voila le code CSS (allégé juste les cadre principaux)
Code :
- /*la page*/
- body
- {
- width: 1024px;
- margin: auto;
- margin-top: 20px;
- margin-bottom: 20px;
- background-image: url("images/background_theme1.png" );
- }
- /* L'en-tête */
- #en_tete
- {
- width: 1024px;
- height: 180px;
- background-image: url("images/banniere.png" );
- background-repeat: no-repeat;
- margin-bottom: 10px;
- }
- /* Le menugauche*/
- #menugauche
- {
- float: left;
- width: 180px;
- }
- /*partie 1 = rechercher */
- .recherche
- {
- background-color: ;
- background-image: url("images/lateralg.jpg" );
- background-repeat: repeat;
- }
- .recherche form
- {
- padding: 0px;
- padding-left: 5px;
- margin: 5px;
- margin-bottom: 5px;
- }
- /*partie 2 = Menu 1&2 */
- .menugauche
- {
- background-color: ;
- background-image: url("images/lateralg.jpg" );
- background-repeat: repeat;
-
- /*border: 2px solid black; (utile pr la construction) */
-
- margin-bottom: 20px;
- }
- /* Quelques effets sur les menus */
- .menugauche h3
- {
- color: #B3B3B3;
- font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
- text-align: center;
- }
- .menugauche ul
- {
- list-style-image: url("images/leftpuce2.png" ); /* On change l'apparence des puces */
- padding: 0px;
- padding-left: 20px;
- margin: 10px;
- margin-bottom: 5px;
- }
- .menugauche a
- {
- color: #FFFAFA; /*snow*/
- }
- .menugauche a:hover
- {
- background-color: #800000; /*Maroon*/
- color: #FF4500; /*OrangeRed*/
- }
- /* Le menudroit*/
- #menudroit
- {
- float: right;
- width: 180px;
- }
- .menudroit
- {
- background-color: ;
- background-image: url("images/lateralg.jpg" );
- background-repeat: repeat;
-
- /*border: 2px solid black; (utile pr la construction) */
-
- margin-bottom: 20px;
- }
- /* Quelques effets sur les menus */
- .menudroit h3
- {
- color: #B3B3B3;
- font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
- text-align: center;
- }
- .menudroit ul
- {
- list-style-image: url("images/leftpuce2.png" );
- padding: 0px;
- padding-left: 20px;
- margin: 10px;
- margin-bottom: 5px;
- }
- .menudroit a
- {
- color: #FFFAFA; /*snow*/
- }
- .menudroit a:hover
- {
- background-color: #800000; /*Maroon*/
- color: #FF4500; /*OrangeRed*/
- }
- /* Le corps de la page */
- #corps
- {
- margin-left: 190px;
- margin-right: 190px;
- margin-bottom: 20px;
- padding: 5px;
-
- color: #B3B3B3;
- background-color: #626262;
- background-image: url("images/motif.png" );
- background-repeat: repeat-x;
-
- border: 2px solid black;
- }
- #corps h1
- {
- color: #B3B3B3;
- text-align: center;
- font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
- }
- #corps h2
- {
- height: 30px;
- background-image: url("images/titre.png" );
- background-repeat: no-repeat;
-
- padding-left: 30px;
- color: #B3B3B3;
- text-align: left;
- }
- /* Le pied de page */
- #pied_de_page
- {
- padding: 5px;
- text-align: center;
- color: #B3B3B3;
- background-color: #626262;
- background-image: url("images/motif.png" );
- background-repeat: repeat-x;
-
- border: 2px solid black;
- }
|
Si en lisant mon CSS vous avez une idée de simplification je suis preneur bien sur...
Merci Message édité par Sephirius2 le 24-07-2008 à 16:47:59
|