regelage d'une page
Posted: Tue Mar 31, 2009 12:34 pm
voici une page que j'ai faite, mais le problème est quand je fais flotter le tableau devant le menu il n'y a pas une ligne ou quelque chose comme ça qui les sepparent et le menu n'est sepparer du texte que d'une partie, voila RAD ma page,pourrait tu me régler se problème pour que le menu se seppare du tableau comme dans cette page http://www.jeuxvideo.com/etajvbis.htm et dans tous les pages il y a le menu séparer du haut jusqu' en bas
voici ma page
les css
voici ma page
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>amine</title>
<link rel="stylesheet" href="V.css" type="text/css">
<link rel="stylesheet" href="amin.css"
type="text/css">
</head>
<body style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
.<br style="color: rgb(255, 255, 255);">
<span style="color: rgb(255, 255, 255);"><a
href="amine.html"><img
style="border: 0px solid ; width: 902px; height: 88px;" alt="lp"
src="file:///E:/accessoir%20jeux/Mon%20site/image.png"></a><br>
</span>
<hr style="width: 130%; height: 2px; color: rgb(255, 255, 255);"><span
style="color: rgb(255, 255, 255);"></span>
<span style="color: rgb(204, 0, 0);"><br>
</span>
<div id="menu">
<div id="menu9">
<ul>
<li style="font-style: italic;"><a href="amine.html"
link="">Acceuil</a></li>
<li style="font-style: italic;"> <a href="#3"
title="Link 3">Jeux</a></li>
<li style="font-style: italic;"> <a href="#4"
title="Link 4">Patchs</a></li>
<li style="font-style: italic;"><a href="amine.html#4"
title="Link 4">Forum </a></li>
<li style="font-style: italic;"><a href="amine.html#4"
title="Link 4">Connection</a></li>
<li style="font-style: italic;"><a
href="http://tools.ifrance.com/livredor/?log=eapc-gaming&id=5981365"
title="Link 4">Livre d'or</a></li>
<li style="font-style: italic;"><a href="amine.html#4"
title="Link 4">Inscription</a></li>
<li> <span style="color: rgb(204, 0, 0);"></span><big><big><span
style="color: rgb(204, 0, 0); font-weight: bold; font-style: italic; text-decoration: underline;"></span></big></big></li>
</ul>
</div>
<span style="color: rgb(204, 0, 0);"></span>
<div style="color: rgb(255, 255, 255);" id="corps"><font
size="3">
<table
style="text-align: left; width: 688px; height: 287px; margin-left: 40px;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="color: rgb(255, 255, 255);"><span
style="font-weight: bold; font-style: italic;">BURNOUT
PARADISE</span></td>
<td> <span style="color: rgb(255, 255, 255);">
</span><span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);"></span><font
style="color: rgb(0, 0, 0); font-weight: bold; font-style: italic;"
face="Arial"><font size="4"><span
style="color: rgb(255, 255, 255);">Friday Night
Smackdo</span>wn</font></font></td>
<td>
<div style="margin-left: 40px;"><span
style="font-weight: bold; font-style: italic;"><span
style="color: rgb(255, 255, 255);">LEFT 4 DEAD</span> </span></div>
</td>
</tr>
<tr>
<td><a href="../burnout%20paradise.html"><img
style="border: 0px solid ; width: 250px; height: 202px;"
alt="b.p"
src="file:///E:/accessoir%20jeux/jaquette-burnout-paradise-pc-cover-avant-g.jpg"></a></td>
<td><a href="http://myegy.com/counter.php?id=5961"><img
style="width: 258px; height: 200px;"
src="http://myegy.com/pic_small/461523419.jpg"
alt="Smackdown 27.3.2009 " border="0"></a></td>
<td><a href="../left%204%20dead.html"><img
style="border: 0px solid ; width: 250px; height: 200px;"
alt="l4d" src="file:///E:/accessoir%20jeux/477711614.jpg"></a></td>
</tr>
<tr>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);"><span>Burnout
Paradise est un jeu de courses PC </span> . <span>
compressé de 3 go à 580 mo</span></td>
<td style="font-weight: bold; font-style: italic;"><font
face="Arial"><font size="4"><small
style="color: rgb(255, 255, 255);">friday night smackdown
est un
jeu PC, sa taille est de 254 mo</small><br>
</font></font></td>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">Left
4 Dead sur PC est un FPS horrifique basé en grande partie
sur la coopération</td>
</tr>
<tr>
<td> <span
style="font-weight: bold; font-style: italic;"> <span
style="color: rgb(255, 255, 255);">
FIFA 2008</span></span></td>
<td><span style="font-weight: bold; font-style: italic;"> <span
style="color: rgb(255, 255, 255);">
WINNING ELEVEN 2009</span></span></td>
<td style="color: rgb(255, 255, 255);">
<div style="margin-left: 80px;"><span
style="font-weight: bold; font-style: italic;">FAR CRY 2</span></div>
</td>
</tr>
<tr>
<td><a href="http://myegy.com/counter.php?id=72"><img
src="http://myegy.com/pic_small/532517188.jpg" alt="fifa 2008"
border="0"></a></td>
<td><a href="http://myegy.com/counter.php?id=5960"><img
src="http://myegy.com/pic_small/106363719.jpeg"
alt="Winning Eleven 2009" border="0"></a></td>
<td><a href="../Far%20cry%202.html"><img
style="border: 0px solid ; width: 250px; height: 200px;"
alt="fc2" src="file:///E:/accessoir%20jeux/786851052.jpg"></a></td>
</tr>
<tr>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">EA
lance sa mouture 2008 de sa grande licence footballistique FIFA sur PC</td>
<td style="color: rgb(255, 255, 255);"><span
style="font-weight: bold; font-style: italic;">winning
eleven 2009, le jeu sur pc. taille est de 290 mo</span></td>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);"><span>Ce
deuxième volet sur PC ne vous conduit plus
sur une île paradisiaque, mais au coeur de la savane
africaine.
Far cry 2, FULL RIP, 3 go et 350 mo</span></td>
</tr>
<tr>
<td> <span
style="color: rgb(255, 255, 255);"> </span><span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">PURE
2008</span></td>
<td><span style="font-weight: bold; font-style: italic;"></span><span
style="font-weight: bold;"></span>
<span style="font-weight: bold; font-style: italic;"> <span
style="color: rgb(255, 255, 255);">NEED
FOR SPEED </span></span><br
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">
<span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">
undercover</span></td>
<td> <span
style="font-weight: bold; font-style: italic;">
<span style="color: rgb(255, 255, 255);">
PES 2009</span></span></td>
</tr>
<tr>
<td><a href="http://myegy.com/counter.php?id=3531"><img
src="http://myegy.com/pic_small/177688616.jpg" alt="PURE 2008"
border="0"></a></td>
<td><a href="http://myegy.com/counter.php?id=4031"><img
src="http://myegy.com/pic_small/141696705.jpg"
alt="Need For Speed" border="0"></a></td>
<td><a href="http://myegy.com/counter.php?id=2882"><img
src="http://myegy.com/pic_small/724937045.jpg"
alt="Pro.Evolution.Soccer" border="0"></a></td>
</tr>
<tr>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">Pure
sur PC est un jeu de courses de quads se déroulant sur des
circuits ouverts en pleine nature</td>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">Need
for Speed Undercover est un jeu de course sur PC</td>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">Pro
Evolution Soccer 2009 sur PC est une simulation de football
axée sur le réalisme</td>
</tr>
<tr>
<td> <span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">NHL
2009</span></td>
<td><span style="font-weight: bold; font-style: italic;"></span><span
style="font-weight: bold; font-style: italic;"></span>
<span
style="color: rgb(255, 255, 255);"> </span><span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">EURO
2008</span></td>
<td> <span
style="font-weight: bold; font-style: italic;"> <span
style="color: rgb(255, 255, 255);">CALL OF DUTY</span></span><br
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">
<span
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">
world at war</span><br
style="color: rgb(255, 255, 255);">
<span style="color: rgb(255, 255, 255);"> </span></td>
</tr>
<tr>
<td><a href="http://myegy.com/counter.php?id=3002"><img
src="http://myegy.com/pic_small/39370954.jpg" alt="NHL 09"
border="0"></a></td>
<td><a href="http://myegy.com/counter.php?id=1632"><img
src="http://myegy.com/pic_big/551902344.gif"
alt="لعبة UEFA EURO 2008" border="0"></a></td>
<td><a href="http://myegy.com/counter.php?id=3124"><img
src="http://myegy.com/pic_small/502743086.jpeg"
alt="Call of Duty World at War" border="0"></a></td>
</tr>
<tr>
<td
style="font-weight: bold; font-style: italic; color: rgb(255, 255, 255);">NHL
09 est un jeu de hockey sur PC. Cet opus amène un nouveau
mode "Deviens Pro" où le joueur pourra créer son
propre personnage</td>
<td style="color: rgb(255, 255, 255);"><span
style="font-weight: bold; font-style: italic;">Euro
2008, 100% complet, taille du jeu: 761 mo</span></td>
<td style="font-weight: bold; font-style: italic;"><span
style="color: rgb(255, 255, 255);">Call
of Duty : World at War est un jeu de tir à la
première personne sur PC. 5ème opus de la
série</span></td>
</tr>
</tbody>
</table>
<div style="margin-left: 40px;"><br>
</div>
</font></div>
<div style="color: rgb(255, 255, 255);" id="pied_de_page">
<div style="margin-left: 400px;"><!-- Histats.com START --><a
href="http://www.histats.com" target="_blank"
title="how to add a hit counter to a website">
<script type="text/javascript" language="javascript">
var s_sid = 663419;var st_dominio = 4;
var cimg = 413;var cwi =112;var che =75;
</script></a><!-- Histats.com END --></div>
<script type="text/javascript" language="javascript"
src="http://s11.histats.com/js9.js"></script>
<noscript><a href="http://www.histats.com" target="_blank">
<img src="http://s103.histats.com/stats/0.gif?663419&1" alt="how
to add a hit counter to a website" border="0"></a>
</noscript>
</div>
</div>
</body>
</html>
les css
- Code: Select all
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 1--------------------------- */
#menu1 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(menu1.gif);
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
background: url(menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 2--------------------------- */
#menu2 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-size: 1px;
border-width: 1px;
}
#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 30px;
}
#menu2 li a:hover {
color: #3688BA;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}
/*- Menu 3--------------------------- */
#menu3 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 4--------------------------- */
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 5--------------------------- */
#menu5 {
width: 200px;
margin: 10px;
}
#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu5 li a:link, #menu5 li a:visited {
color: #FFF;
display: block;
background: url(menu5.gif);
padding: 8px 0 0 10px;
}
#menu5 li a:hover {
color: #FFF;
background: url(menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 6--------------------------- */
#menu6 {
width: 200px;
margin: 10px;
}
#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(menu6.gif);
padding: 8px 0 0 10px;
}
#menu6 li a:hover {
color: #FFF;
background: url(menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 7--------------------------- */
#menu7 {
width: 200px;
margin: 10px;
}
#menu7 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu7 li a:link, #menu7 li a:visited {
color: #FFF;
display: block;
background: url(menu7.gif);
padding: 8px 0 0 30px;
}
#menu7 li a:hover {
color: #FFF;
background: url(menu7.gif) 0 -32px;
padding: 8px 0 0 30px;
}
/*- Menu 8--------------------------- */
#menu8 {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px;
}
#menu8 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu8 li a:link, #menu8 li a:visited {
color: #656556;
display: block;
background: url(menu8.gif);
padding: 8px 0 0 20px;
}
#menu8 li a:hover {
color: #474739;
background: url(menu8.gif) 0 -32px;
padding: 8px 0 0 20px;
}
/*- Menu 9--------------------------- */
#menu9 {
width: 200px;
margin: 10px;
}
#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
/*- Menu 10--------------------------- */
#menu10 {
width: 200px;
margin: 10px;
}
#menu10 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu10 li a:link, #menu10 li a:visited {
color: #4D4D4D;
display: block;
background: url(menu10.gif);
padding: 8px 0 0 10px;
}
#menu10 li a:hover {
color: #FF9834;
background: url(menu10.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 11--------------------------- */
#menu11 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #889944;
border-size: 1px;
border-width: 1px;
}
#menu11 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu11 li a:link, #menu11 li a:visited {
color: #889944;
display: block;
background: url(menu11.gif);
padding: 8px 0 0 25px;
}
#menu11 li a:hover {
color: #889944;
background: url(menu11.gif) 0 -32px;
padding: 8px 0 0 27px;
}
/*- Menu 12--------------------------- */
#menu12 {
width: 200px;
margin: 10px;
}
#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}
#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(menu12.gif);
padding: 10px 0 0 35px;
}
#menu12 li a:hover {
color: #000;
background: url(menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}
/*- Menu 13--------------------------- */
#menu13 {
width: 200px;
margin: 10px;
}
#menu13 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu13 li a:link, #menu13 li a:visited {
color: #C7377D;
display: block;
background: url(menu13.gif);
padding: 8px 0 0 10px;
}
#menu13 li a:hover {
color: #C7377D;
background: url(menu13.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 14--------------------------- */
#menu14 {
width: 200px;
margin: 10px;
}
#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(menu14.gif);
padding: 8px 0 0 10px;
}
#menu14 li a:hover {
color: #FFF;
background: url(menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}
- Code: Select all
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}