Webmaster Hub > Besoin de votre aide et de vos corrections

Version complète: sur le forum Webmaster Hub : Besoin de votre aide et de vos corrections

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Gros N@z

jeudi 17 juillet 2008 à 14:14

Bonjour,

Je dois adapter quelques trucs à un design existant mais le problème est que j’ai quelques lacunes en CSS

Jusqu'à présent, j’ai fait de mon mieux mais je n’arrive pas à faire quelques trucs...

- Je n’arrive 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 lorsqu’on l’utilise
- Dans le bas de page, mes logos ne s’affichent pas à taille réelle (pourtant je ne vois pas d’où ça peut venir) et décalent mes li du footer.
- Dernier point : plus tard, j’aurai besoin d’une 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 s’il est possible que l'on vérifie ce que j’ai fait, histoire de voir s’il n’y a pas trop de bêtises dans le css.

Voici mon code xhtml :

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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="http://validator.w3.org/check?uri=referer" target="_blank" title="XHTML Validation" class="xhtml"></a>
			<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="CSS Validation" class="css"></a><br />
			<a href="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.

Gros N@z

jeudi 17 juillet 2008 à 16:03

Pour le bug des logos redimensionnés dans le bas, je précise que je ne l'ai pas sous opera et ie (juste sous firefox)

Dan

jeudi 17 juillet 2008 à 16:07

Tes liens dans le footer sont vides ... tu n'as rien entre le <a href=...> et le </a>

Gros N@z

vendredi 18 juillet 2008 à 09:11

euh oui, je vois mais que mettre ? Lorsque je mets du texte, ça écrit par dessus mon image...

Gros N@z

vendredi 18 juillet 2008 à 09:19

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;
}

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.