18068 sujets

Questions générales et questions de débutants

[resolu] Code lourd

voila j'ai creer l'interface de mon site web avec d'un coté un feuille html et de l'autre une page css. Mais le probleme c'est que j'ai l'impression d'avoir beaucoup allourdi le code ! donc si quelqu'un peu m'aider a l'alleger...

Voici le code HTML :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


<head>

<title>Bienvenue sur W!nduX.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css"> @import url(styles.css) ; </style>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>


<body>

<!-- En-tête -->
<div id="header">
<h1>W!ndux</h1>
</div>

<div id="body_div">

<!-- Menu vertical a gauche-->
<div>
<dl id="menu">

		<dt onclick="javascript:montre();"><a href="index.html">Accueil</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Windows</dt>

			<dd id="smenu2">
				<ul>
					<li><a href="windows/organisation.htm">Organisation</a></li>
					<li><a href="windows/depanner.htm">Dépanner</a></li>
					<li><a href="windows/securite.htm">Sécurité</a></li>
                                        <li><a href="windows/logiciels.htm">Logiciels</a></li>
                                        <li><a href="windows/msdos.htm">MsDos</a></li>
                                        <li><a href="windows/ast_opt.htm">Astuces et Optimisations</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Linux</dt>

			<dd id="smenu3">
				<ul>
					<li><a href="linux/distributions.htm">Distributions</a></li>
					<li><a href="linux/installation.htm">Installation</a></li>
					<li><a href="linux/logiciels.htm">Logiciels</a></li>
					<li><a href="linux/shell.htm">Shell</a></li>
					<li><a href="linux/trucs.htm">Trucs et astuces</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre();"><a href="http://203566.aceboard.net">Forum</a></dt>

	
</dl>
</div>

<!-- Colonne droite -->
<div id="col_droite">

<div id="musique">
<p>Musique</p>
<object type="application/x-shockwave-flash" data="audio/dewplayer.swf?son=audio/son.mp3" height="20" width="150"> 
<param name="movie" value="audio/dewplayer.swf?son=audio/son.mp3"> </object>
</div>

<div id="news">
<p>News, maj...</p>
<ul>
<li><span>24/06/06:</span> Nouvelle interface pour le site!</li>
</ul>
</div>

</div>


<!-- Contenu -->
<div id="global">
<h2>Bienvenue sur W!nduX</h2>
<p>Ce site est dédié comme sont nom l'indique principalement a
Windows et Linux, mais nous aborderons néanmoins quelques
aspects de programmation.</p>
<p>Vous trouverez donc des trucs, des astuces, des conseils pour dépanner...</p>
<p>Windux s'adresse donc ensentiellement aux néophytes ou aux
utilisateurs désireux d'approfondir leurs connaissances !  
Cependant les visiteurs voulant partager leurs connaissances
peuvent m'envoyer leurs projets, ou des articles qui trouveront
immédiatement leur place sur le site ! Ainsi vous pouvez me contacter via le
forum. Et ceci est également valable pour toute suggestion concernant la
mise en page du site !</p>

<p>Remerciements à Styx pour avoir fourni la banière du site et
à Benoit pour l'hébergement...</p>

<p>Signé : Le Webmaster</p>
</div>

<!-- Pied de page -->
<div id="pdp">
<div id="xiti-logo"><p>
<a href="http://www.xiti.com/xiti.asp?s=258186" title="Mesurez votre audience">
<script type="text/javascript">
<!--
Xt_param = 's=258186&p=';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" ';
Xt_i += 'src="http://logv31.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Analyse d\'audience">');
//-->
</script>
<object>
<noscript>
<div id="xiti-logo-noscript">
Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv31.xiti.com/hit.xiti?s=258186&amp;p=" alt="Analyse d'audience" />
</div>
</noscript>
</object>
</a>
</p></div>
</div>

</div>
</body>

</html>


et voila le code css :

/* Mise en page global */
body {
background: #CBDAF1;
width : 1000px ;
margin : auto auto ;
}

#body_div {
margin: 0;
padding: 10px;
-moz-border-radius: 20px;
background : #B7D1FD;
position : relative ;
border: 4px ridge #1765e7;
font-family : verdana, arial, sans-serif;
}

/* En tete */
#header {
height: 180px;
border: 4px ridge #1765e7;
-moz-border-radius: 20px;
padding : 5px;
margin : 10px 0 20px 0;
background: #B7D1FD url(images/banniere_windux.jpg) center no-repeat ;
}

#header h1 {
text-indent : -5000px ;
margin : 0;
line height: 0;
}
 
/* Menu vertical */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
float :left; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
margin-top : 30px;
width: 160px;
}

#menu dt {
cursor: pointer;
margin: 2px 0;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
background: url(images/bouton.png) center no-repeat;
}

#menu dd {
border: 2px ridge #1765e7;
-moz-border-radius: 15px;
background: #CBDAF1;
}

#menu li {
text-align: left;
font-size: small;
padding : 5px;
}

#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 40px;
background: url(images/bouton.png) center no-repeat;
line-height : 40px;
}

#menu li a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
line-height: 100%;
}

/* Colonne de droite */
#col_droite {
float: right;
top : 0;
right : 0;
width: 160px;
text-align : center;
}

#musique {
width : 160px;
height : 80px;
margin : 5px 0;
padding : 0px;
background : #CBDAF1;
border: 2px ridge #1765e7;
-moz-border-radius: 15px;
}

#news {
width : 160px;
margin : 5px 0;
padding : 0px;
background : #CBDAF1;
border: 2px ridge #1765e7;
-moz-border-radius: 15px;
}

#musique p, #news p {
display : block;
font-weight : bold;
height : 40px;
line-height : 40px;
margin : 5px;
padding : 0;
background: url(images/b_musique.png) center no-repeat;
}

#news li {
font-size : small ;
padding : 5px;
}

#news span {
font-weight : bold
}

/* Contenu global */

#global {
margin-left : 180px;
margin-right : 180px;
text-align : justify;
border: 2px ridge #1765e7;
-moz-border-radius: 15px;
background : #CBDAF1;
padding : 5px;
}

#global h2 {
text-align : center;
}

/* Pied de page */
#pdp {
margin-top : 20px;
text-align : center;
}


merci de votre aide Smiley lol
Modifié par getdown (24 Jun 2006 - 21:13)
Sujet clos
Aller à