28172 sujets

CSS et mise en forme, CSS3

Problème de mise en page CSS

Bonjour à tous,

Alors, voilà, je tenais à ce que mon site fasse 1024px de largeur. J'ai donc créé mon header et mon footer dans cette optique. Ils s'affichent très bien, là n'est pas le problème.

Le problème c'est que pour la partie contenu de ma page, soit le centre, j'ai réalisé une sorte de box aux coins arrondis au niveau supérieur et inférieur. Donc 4 coins arrondis. Ne voulant pas utiliser CSS3 et ses nouveaux attributs pour le moment, je pensais alors diviser cette box en 3 parties, content_haut, content, content_bas.

Le content, du milieu doit faire appel lui aussi à une image, pour afficher les bords de la box.

Mais mon problème est le suivant, j'ai assez de mal à décomposer de cette facon, ou alors je commet l'un ou l'autre erreur, puissque lorsque je fais appel à des <p> <h1> ou autre avec n'importe quel margin, mon affichage est tout à fait irrégulier.

Pourriez vous, m'aider et me donner quelque chose de propre, parce que je ne m'en sors plus

Voici mon 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=utf-8" />
 
       
        <title>Harmony</title>
        
        <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
        
                    
	</head>
 
  	<body>
    	
        <div id="main-content">
        
        	<div id="header">
          			
                    <div id="header_menu">
                    
                        <a href="index.php?page=accueil" title="Accueil">Accueil</a>|
                        <a href="index.php?page=reiki" title="Soins">Soins</a>|
                        <a href="index.php?page=tarifs" title="Tarifs">Tarifs</a>|
                        <a href="#" title="Agenda">Agenda</a>|
                        <a href="index.php?page=contact" title="Contact">Contact</a>
                    </div>
        		
             </div>
            
            <div>
            
            	<div id="menu">
          			
					<a href="index.php?page=reiki" title="Reiki">Reiki</a>
          			<a href="index.php?page=massages" title="Massages">Massages</a>
          			<a href="index.php?page=reflexologie" title="Réflexologie">Réflexologie</a>
                    <a href="index.php?page=kinesiologie" title="Kinésiologie">Kinésiologie</a>
        		
                </div>
            	
                <div id="content_haut">
                
                	<div id="content_title">
                    
                    	<h1><? if(isset($_GET['page']) && file_exists("pages/" . $_GET['page'] . ".php")) echo $_GET['page']; else echo "Accueil"; ?></h1>
                    
                  	</div>
                  
               </div>
                
               <div id="content">
                
                	<div id="content_texte">
                    
                		<?php
							include("includes/page.inc.php");
						?>
                        
                	</div>
                    
                </div>
                
                <div id="content_bas">
                </div>
			                
            </div>                       
           
           
            <div id="footer"> <!-- Bas de page -->
    
    			<p id="copyright">Copyright &copy; 2010 Harmony | Tous droits réservés | Site réalisé par 
                <a href="http://www.sysmic.be/" title="H2Organisation Website" target="_blank">H<sub>2</sub>Organisation</a></p>
    
    		</div> 	
                      
        </div>
        
    </body>
    
</html>
 




 
#content { background: transparent url(img/content_milieu.png) center repeat-y; margin-top: 0px; width: 1024px; min-height: 300px; }
 
 
#content_haut { background: transparent url(img/content_haut.png) no-repeat center top; margin-top: 0px; width: 1024px; height:116px; }
 
#content_texte { padding-left: 70px; padding-right: 60px; }
 
#content_bas { background: transparent url(img/content_bas.png) no-repeat center bottom; margin-top: 0px; width: 1024px; height: 40px; }


Je sais qui a qqch qui ne va pas du tout Smiley langue Deja quand je selectionne mon texte sur la page, ca sélectionne quasi toute la page, donc c'est que je n'ai pas bien délimité mon div principal...

Merci d'avance
Salut à toi,

A tu un exemple en ligne ? Car au niveau du code HTML je ne trouve pas de problème au niveau des divs.

Par contre sur ton CSS tu dit que les <p> ou <h1> sont different tu peux donc faire quelque choses du genre :

p {
	margin :0px ;
	padding :0px
}


Comme ça tu n’auras aucune marge sur toutes les balises <p></p> de la page et tu pourras par la suite mettre tes propres padding et margin au élement que tu souhaites.
Modifié par Viva25 (16 Mar 2010 - 16:57)
Sujet clos
Aller à