28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Margin qui ne fonctionnent pas... !

Bonjour à tous Smiley smile

Voilà nous faisons un travail collaboratif (à la fac), et nous avons deux problèmes avec un site web en conception...
1 - Un margin-top qui ne fonctionne pas (sur mon #footer, pour les balises a)
2 - Un menu secondaire qui s'affiche avec du Javascript qui merdouille sur Internet Explorer (dans son positionnnement)... Et là aussi, les margin ne veulent pas s'appliquer !

Je ne sais pas combien de temps j'ai passé à fouiner, à bricoler, mais je ne trouve vraiment pas le problème !
Vous pouvez voir le site ici :

http://chevaliers5.free.fr/ws/

Et pour ceux qui préféreraient, voici les codes ici (j'ai viré l'inutile) :


<!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>Bienvenue sur le site de Toulire</title>
	<link href="stylesheet.css" rel="stylesheet" type="text/css" />
	<!--[if IE]>
		<style type="text/css">
			#menu ul {margin-left:40px;}
			.ssmenu {
				padding-left:-100px;
				padding-top:50px;		
			}
			
		</style>
	<![endif]-->
	<script language="Javascript">
		function montre(id) {
			var d = document.getElementById(id);
			
			for (var i = 1; i<=7; i++) 
			{
				if (document.getElementById('ssmenu'+i)) 
				{
					document.getElementById('ssmenu'+i).style.display='none';
				}
			}
			
			if (d) 
			{
				d.style.display='block';
			}
		}

		function cacheBloc()
		{
			args = cacheBloc.arguments;
			
			for (i=0; i<(args.length); i++)
			{
				if (document.getElementById(args[i])) 
				{
					document.getElementById(args[i]).style.display='none';
				}
			}
		}
</script>
</head>

<body>

<div id="conteneur">
	<div id="bandeau"></div>
	<div id="menu">
		<ul>
			<li onmouseover="javascript:montre('ssmenu1');">
				<a href="#" id="presentation">Présentation</a>
					<ul class="ssmenu" id="ssmenu1" style="display:none;">
						<li><a href="#">Element 1</a></li>

						<li><a href="#">Element 2</a></li>
					</ul>
			</li>
			
			<li onmouseover="javascript:montre('ssmenu2');">
				<a href="#" id="chose">Présentation</a>
					<ul class="ssmenu" id="ssmenu2" style="display:none;">
						<li><a href="#">Element 1</a></li>

						<li><a href="#">Element 2</a></li>
						<li><a href="#">Element 3</a></li>
					</ul>
			</li>
			
		</ul>
	</div>
	<div id="page">
		<div id="titre">...</div>

		<div id="accroche">...
		</div>
		<div id="texte"> 
		...
		</div>
	</div> <!-- #page -->
	<div id="footer">
		<a href="contact.html">Contact</a>
	</div>

</div> <!-- #conteneur -->


</body>
</html>


Et le CSS :


@charset "utf-8";
/* CSS Document */
html,body {margin:0; padding:0;}

#conteneur {
	width:974px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

#bandeau {
	width:974px;
	height:176px;
	background-image: url(images/bandeau.png);
}

#menu {
	width:974px;
	height:90px;
	background-image: url(images/menu_accueil.png);
}
#menu ul {
	margin:0;
	padding-top:20px;
}
#menu li {
	display:inline;
	margin-right:20px;
}

.ssmenu {
	position:absolute;
	display:block;
}
#page {
	width:974px;
	background-image: url(images/fond_accueil.png);	
}
	
#texte {
	width:600px;
	padding:30px 100px 50px 50px;
}
#titre {
	padding:50px 100px 5px 50px;
	}
#accroche {
	width:600px;
	padding:10px 100px 0px 50px;
}

#footer {
	text-align:center;
	background-image: url(images/footer_accueil.png);
	height:87px;
	width:974px;
}
#footer a:hover{
	text-decoration:underline;
}


Merci d'avance si vous arrivez à nous aider Smiley smile
C'est hélas assez pressé, et on ne sait plus comment faire Smiley decu [/i][/i]
Modifié par Clemdups (21 Feb 2008 - 22:48)
Salut,

Vite fait donc pour que ton margin-top soit efficace donne à ton lien la propriété display: block;
#footer a{
	display: block;
	margin-top: 50px;
}


Smiley cligne

<edit> des erreurs de positionnement pour ton menu, à revoir le positionnement en absolute...
#menu {
	width:974px;
	height:90px;
	background: lime;
	position: relative;
}
#menu ul {
	margin:0;
	padding-top:20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
	width: 150px;
	height: 25px;
	margin-right:20px;

	
}
#menu li a {
	color:#fff; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-style:bold;
	text-decoration:none;


}
.ssmenu {
	position:absolute;
	width:974px;
	top: 26px;
	left: 0;
	border: 1px solid black;
}

#menu .ssmenu  li{
	display: inline;
	background: yellow;
}


Smiley cligne </edit>

Par contre JS désactivé "a plus menu"... Smiley lol
Modifié par ghost (20 Feb 2008 - 23:45)
Merci pour la réponse Smiley smile

En fait on a corrigé le problème entre temps... grâce à un float:left; effectivement... Il est temps que je revois mes bases moi Smiley cligne

Et concernant le JS, c'est un choix tout réfléchi Smiley cligne

merci encore !
Sujet clos
Aller à