conseil pour réalisation d'une css

**Edta** · 21/10/2008, 16h40

Bonjour,

Voilà je souhaiterai avoir quels que consiels par rapport à la réalisation d'une css.
alors je souhaite que le contenu de la page soit dans un cadre au milieu de la page (taille: 1024 x 768). Ca j'ai reussi à le faire, mon problème est comment intégrer mon contenu dans ce cadre.

Le cadre est composé :
- un bandeau vertical contenant à gauche deux petits drapeaux (le premier pour mettre le site en anglais, le deuxième pour mettre le site en anglais) et à l'opposé (donc à droite) le logo du logiciel
- une zone qui contiendra un tableau

Je rencontre deux problèmes :
- le premier est que le logo se met du même côté que les drapeaux, juste au dessus d'eux
- le deuxième est lorsque je n'utilise plus uniquement des images pour les drapeaux, mais le tag <h:form> de la librairie JSF ma page devient complétement blanche

Souhaiterai savoir également, s'il est possible de créer une sorte de macro que je peux appeler dans toutes mes pages JSP pour afficher se bandeau où doi-je obligatoirement copier/coller se code à chaque fois?

code de la page JSP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
 
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <f:view locale="#{languageBean.locale}">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" href="resources/style.css" type="text/css"/>
            <title>${bundle.login_title}</title>
        </head>
        <body>
            <div id="cadre">
                <div class="logo">&nbsp;</div>
                <div class="language">
                    <!-- <h:form id="form_language">
                        <h:commandLink id="language_en" action="#{languageBean.changeToEn}">
                            <h:graphicImage alt="En" title="En" value="resources/images/flag_en.gif"/>
                        </h:commandLink>
                        &nbsp;
                        <h:commandLink id="language_fr" action="#{languageBean.changeToFr}">
                            <h:graphicImage alt="Fr" title="Fr" value="resources/images/flag_fr.gif"/>
                        </h:commandLink>
                    </h:form> -->
                   <img src="resources/images/flag_en.gif"/>
                   <img src="resources/images/flag_fr.gif"/>
                </div>
            </div>
        </body>
    </f:view>
</html>

code de la css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
/** global design */
body {
   font-family: sans-serif;
   color: #000000;
   background: #000000;
}
 
div#cadre {
    width: 1024px;
    height: 768px;
    background: #CCFFFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
 
}
 
/** Select language */
div.language {
   position: absolute;
   height: 44px;
}
 
div.language img {
   width: 30px;
   height: 17px;
   border: 0px;
}
 
/** logo  */
div.logo {
   background-image: url(images/logo_small.jpg);
   background-repeat : no-repeat;
   background-position: top right;
   width:325px;
   height:44px;
}

Merci de votre aide

**HiRoN** · 22/10/2008, 10h54

Salut,

Voilà je souhaiterai avoir quels que conseils par rapport à la réalisation d'une css.

Pour les notions de base, je te conseille de faire un tour ici.

Le premier est que le logo se met du même côté que les drapeaux, juste au dessus d'eux

Un petit tour ici pourrait t'aider à acquérir les bonnes notions sur le placement & la mise en forme via CSS.

Le deuxième est lorsque je n'utilise plus uniquement des images pour les drapeaux, mais le tag <h:form> de la librairie JSF ma page devient complétement blanche

Il faudrait voir le code généré je pense pour tenter de comprendre le problème (tu n'utilises pas des balises (x)HTML "standard").

Souhaiterai savoir également, s'il est possible de créer une sorte de macro que je peux appeler dans toutes mes pages JSP pour afficher se bandeau où doi-je obligatoirement copier/coller se code à chaque fois?

En php, se serait avec un "include" par exemple. Je ne serai dire s'il y a un équivalent en JSP...

Pour CSS lire les tutoriels et cours de formation pour apprendre CSS : http://css.developpez.com/cours/