Bonjour, je suis en train de creer un site et j'ai queslques probléme de mise en page.
le site en ligne:
http://cyrille.flour.free.fr/Mise%20en%20igne/Index.htm
en fait dans la partie centrale j'ai du mal a ajuster mon texte par rapport aux photos...Pour l'instant j'utilise des tableaux car j'aimerais faire une disposition un peu comme ce que je fais,c'est a dire une photo a gauche et le texte en face,puis une photo a droite et le texte a sa gauche.
mes questions:
1)a mon avis les tableaux ne sont pas l'ideal,mais je ne vois pas comment faire autrement.comment puis je faire?quelle est le meilleur moyen d'afficher ce que je veux a l'endroit que je veux?
2)Dans mon menu,quand on survole un lien, une petite boite apparait,j'ai entendu parler de la comande z-index,mais comment l'utilises t'on?
mon css:
je vous fais pitié de mon html qui est assez long
Modifié par averell22 (08 Jan 2006 - 21:21)
le site en ligne:
http://cyrille.flour.free.fr/Mise%20en%20igne/Index.htm
en fait dans la partie centrale j'ai du mal a ajuster mon texte par rapport aux photos...Pour l'instant j'utilise des tableaux car j'aimerais faire une disposition un peu comme ce que je fais,c'est a dire une photo a gauche et le texte en face,puis une photo a droite et le texte a sa gauche.
mes questions:
1)a mon avis les tableaux ne sont pas l'ideal,mais je ne vois pas comment faire autrement.comment puis je faire?quelle est le meilleur moyen d'afficher ce que je veux a l'endroit que je veux?
2)Dans mon menu,quand on survole un lien, une petite boite apparait,j'ai entendu parler de la comande z-index,mais comment l'utilises t'on?
mon css:
/* CSS Document */
body{background:url("Photos/fondsite.jpg")}
/*Mise en place de la struture de cadres*/
.entier {border-style:solid; border-width:0px; border-color:black; width:983px; margin-top:-10px;}
.haut {border-style:solid; border-width:0px; border-color:black; width:978px; height:100px; float:left;}
.barre1 {border-style:solid; border-width:0px; border-color:black; width:180px; height:42px; float:left;text-align:center;}
.barre2 {border-style:solid; border-width:0px; border-color:black; width:794px; height:42px; float:left;background-image:url(Photos/barre_haut.jpg);}
.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; float:left;}
.centre {font-family:Arial, Serif; border-style:solid; border-width:0px; border-color:black; width:794; float:left;}
.pieddepage {border-style:solid; border-width:0px; border-color:black; background-image: url(Photos/piedpage1.gif); width:978px;float:left; background-repeat:repeat;}
/*Définition des polices d'écritures et du centrage des textes et images*/
.pied1 {text-align:center; font-size:small;text-align:center;}
.date-heure {font-size:0.8em;font-weight:bold; font-family: Arial,"Arial Black","Courier New","Comic Sans MS", Georgia ,Impact ,"Times New Roman" ,"Trebuchet MS" ,Verdana, Arial, Serif;}
.centrage1 {position:relative;float:right}
.police1 {font-family:Arial;font-size:0.8em;left:30px;position: relative;align:left}
.police2 {font-family:Arial;font-size:0.8em;left:30px;position: relative;align:right}
td.tableau1{width="50%";}
/*définitions de la barre de menu en haut*/
.barre {valign:center;}
/*définitions des roolover des menus gauche droite*/
table tr td a{text-decoration: none;color:black;position: relative;display:block;font-weight:normal;width:100%} /*background-image: url(Sunset.jpg);*/
table tr td a:hover{text-decoration: none;color:navy;display:block;font-weight:bold;width:100%;background-image: url(Photos/rolloverfond.jpg);}
a{display: block;position: relative}
td.class1{height=10px;}
/*Définitions des boites explicatives des menus*/
a:hover {border-bottom: 0px;}/* indispensable pour IE seulement */
a span {display:none ; /* cache les <span> placés dans un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span> */
color:black} /* met le texte <span> en noir */
a.class1:hover span {
display: block; /* Montre le texte <span> lors du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise de l'écran */
top: 0px;
left: 173px;
width: 100px;
height:auto;
background-image:url(Photos/contenuboite.jpg);
border:inset; /* Style de bordure */
padding: 4px; /* Marge intérieure à la bordure */
text-align:center} /* Centrage du nom de l'image */
/*Définition des menus a gauche (boite+ombre)*/
.ombreg { /* boite d'arrière plan dont le débordement crée l'ombrage */
width:170px; /* largeur de la boite, en pixels 170*/
height:auto; /* hauteur de la boite, en pixels 240*/
background-color:black;} /* couleur de la boite, donc de l'ombre */
.boiteg { /* boite principale */
width:170px; /* largeur de la boite, en pixels */
height:auto; /* hauteur de la boite, en pixels 240*/
background-image:url(Photos/contenuboite.jpg);/*couleur de fond de la boite ou background-color:#CC99FF;*/
border: solid 2px black; /* style de la bordure de la boite */
position:relative; /* indique un décalage par rapport à la position normale */
top:-3px; /* décalage de 3 pixels vers le haut */
left:-3px;} /* décalage de 3 pixels vers la gauche */
je vous fais pitié de mon html qui est assez long
Modifié par averell22 (08 Jan 2006 - 21:21)