28172 sujets

CSS et mise en forme, CSS3

bonsoir

question à laquelle je n'ai pas trouvé de solutions après avoir essayé tout ce que j'ai trouvé sur le forum.. j'ai du louper un épisode

j'ai un titre H1, et je veux écrire une phrase en tout (plus)petit dessous: celui là m'énerve Smiley langue
juste dessous quoi...
j'ai beau essayer des tas de combinaisons en css , des <p>, des <span> des margin top.. je n'arrive pas a faire un truc clean avec une seule feuille css pour IE 8 et firefox
à la rigueur c'est mieux sous IE !
si quelqu'un voulait bien m'ouvrir les yeux, que je comprenne d'où viens mon erreur, ce serait vraiment sympa, car mon cerveau doit faire grève Smiley lol
merci par avance

<!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" xml:lang="fr" lang="fr"> 

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<head>
<jdoc:include type="head" />
<title>Totophe Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/totophe/css/genre.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/totophe/css/IE.css" type="text/css" />

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/totophe/swfobject/swfobject.js" ></script>
<script type="text/javascript">
flashvars = {};
var params ={};
params.wmode = "transparent";
swfobject.embedSWF("<?php echo $this->baseurl ?>/templates/totophe/flash/ad.swf","log","950","650","10.0.0","<?php echo $this->baseurl ?>/templates/totophe/swfobject/expressInstall.swf",flashvars,params);
</script>
</head>
      	
<body>
<div id="general">  
     <div id="log">
     </div> 
 <div id="global">
     <div id="header">
      </div>
     <div id="titre">
       <h1>TOTOPHE DESIGN</h1>
         <span>celui là m'énerve !</span>
            </div>
 	
     <div id="centre">
       </div>
   
    <div id="bas">
        <jdoc:include type="modules" name="debug" />
    </div>
</div>
</div>   
</body>
</html>


puis le css

@charset "utf-8";
/* CSS Document */
img {
border : none;
}

html {
text-align:center;
font-size: 100%;
margin:0;
padding:0;

}
body {
margin: 0 auto;
padding:0;
background: #000000 url(../images/3.jpg);
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size : 20px;
text-align: center;
color:#FFFFFF; 

}
h1 {
margin-top: 15px;
padding:0;
  font-family:andy, sans-serif;
  font-size:60px;
  color:#FFF;
}
#general {
position: relative; 
margin: 0 auto;
padding:0;
width: 960px; 
vertical-align:middle; 
text-align: center;
height:960px;
}

#log {
	height:200px;
	width:960px;
    background: transparent;
    text-align: center;
}
	
#global {
background: #000000 url(../images/a.jpg);
width: 960px; 
text-align: center;
height:760px;
}
#header {
    height:2px;
    width:960px;
    background: transparent;
    text-align: center;
}    
#titre {
height:60px;
width:960px;
background: transparent;
text-align: center;
}    
#centre {
	background:transparent;
	width:960px;
	height:400px;
}
#bas {
width:960px;
height:20px;
background: transparent;
}

Modifié par dariusetmaya (19 Oct 2010 - 21:36)
Bonjour,

Je pense que il faut mettre dans H1 :
margin:0 et rajouter un height et l'enlever de #titre
bonjour et merci
nickel sous firefox Smiley cligne
rajout dans mon cas
margin-top:10px ;
height:30%;
toutefois j'ai laissé mon H1 entre les div
ne me reste plus qu'à trouver l'astuce sous ce satané IE Smiley fache