28234 sujets

CSS et mise en forme, CSS3

[RESOLU] <Div> Centrer Div Footer

Bonjour,
Je ne comprend pas bien pourquoi ma Div du bas n'est pas centrée. Donc si quelqu'un arrive à trouver d'où vient la faille.

http://imp3rium.free.fr/test/

Voici tous les codes :

HTML
<title>Imp3RiuM &#9650; Benjamin Lacaille - Website &amp;#9650; SINCE MCMLXXXIX.</title>

<style type="text/css">
<!--


body{
	background-image: url(img/border/background.png);
	background-position:center;
	background-repeat:repeat-y;
    text-align:center;
	margin-top: 0;
	margin-bottom: 0;
	}
	
.Style1 {
	color:#330f34;
	font-family:Myriad Pro, Tahoma, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;
}

.Style2 {
	color:#330f34;
	font-family:Times New Roman, Times, serif;
	font-size:14px;
	font-style:italic;
}
	
	-->
</style>

<link href="css/style.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mainmenuslide.js"></script>
<script type="text/javascript">
        $(function() {
            $("ul").mainmenuslide({
                fx: "backout",
                speed: 800,
                click: function(event, menuItem) {
                    return true;
                }
            });
        });
</script>
</head>

<body>
<div id="header">
	<div class="header">
    <div class="header_navigation">
    	<ul class="mainmenuslide">
        	<li><a href="../index.html">HOME</a></li>
            <li><a href="../book.html">BOOK</a></li>
            <li><a href="mailto:x._imp3rium_.x@hotmail.fr">CONTACT</a></li>
            <li><a href="../cult.html"><font face="Times New Roman, Times, serif">CULT</font></a></li>
            <li><a href="http://imp3rium.tumblr.com/" target="_blank"><img src="img/tumblr.png" width="77" height="18" border="0"/></a></li>
        </ul>
    </div>
    </div><!-- end header_navigation-->
</div><!-- end header -->

<p align="center"><img src="img/welcome.png" width="798" height="34" /></p>
<p align="center"><img src="img/3icons.png" width="961" height="280" /></p>
<p align="center"><img src="img/border/seperate.png" width="798" height="4" /></p>
<p align="center"><img src="img/featured.png" width="798" height="21" /></p>
<p align="center"><img src="img/featuredthumb.png" width="961" height="270" /></p>
<p align="center"><img src="img/aboutme.png" width="999" height="275" /></p>
<p align="center"><img src="img/informations_cv.png" width="221" height="305" /><img src="img/informations_skills.png" width="342" height="305" />
<p align="center">
<div id="footer">
</div>

</p>
</body>
</html>


CSS
style.css
/**** Links ***/
a:active, a:visited, a:link { color:#FFF; text-decoration:none; } 
a:hover { color:#92c020 }
/**** Header ***/
#header{
	width:1000px;
	height:150px;
	margin-left:auto;
	margin-right:auto;
	}
.header{
	background: url(../img/border/background_header.png) no-repeat;
	height:150px;
	position:fixed;
	width:1000px;
	}
/**** content ***/
#content{
	width:940px;
	border-left:1px solid gray; border-bottom:1px solid gray ; border-right:1px solid gray ;		
	padding: 30px;
	min-height:500px;
	}
/**** Footer ***/
#footer{
	background: #333;
	width:1000px;
	height:150px;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	}


main.css
.mainmenuslide {
	height: 29px; width:550px;
    background: url("../img/border/background_main.png") no-repeat top; position: relative;
    padding: 15px 0 15px 0; margin: 60px 0px 0px 425px;
    }
.mainmenuslide li {
	padding: 16px 0 11px 25px; margin: -18px 0 0 9px;
	float: left; list-style: none;
	}
.mainmenuslide li.back {
	background: url("../img/border/hover_main.png") no-repeat right -52px;
	width: 9px; height: 30px; padding: 0px 0 22px 0;
    z-index: 1;	margin: -12px 0 0 8px; position: absolute;
	}
.mainmenuslide li.back .left {
	background: url("../img/border/hover_main.png") no-repeat top left ;
	padding: 0px 0 22px 0; height: 30px; margin-right: 24px; 
	}
.mainmenuslide li a {
	font: bold 14px arial;
    top: 7px; z-index: 2; float: left;
    height: 30px; position: relative;
    margin: auto 10px; outline: none;    
    }


Merci encore à ceux qui prendront le temps de m'aider Smiley cligne 

#footer{ 
    background: #333; 
    width:1000px; 
    height:150px; 
    position:absolute; 
    margin-left:auto; 
    margin-right:auto; 
    }


Ton div a une position:absolute. Si tu enlèves cette propriété là, ton margin auto va fonctionner.
Nickel Smiley cligne
En plus je viens de m'aperçevoir que sa vient d'une erreur de ma part, j'ai l'essaie un espace entre :

</div> 
 
</p>


C'est pour çà que j'en suis venu à la position: absolute; ... Smiley biggol
Merci quand mêm Smiley biggrin
Modifié par Imp3RiuM (12 Oct 2010 - 21:49)
Sujet clos
Aller à