28172 sujets

CSS et mise en forme, CSS3

Petit coup de pouce pour la mise en place de mon design

Bonjour,

VOICI EN GROS CE QUE J'AIMERAIS OBTENIR :

Ma bannière entête, mon corps de page (contenu),
et mon pied de page font 760px de large. Je
souhaite qu'il soit au centre de la page.

Pour mon menu, j'aimerais qu'il soit en flottant sur le
côté droit, au même niveau que le corps de page, j'aimerais
qu'il soit évolutif, c'est à dire que sa hauteur pourra changer
dans le temps (sans mettre par terre tous les autres blocs)

Je prévois de mettre sur le côté gauche (pas encore fait),
d'autres blocs flottants pour de la pub, ou d'autres rubriques à venir

Et pour finir, j'aimerais bien que tout cela soit extensible (mais
je ne maîtrise pas bien cet aspect, et j'ai du mal à trouver des
tutoriel sur le design extensible)

VOICI LE CSS DESIGN ACTUEL (avec bien sûr des erreurs pour que
le menu soit bien placé, car en l'état il décale tout, je précise
que le menu est fait par un pro, je l'ai repris, il ne doit y avoir
donc pas d'erreurs dedans, mais je n'arrive pas à l'adapter à mon
design) :


body
{   
font-family:Verdana;  
margin: 10px 10px 10px 10px; 
background-image:url("images/antartic.jpg");
border: 3px solid white;
}

/* ENTETE */
#en_tete
{
   width: 760px;
   height: 90px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 10px;
   text-align: center;
   background-image:url("images/banniere1noambonnandcombis.jpg");
   background-repeat: no-repeat;
}

#entete a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
   color: white;
}



/* MENU DE GAUCHE */

ul ul {display: none; /* Rendre éléments visibles que lors du survol souris*/
position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px; 
border: 1px solid #B0B0B0; /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/
float: left;  
width: 15.5%; 
white-space: nowrap; 
background-image:url("");  
background-repeat: no-repeat; 
border: 3px solid white;
  
  
li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
  
li:hover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; 
border-bottom: 1px solid #B0B0B0;} /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/
  
li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;} /* Rendre éléments visibles que lors du survol souris*/

/*Pour IE6*/

li:hover, li.sfhover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}

#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {background-p


/* Le corps de la page */

#corps
{  
   margin:0 20% 0 20% ; 
   padding: 30px;
   
   
   color: black;
   background-image:url("images/partitionfondpourlecorps.jpg");
   border: 2px solid red;
   overflow: visible;
}

#corps a:hover
{
   background-color: #B3B3B3;
   color: black;
}



#corps h1
{
   color: black;
   text-align: center;
   font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps h2
{
   height: 30px;
   background-image: url("");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: black;
   text-align: left;
   font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps p
{
	font-size: 20px;
	text-indent: 60px; 
	color: black;
	text-align: justify;
    font-family: Georgia, "Times New Roman", Arial, serif;
}

a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
   color: blue;
   font-family: Georgia, "Times New Roman", Arial, serif;
}



/* CSS DE LA PAGE ACCUEIL*/

.linotebleue 
{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/notedemusique.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.linotebleue h2 
{
color: blue;
}

.liapprendrepiano {
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/livredeconnaissance.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}

.lisalondemusique{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquephonographes.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.lisalondemusique h1
{
color: purple;
}

.litelechargementpartitions{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquepartition.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.litelechargementpartitions h1
{
color: black;
}

.titreh2
{
margin-left: 70px;
}

.imageflottante
{
float: left;
margin-left: 0px;
}

.notedemusique
{
border: none;
}

.livredeconnaissance
{
border: none;
}

/* CSS DE LA PAGE INDEX*/
.drapeau
{
margin-right: 20px;
border-style: none;
}

/* PIED DE PAGE */

#pied_de_page
{
   width: 760px;
   height: 90px;
   padding: 0px;
   position: absolute;
   left: 240px;
   margin-top: 10px;
   text-align: center;
   color: #B3B3B3;
   background-color: #626262;
   background-image:url("images/bannieredubas.jpg");
   background-repeat: repeat-x;
   border: 2px solid black;
}

#sous_pied_de_page
{
	width: 760px;
	height: 20px;
	position: absolute;
    left: 240px;
	text-align: center;
	color: #B3B3B3;
	background-color: #626262;
	background-image: url("");
	background-repeat: repeat-x;
	border: 2px solid black;
}

#sous_pied_de_page a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: white;
}

#sous_pied_de_page a:hover
{
   background-color: #B3B3B3;
   color: black;
}

Modifié par Igor (30 Jul 2008 - 16:29)
Bonjour à toi et bienvenu sur le Forum Smiley smile

En tant de modératrice, je me dois de te rappeler quelques règles de base que tu as approuvé...
Mais malheureusement pas respecté. Smiley decu

L'une des Règles de base du forum consiste à d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Par ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

D'autre part, sache qu'un titre évocateur et une image valent mieux qu'un long discours...
Tu auras plus de chance d'avoir des réponses si tu illustres le problème rencontré. Smiley cligne

Bonne continuation Smiley smile
Bonjour,

Excusez-moi pour la maladresse de présentation du premier message

Pour ce qui de l'image, j'aurais bien aimé en charger une, mais je ne
sais pas comment on transforme une page web en image ?

VOICI EN GROS CE QUE J'AIMERAIS OBTENIR :

Ma bannière entête, mon corps de page (contenu),
et mon pied de page font 760px de large. Je
souhaite qu'il soit au centre de la page.

Pour mon menu, j'aimerais qu'il soit en flottant sur le
côté droit, au même niveau que le corps de page, j'aimerais
qu'il soit évolutif, c'est à dire que sa hauteur pourra changer
dans le temps (sans mettre par terre tous les autres blocs)

Je prévois de mettre sur le côté gauche (pas encore fait),
d'autres blocs flottants pour de la pub, ou d'autres rubriques à venir

Et pour finir, j'aimerais bien que tout cela soit extensible (mais
je ne maîtrise pas bien cet aspect, et j'ai du mal à trouver des
tutoriel sur le design extensible)

VOICI LE CSS DESIGN ACTUEL (avec bien sûr des erreurs pour que
le menu soit bien placé, car en l'état il décale tout, je précise
que le menu est fait par un pro, je l'ai repris, il ne doit y avoir
donc pas d'erreurs dedans, mais je n'arrive pas à l'adapter à mon
design) :



body
{
font-family:Verdana;
margin: 10px 10px 10px 10px;
background-image:url("images/antartic.jpg");
border: 3px solid white;
}

/* ENTETE */
#en_tete
{
width: 760px;
height: 90px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
text-align: center;
background-image:url("images/banniere1noambonnandcombis.jpg");
background-repeat: no-repeat;
}

#entete a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: white;
}



/* MENU DE GAUCHE */

ul ul {display: none; /* Rendre éléments visibles que lors du survol souris*/
position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px;
border: 1px solid #B0B0B0; /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/
float: left;
width: 15.5%;
white-space: nowrap;
background-image:url("");
background-repeat: no-repeat;
border: 3px solid white;


li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}

li:hover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;} /* bordure compatible avec IE6 au lieu d'utiliser 1px solid grey*/

li:hover ul.niveau2, li li:hover ul.niveau3 {display:block;} /* Rendre éléments visibles que lors du survol souris*/

/*Pour IE6*/

li:hover, li.sfhover {background-color: #FFFF70;}
li:hover ul.niveau2, li li:hover ul.niveau3, li.sfhover ul.niveau2, li li.sfhover ul.niveau3 {display: block}
li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}

#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
#monmenu li.plus {background-p


/* Le corps de la page */

#corps
{
margin:0 20% 0 20% ;
padding: 30px;


color: black;
background-image:url("images/partitionfondpourlecorps.jpg");
border: 2px solid red;
overflow: visible;
}

#corps a:hover
{
background-color: #B3B3B3;
color: black;
}



#corps h1
{
color: black;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps h2
{
height: 30px;
background-image: url("");
background-repeat: no-repeat;
padding-left: 30px;
color: black;
text-align: left;
font-family: Georgia, "Times New Roman", Arial, serif;
}

#corps p
{
font-size: 20px;
text-indent: 60px;
color: black;
text-align: justify;
font-family: Georgia, "Times New Roman", Arial, serif;
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: blue;
font-family: Georgia, "Times New Roman", Arial, serif;
}



/* CSS DE LA PAGE ACCUEIL*/

.linotebleue
{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/notedemusique.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.linotebleue h2
{
color: blue;
}

.liapprendrepiano {
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
list-style-type: none;
background-image:url("images/livredeconnaissance.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}

.lisalondemusique{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquephonographes.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.lisalondemusique h1
{
color: purple;
}

.litelechargementpartitions{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: black;
list-style-type: none;
background-image:url("images/musiquepartition.gif");
background-repeat: no-repeat;
background-position: 0%;
padding-left: 70px;
}
.litelechargementpartitions h1
{
color: black;
}

.titreh2
{
margin-left: 70px;
}

.imageflottante
{
float: left;
margin-left: 0px;
}

.notedemusique
{
border: none;
}

.livredeconnaissance
{
border: none;
}

/* CSS DE LA PAGE INDEX*/
.drapeau
{
margin-right: 20px;
border-style: none;
}

/* PIED DE PAGE */

#pied_de_page
{
width: 760px;
height: 90px;
padding: 0px;
position: absolute;
left: 240px;
margin-top: 10px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image:url("images/bannieredubas.jpg");
background-repeat: repeat-x;
border: 2px solid black;
}

#sous_pied_de_page
{
width: 760px;
height: 20px;
position: absolute;
left: 240px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("");
background-repeat: repeat-x;
border: 2px solid black;
}

#sous_pied_de_page a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
color: white;
}

#sous_pied_de_page a:hover
{
background-color: #B3B3B3;
color: black;
}
Sujet clos
Aller à