Aller au contenu

Besoin de votre aide et de vos corrections

Gros N@z

Par Gros N@z
dans (X)HTML et CSS

 Partager

Sujets conseillés

Gros N@z

Gros N@z

Posté
Posté

Bonjour,

Je dois adapter quelques trucs à un design existant mais le problème est que jai quelques lacunes en CSS :D Jusqu'à présent, jai fait de mon mieux mais je narrive pas à faire quelques trucs...

- Je narrive pas à mettre un paragraphe à coté de mon menu image sans le décaler

- Mon menu image ne prend pas la même largeur dès le 1er chargement puis lorsquon lutilise

- Dans le bas de page, mes logos ne saffichent pas à taille réelle (pourtant je ne vois pas doù ça peut venir) et décalent mes li du footer.

- Dernier point : plus tard, jaurai besoin dune colonne à gauche de mon texte pour mettre des sous menus. Comment faire ? :)

Que faire pour mes problèmes ? un autre div à coté de mon menu ? Quelles propriétés lui mettre ? Idem pour mes logos du bas ?

Et sil est possible que l'on vérifie ce que jai fait, histoire de voir sil ny a pas trop de bêtises dans le css.

Voici mon code xhtml :

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>xxx</title>

<link href="./includes/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="includes/mootools.js"></script>

<script type="text/javascript" src="includes/imageMenu.js"></script>

</head>

<body>

<div id="topNav">

<a href="index.html" title="xxx"><img src="images/logo-xxxx.png" alt="xxxx" /></a>

<ul>

<li><a href="#" title="A propos" class="hover">A propos</a></li>

<li><a href="#" title="Plan du site">Plan du site</a></li>

<li><a href="#" title="Nos partenaires">Nos partenaires</a></li>

<li><a href="#" title="Contact">Contact</a></li>

</ul>

</div>

<div id="body">

<div id="topShadow"></div>

<div id="bodyPannel">

<p>aaaaaa</p>

<div id="imageMenu">

<ul>

<li class="accueil"><a href="#">Accueil</a></li>

<li class="quisommesnous"><a href="#">Qui sommes-nous ?</a></li>

<li class="activite"><a href="#">Notre activité</a></li>

<li class="recrutement"><a href="#">Recrutement</a></li>

</ul>

</div>

<br class="spacer" />

<div id="midle">

<h2>xxxx - <span>Présentation</span></h2>

<p>Ullamcorper ipsum rutrum Aliquam ut eget Integer nulla lacinia nibh vestibulum.

Nulla Proin elit pretium nulla sem interdum et Vivamus tellus vestibulum.

Mauris Curabitur metus ante ornare nunc tempor Vestibulum magnis quis ligula.

Ut sed Maecenas adipiscing sapien turpis ac pede Nulla platea facilisi.

Curabitur eros sed id nisl non ut condimentum risus eu velit. Cursus.</p><br />

<p>Ullamcorper ipsum rutrum Aliquam ut eget Integer nulla lacinia nibh vestibulum.

Nulla Proin elit pretium nulla sem interdum et Vivamus tellus vestibulum.

Mauris Curabitur metus ante ornare nunc tempor Vestibulum magnis quis ligula.

Ut sed Maecenas adipiscing sapien turpis ac pede Nulla platea facilisi.

Curabitur eros sed id nisl non ut condimentum risus eu velit. Cursus.</p>

<a href="#" title="En savoir plus" class="more">En savoir plus</a>

<br class="spacer" />

</div>

<div id="colorBg"></div>

</div>

<div id="bottomShadow"></div>

<br class="spacer" />

</div>

<div id="footer">

<a href=&quot;http://validator.w3.org/check?uri=referer" target="_blank" title="XHTML Validation" class="xhtml"></a>

<a href=&quot;http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="CSS Validation" class="css"></a><br />

<a href=&quot;http://www.xiti.com" target="_blank" title="XiTi" class="xiti"></a>

<ul>

<li><a href="#" title="Accueil" class="hover">Accueil</a>|</li>

<li><a href="#" title="A propos">A propos</a>|</li>

<li><a href="#" title="Nos partenaires">Nos partenaires</a>|</li>

<li><a href="#" title="Mentions légales">Mentions légales</a>|</li>

<li><a href="#" title="Plan du site">Plan du site</a>|</li>

<li><a href="#" title="Contact">Contact</a></li>

</ul>

<br class="spacer" />

</div>

<script type="text/javascript">

window.addEvent('domready', function(){

var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});

});

</script>

</body>

</html>

Voici mon code css :

CODE
body{

background:url(images/bg.png) repeat-x 0 0 #FDF9EE; color:#4E4628;

font:normal 14px/19px Arial, Helvetica, sans-serif;

margin:0; padding:0;}

div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a{

margin:0; padding:0;}

ul{

list-style:none;}

.spacer{

font-size:0; line-height:0; clear:both;}

/* ----------------- top navigation start --------------------- */

#topNav{

width:728px; position:relative;

margin:0 auto; padding:8px 0 0 0px;}

#topNav img{

border:none; float:left; margin:0 32px 0 0;}

#topNav ul{

background:url(../images/top_ul_bg.png) no-repeat 0 8px;

width:503px; height:23px; padding:8px 0 0 8px; margin:0 0 0 235px;}

#topNav ul li{

background-color:#E1DBC7; color:#0B0B0B; float:left;

font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#topNav ul li a{

background-color:#E1DBC7; color:#0B0B0B;

font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;

text-align:center; text-decoration:none;

width:120px; height:23px; display:block;}

#topNav ul li a.hover{

background:url(../images/top_btn_h.png) no-repeat 0 0 #E1DBC7; color:#FFFFFF;

font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;

text-align:center; text-decoration:none;

width:120px; height:23px; display:block;}

#topNav ul li a:hover{

background:url(../images/top_btn_h.png) no-repeat 0 0 #E1DBC7; color:#FFFFFF;

font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;

text-align:center; text-decoration:none;

width:120px; height:23px; display:block;}

/* ----------------- top navigation end --------------------- */

/* ----------------- shadow start --------------------------- */

#topShadow{

background:url(../images/top_shadow.png) no-repeat 0 0 #FDF9EE; color:#4E4628;

width:778px; height:34px; margin:9px 0 0; float:left;}

#bottomShadow{

background:url(../images/bottom_shadow.png) no-repeat 0 0 #FDF9EE; color:#4E4628;

width:778px; height:24px; float:left;}

/* ----------------- shadow end --------------------------- */

/* ----------------- body start --------------------------- */

#body{

width:778px; margin:0 auto; position:relative;}

#bodyPannel{

background:url(../images/midle_bg.png) repeat-y 0 0 #FDF9EE; color:#4E4628;

width:722px; padding:0 28px; float:left;}

#midle{

padding:50px 0 0 0;}

#midle h2{

background-color:#FFFFFF; color:#0B0B0B;

font:normal 28px/46px Georgia, "Times New Roman", Times, serif;}

#midle h2 span{

background-color:#FFFFFF; color:#A60101;

font:normal 28px/46px Georgia, "Times New Roman", Times, serif;}

#midle p{

font:normal 14px/19px Arial, Helvetica, sans-serif; background-color:#FFFFFF; color:#4E4628;}

#midle a.more{

background:url(../images/more_bg.png) no-repeat 75px 0 #FFFFFF; color:#01517c; float:right;

font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none;

padding:0 20px 0 0; margin:5px 35px 0 0;}

#midle a.more:hover{

background:url(../images/more_bg_h.png) no-repeat 75px 0 #FFFFFF; color:#3d94c3; float:right;

font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none;

padding:0 20px 0 0; margin:5px 35px 0 0;}

#colorBg{

background-color:#FCFAF3; float:left; color:#0B0B0B;

margin:18px 0 0 0; padding:18px 40px 18px 38px; width:642px;}

/* ----------------- body end --------------------------- */

/* ----------------- footer start --------------------------- */

#footer{

position:relative;

margin:0 auto;

width:678px;

padding:8px 0 0;

}

#footer a.xhtml{

background:url(../images/logo-xhtml.png); color:#FFFFFF;

width:81px; height:16px;

margin:0 6px 0 -42px;

float:left;

}

#footer a.xhtml:hover{

background:url(../images/logo-xhtml-h.png); color:#FFFFFF;

width:81px; height:16px;

margin:0 6px 0 -42px;

float:left;

}

#footer a.css{

background:url(../images/logo-css.png); color:#FFFFFF;

width:81px; height:16px;

margin:0 6px 0 0;

float:left;

}

#footer a.css:hover{

background:url(../images/logo-css-h.png); color:#FFFFFF;

width:81px; height:16px;

margin:0 6px 0 0;

float:left;

}

#footer a.xiti{

background:url(../images/logo-xiti.png); color:#FFFFFF;

width:81px; height:16px;

margin:0 6px 0 -42px;

float:left;

}

#footer ul{

float:right;}

#footer ul li{

float:left; color:#0B0B0B; background-color:#FDF9EE;

font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer ul li a{

color:#0B0B0B; background-color:#FDF9EE; padding:0 8px; text-decoration:none;

font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer ul li a:hover{

color:#0B0B0B; background-color:#EFEBDE; padding:0 8px; text-decoration:none;

font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer p{

color:#A90000; background-color:#FDF9EE; padding:0 8px; float:right;

font:normal 12px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer p.tworld{

color:#0B0B0B; background-color:#FDF9EE; padding:0 8px; float:right;

font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer p.tworld a{

color:#0B0B0B; background-color:#FDF9EE; text-decoration:none;

font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#footer p.tworld a:hover{

color:#0B0B0B; background-color:#EFEBDE; text-decoration:none;

font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}

/* ----------------- footer end --------------------------- */

/* Image Menu */

#imageMenu {

margin:-51px 342px;

}

#imageMenu ul {

list-style: none;

margin: 0px;

display: block;

height: 200px;

width: 410px;

}

#imageMenu ul li {

float: left;

}

#imageMenu ul li a {

text-indent: -1000px;

background:#FFFFFF none repeat scroll 0%;

border-right: 2px solid #fff;

cursor:pointer;

display:block;

overflow:hidden;

width:98px;

height: 200px;

}

#imageMenu ul li.accueil a {

background: url(../images/accueil2.jpg) repeat scroll 0%;

}

#imageMenu ul li.quisommesnous a {

background: url(../images/qui_sommes_nous.jpg) repeat scroll 0%;

}

#imageMenu ul li.activite a {

background: url(../images/activite.jpg) repeat scroll 0%;

}

#imageMenu ul li.recrutement a {

background: url(../images/recrutement.jpg) repeat scroll 0%;

}

.clear {

clear: both;

}

Merci beaucoup !

ps : vous pouvez récupérer le tout ici si vous préférez.

Lien vers le commentaire
Partager sur d’autres sites
Gros N@z

Gros N@z

Posté
  • Auteur
Posté

Pour le texte à coté du menu, j'ai essayé de mettre un flottant mais cela ne fonctionne pas.

J'ai fait :

<div id="bodyPannel">

<div id="presentation">

<p>aaaaaa aaaaaa aaaaa aaaaaaa aaaaaaaaaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaaa</p>

</div>

<div id="imageMenu">

<ul>

<li class="accueil"><a href="#">Accueil</a></li>

<li class="quisommesnous"><a href="#">Qui sommes-nous ?</a></li>

<li class="activite"><a href="#">Notre activité</a></li>

<li class="recrutement"><a href="#">Recrutement</a></li>

</ul>

</div> .....

et (pour la feuille de style :

#presentation {

float: left;

}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...