28172 sujets

CSS et mise en forme, CSS3

je realiser mon site et j'aimerais me donner des remarque si j'oublie quelque detaile
voila mon code:


<html>
<head>
<link type="text/css" rel="stylesheet" href="sitos.CSS" media="all" />
<title>mangatimez</title>
</head>

<body>
<body id="top">
<div class="wrapper col1">
  <div id="topbar">
    <div id="search">
<!-- SiteSearch Google -->
   <form action="http://www.yumenomanga.com/s/manga" method="post">
        <fieldset>
        <legend>Site Search</legend>
        <input type="text" value="Search the site&hellip;"  onfocus="this.value=(this.value=='Search the site&hellip;')? '' : this.value ;" />
 
        <input type="submit" name="go" id="go" value="GO" />
        </fieldset>
  </form>
</div>
  </div>
</div>
<div class="wrapper col2">
  <div id="header">
    <div id="logo">
 <h1>Mangaworld</h1>
      
    </div>
<div id="main-nav">
	<ul>
		
		<li><a href="sitys.html">Accueil</a></li>
<li><a href="http://teemix.aufeminin.com/album/see_418051_156/Images-manga.html">About</a></li>
		<li><a href="http://fr.wikipedia.org/wiki/Manga">Information</a></li>
		<li><a href="Vérification complète formulaire.html">Contact</a></li>
	</ul>
	<div class="clear-both">&nbsp;</div>
</div>
<div class="wrapper col3">
  
    <ul>
    
      <li><center><a class="swap" href="#"><span><img src="1.jpg" width="950" height="370" alt="" / border=4></span></a></center></li>
    
    </ul>
  </div>
</div>
<div class="wrapper col4">
  <div id="services">
    <ul>

<h1><center>MANGAFUN</center></h1>



<!-- HEADER ENDS -->
 <!-- BODY -->
 	<div id="body">
    	<div class="leftPanel">
        	
            <p class="news">Manga : mot japonais qui veut dire "image d'erisoire" via une traduction litterale, a ete invente par Katsusshika Hokusai (1760 ? 1849).</p>
<p>
 A l'origine, des estampes humoristiques de personnages celebres. Aujourd'hui, au Japon, le mot manga fait reference a tout le monde de la bande dessinee.</p>
<p> En europe, le mot manga designe toutes les BD nippones ainsi que les dessins animes japonais.</p>

<p>Manga : (la) [les Dessins foisonnants], ensemble de dessins d'Hokusai (13 vol., 1814-1848 et 2 vol. posthumes), constituant une sorte d'encyclopedie en images qui donne toute la mesure et la variete du talent de son auteur, qui avait choisi pour pseudonyme "le Fou de dessin".
 (Le Petit Larousse, 1996).</p>
</p>
           
        </div>
        <div class="rightPanel">
        	<div class="welcome">
        	<h2>Welcome to MangaWorld</h2>
            <p>This is <strong>Manga is now available on your Xbox 360. Click here for more info! Get free episodes and great series discounts on iTunes®. Click here for more info!

Welcome to Manga.com!   Full length videos of the best anime in a sleek new package.  Click on "anime" to view our library then head over to the forums to chat about your favorite titles and characters. Watch our full length titles right here on Manga.com!  Be sure to check out the new Spartacus Facebook game. Also, be sure to follow Manga on Facebook and on Twitter.

We've got the third season of Star Blazers here in its entirety! to using 'Content here, content heretmaking it look lireadable English. Many desktop publishing packages.</p>
            </div>

            <h2 class="leftPad">Photos Manga</h2>
            <div class="gallery">
            <ul class="gal">
            	<li><a href="#"><img src="images/gal_pic1.jpg" alt="Pic1" title="Pic1" width="130" height="96" /></a></li>
                <li><a href="#"><img src="images/gal_pic2.jpg" alt="Pic2" title="Pic2" width="130" height="96" /></a></li>
              	<li class="noPad1"><a href="#"><img src="images/gal_pic3.jpg" alt="Pic3" title="Pic3" width="129" height="96" /></a></li>
              	<li class="noPad"><a href="#"><img src="images/gal_pic4.jpg" alt="Pic4" title="Pic4" width="129" height="96" /></a></li>
              	<li class="noPad"><a href="#"><img src="images/gal_pic5.jpg" alt="Pic5" title="Pic5" width="129" height="96" /></a></li>
             	<li class="noPad noPad1"><a href="#"><img src="images/gal_pic6.jpg" alt="Pic6" title="Pic6" width="128" height="96" /></a></li>
            </ul><br class="spacer" />
            <ul class="preNextBtns">
            	<li><a href="#" title="Previous"> &lt;&lt; Prev</a></li>
              <li class="left"><a href="#" title="1" class="rightMar">01</a>|</li>
                <li><a href="#" title="2" class="rightMar">02</a>|</li>
                <li><a href="#" title="3" class="rightMar">03</a>|</li>
                <li><a href="#" title="4" class="rightMar">04</a>|</li>
                <li><a href="#" title="4" class="rightMar">05</a></li>
                <li class="right"><a href="#" title="Next">Next &gt;&gt;</a></li>
            </ul>
            <br class="spacer" /><br class="spacer" /></div>
        </div>
    <br class="spacer" /></div>



 <!-- BODY ENDS -->
 <!-- FOOTER -->
 	


<div style="clear:both;"></div>
</div>
 


 <img src="waw.gif" align=left border=4  >

</div>
</div>
<div class="wrapper col6">
  <div id="footer">
    <div id="contactform">
      
    <right> <embed TYPE="application/x-mplayer2" src="AMV - Ergo Proxy - Evanescence - Whisper_(360p).flv" autostart="true" controller="false" width=50% height=60%></right>
    </div>
    <!-- End Contact Form -->
    <div id="compdetails">
      <div id="officialdetails">
        <h2>Company Information !</h2>
        <ul>
          <li>Copyright &copy; 2013 - All Rights Reserved</li>
          <li>Company Name Ltd</li>
         
          <li class="last">VAT No. xxxxxxxxx</li>
        </ul>
        <h2>Stay in The Know !</h2>
        <p><a href="#">Get Our E-Newsletter</a> | <a href="#">Grab The RSS Feed</a></p>
      </div>
      <div id="contactdetails">
        <h2>Our Contact Details !</h2>
        <ul>
          <li>Company Name</li>
          <li>Street Name &amp; Number</li>
          <li>Town</li>
          <li>Postcode/Zip</li>
          <li>Tel: xxxxx xxxxxxxxxx</li>
          <li>Fax: xxxxx xxxxxxxxxx</li>
          <li>Email: info@domain.com</li>
          <li class="last">LinkedIn: <a href="#">Company Profile</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="wrapper col7">
  <div id="copyright">
    
  </div>
</div>
 
</body>
</html>



body {
	margin:0; padding:0; color:#FF3366; 
	background:#000000;
	font:normal 12px/14px Arial, Helvetica, sans-serif;
}
div, a, p, img, ul, h1, h2, h3, dl, dt, dd {
	margin:0; padding:0;
	background:#993333 ;
}


#main-nav{
	height:29px;
	float:left;
	background-image:url("nav-bg.gif");
	background-repeat:repeat-x;
	background-position:top left;
	width:100%;
}

#main-nav ul,
#main-nav li{
	padding:0px;
	margin:0px;
	list-style-type:none;
}

#main-nav ul{
	height:29px;
	line-height:29px;
	background-image:url("nav-bar.gif");
	background-position:right;
	background-repeat:repeat;
	float:left;
	padding:0px 1px 0px 0px;
	margin:0px 0px 0px 10px;
}

#main-nav li{
	height:29px;
	line-height:29px;
	display:inline;
	position:relative;
	float:left;
	width:80px;
	text-align:center;
}

#main-nav li a{
	height:29px;
	width:80px;
	text-align:center;
	float:left;
	background-image:url("nav-bar.gif");
	background-position:left;
	background-repeat:repeat;
}



#main-nav li a:link,
#main-nav li a:visited{
	color:#FFFFFF;
	text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
	background-image:url("active.png");
	background-repeat:repeat;
	background-position:left;
}




/*--------------------- BODY ----------------------*/
div#body {
	width:744px; margin:0 auto; padding:12px 0 35px 36px;
}
div#body h2 {
	font-family:Georgia, "Times New Roman", Times, serif; font-size:18px; font-weight:bold;
	color:#CDAB7A; text-transform:capitalize;
} 
/*---------- LEFT PANEL -----------*/
div#body div.leftPanel {
	width:209px; padding:0 32px 0 13px; float:left;
}
div#body div.leftPanel h2 {	
	padding:15px 0 10px 13px;
} 
div#body div.leftPanel p.news {
	padding:16px 30px 33px 18px; background-color:#393939; font-size:11px; color:#B8B8B8;
}
div#body div.leftPanel dl {
	padding:16px 30px 0 18px; background-color:#393939; color:#B8B8B8;
}
div#body div.leftPanel dl dt {
	font-size:11px; color:#CDAB7A; font-weight:bold; padding:0 0 9px 0; 
	background-color:#393939;
}
div#body div.leftPanel dl dd {
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	padding:0 0 12px 0;
}
div#body div.leftPanel dl dd span {
	text-align:right; display:block;
}
/*---------- RIGHT PANEL -----------*/
div#body div.rightPanel {
	width:489px; float:left;
}
div#body div.rightPanel h2 {	
	padding:10px 0 10px 13px;
} 
div#body div.rightPanel div.welcome {
	background:#000000; padding:5px 24px 17px 24px; color:#B8B8B8;
}
div#body div.rightPanel div.welcome p {
	padding:15px 0 0 0;
}
/*-- GALLERY --*/
div#body div.rightPanel div.gallery {
	padding:25px 0 18px 21px; background:#000; width:441px; margin:4px 0 0 0;
	color:#006666;
}
div#body div.rightPanel div.gallery ul.gal {
	 font-size:0; line-height:0;
}
div#body div.rightPanel div.gallery ul.gal li {
	padding:0 9px 37px 0; float:left; margin:0; width:134px; height:100px;
}
div#body div.rightPanel div.gallery ul.gal li a img {
	border:#fff3px solid;
}
div#body div.rightPanel div.gallery ul.preNextBtns {
	padding:8px 0 0 8px;
}
div#body div.rightPanel div.gallery ul.preNextBtns li {
	float:left; color:#000000; font-weight:bold; font-size:9px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; 
	background-color:#000;
}
div#body div.rightPanel div.gallery ul.preNextBtns li.left {
	padding-left:97px;
}
div#body div.rightPanel div.gallery ul.preNextBtns li.right {
	padding-left:105px;
}
div#body div.rightPanel div.gallery ul.preNextBtns li a {
	 color:#CDAB7A; background-color:#000; padding:0 0 0 3px;
}
div#body div.rightPanel div.gallery ul.preNextBtns li a:hover {
	color:#A68657; background-color:#000;
}
div#body div.rightPanel div.gallery ul.preNextBtns li a.rightMar {
	margin-right:3px;
}
img{
border:6px solid black;
/*--------- FOOTER --------*/
div#footer {
	background:#393939;
}
div#footer ul {
	height:25px; padding:12px 0 0 0; width:420px; margin:0 auto;
}
div#footer ul li {
	float:left; border-left:#0001px solid; height:19px;
}
div#footer ul li a {
	color:#CDB96A; font-weight:bold; line-height:19px; background-color:#006666;
	display:block; padding:0 10px; font-size:11px;
}
div#footer ul li a:hover {
	color:#E1D08F; background-color:#006666;
}
div#footer ul li.noBdr {
	border:none;
}
div#footer p {	
	padding:0 0 12px; text-align:center; font-size:10px;
}
div#footer p a {
color:#B8B8B8; text-decoration:none;
}
div#footer p a:hover {
color:#CDB96A;
}
/*------ MISCLENIOUS --------*/
a.moreBtn {
	font-weight:bold; color:#006666; font-size:11px;
}
a.moreBtn:hover {
	color:#9D8563;
}
.topPad {
	padding-top:18px !important;
}
.leftPad {
	padding-left:38px !important;
}
.noPad {
	padding-bottom:0 !important;
}
.noPad1 {
	padding-right:0 !important;
}
Bonjour,

Il y a des erreurs de code:

<right> n'est pas une balise

Remplacer les guillemets par &quot; dans le html.

La balise body est doublée.

Balise ul toute seule!

Des erreurs d'imbrication, des balises non fermées.

Des balises fermantes orphelines (</div>).

Vous devriez revoir les bases du html/css et pour progresser il y a beaucoup de ressources sur le net (site du zéro). Smiley smile

Bon courage