28220 sujets

CSS et mise en forme, CSS3

Bonjour! Smiley smile

j'essaye de coder moi meme mes designs pour m'entrainer et cette fois ci je dois dire que je m'en etais plustot bien tiré.
Smiley lol (sa marchait sous internet explorer et firefox)

Fierement je le montre a un copain qui me dit qu'il est deformé et effectivement chez lui sa foir!
Le probleme:
Mon design: http://mangamers.free.fr/portfolio/
marche bien chez moi mais il est peut etre decalé chez vous
ici pour ceux chez qui sa marche

donc cette deformation peut aussi etre génerer en reduisant la taille de votre naviguateur Smiley confus

le probleme apres enquette vien du fait que certain block (ceux contenant du texte) sont placer en absolut par rapport au coter gauche haut de la fenetre du naviguateur.
quand aux header et footer heu sont en
margin-left:auto;
margin-right:auto;
Smiley bawling

je n'ai pas reussi a tout encadrer pour tout metre en
margin-left:auto;
margin-right:auto;

voila mon problem en gos

ici mon CSSattention les yeux c'est pas du propre


et mon html ici

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>dg-portfolio</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	         <link rel="stylesheet" media="screen" type="text/css" title="Design dgportfolio" href="style.css" />
   </head>
   <body>
   
   <div id="tout">
   
   
           <div id="header">
                                              <div id="header1">il est 18h44 vous avez 13 minutes de retard </div>
	                                          <div id ="header2">  </div>
                                               <div id ="header3">
               <ul id="group4">
<li id="edito"><span><a href="#"><b>niania youhhhouuu yaahouuu yihouuuuu:</b><br/>
I. ad Cornelium
cum desiderio meo nitenti
carum nescio quid lubet iocari
et solaciolum sui doloris,
credo ut tum grauis acquiescat ardor:
et tristis animileuare curas!</a></span></li>
                <li id="lien1"><span><a href="#"><b>Accueil</b></a></span></li>
                <li id="lien2"><span><a href="#"><b>Portfolio</b></a></span></li>
                <li id="lien3"><span><a href="#"><b>Presentation</b></a></span></li>
                <li id="lien4"><span><a href="#"><b>Livre d'or</b></a></span></li>
				 </ul>
	   
	       </div><!---fermeture header 3!--->
		   </div><!---fermeture header!--->
	
	                                        <div id="blocketnews">
	                                        <div id ="block">
                                            <div id ="block_top">Menu</div>
	                                        <div id ="block_bg"> <div id="navcontainer">
<ul id="navlist">

<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>
<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>

<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>

<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>

<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>

<li><a href="index.php?file={Lien}" alt="{Allias}">{Allias}</a></li>



</ul>
</div><!---fermeture block_bg!--->
</div><!---fermeture block!--->
		  
		  
		  	              <div id ="block_footer">  </div>






						  </div><!---fermeture block!--->
							 
							 
							   <div id="news">
							                                     	  <div id ="news_top"> Bienvenue sur mon super top cool site [lol]! </div><!---fermeture news_top!--->
																	  <div id ="news_bg"> 

Cynthia prima suis miserum me cepit ocellis,
    contactum nullis ante cupidinibus.
tum mihi constantis deiecit lumina fastus
    et caput impositis pressit Amor pedibus,
donec me docuit castas odisse puellas                 
    improbus, et nullo vivere consilio.
ei mihi, iam toto furor hic non deficit anno,
    cum tamen adversos cogor habere deos.
Milanion nullos fugiendo, Tulle, labores
    saevitiam durae contudit Iasidos.      
<a href="#">ihihiihihih</a>	10
nam modo Partheniis amens errabat in antris,
    rursus in hirsutas ibat et ille feras;
ille etiam Hylaei percussus vulnere rami
    saucius Arcadiis rupibus ingemuit.
ergo velocem potuit domuisse puellam:    
    tantum in amore fides et benefacta valent.
in me tardus Amor non ullas cogitat artes,
    nec meminit notas, ut prius, ire vias.
at vos, deductae quibus est pellacia lunae
    et labor in magicis sacra piare focis, 
en agedum dominae mentem convertite nostrae,
    et facite illa meo palleat ore magis!
tunc ego crediderim Manes et sidera vobis
    posse Cytinaeis ducere carminibus
aut vos, qui sero lapsum revocatis, amici, 
    quaerite non sani pectoris auxilia.
fortiter et ferrum saevos patiemur et ignes,
    sit modo libertas quae velit ira loqui.
ferte per extremas gentes et ferte per undas,
    qua non ulla meum femina norit iter. 
vos remanete, quibus facili deus annuit aure, </div><!---fermeture news_bg!--->
																	 </div><!---fermeture news!---> 
																	</div><!---fermeture blocketnews!--->
																	  
																	  
																	  
																	  
			<div id="contentfooter">
					<div id ="footer"></div>
			</div>
								
								
								
								
								
								
								
								
								
								
								





	 
	  
	  
   </body>
</html>



Bien voila j'ai chercher de laide sur plusieurs sites et sur ce forum et je n'ai rien trouvé!


Merci a vous bonne journé

ps dsl si je n'ai pas été clair Smiley eek
un conseil : recode entièrement ta page (au moins pour qu'on comprenne bien la structure) par ce que la c'est totalement illisible
Oui j'y avait pensé tiens pendant que j'y pense tu ne sais pas où je pourrait trouver un "gabarit de mise en page correspondant au design que je veux coder ?