28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je réalise un site internet pour une association, j'ai trouvé de l'aide en parcourant le site d'alsacréation (je metterai un lien vers le site).

Voila la version test en question :

http://saintbrieucanimation.free.fr/test/

Sous firefox, pas de probleme, tout marche impec. Le site est conforme a l'html W3C.

Cependant sous IE6, le menu se retrouve décalé vers le bas : pourquoi ?

Je n'arrive pas a comprendre.

Merci de votre aide biggrin
Modifié par NestorO1 (03 May 2007 - 19:52)
Bonjour,

Il faudra encore parcourir le forum, la faq et les tutos car tu as fait un menu graphique "usine à gaz" avec un beau tableau des spacer.gif etc (d'ailleurs, si on désactive les images, il n'y plus de menu ... Génant non?).

Non, sérieux pour une telle mise en page, nul besoin de tout ce fourbi
J'ai essayé de faire un menu en css, mais je n'arrive pas, tu n'as pas un lien vers un tuto qui ressemblerai au mien ? J'en ai trouvé un sur alsa, mais ça colle pas apparement.

Mais sinon pourquoi avec la configuration actuelle, j'obtiens une marge avant le menu ? je ne capte pas et j'aimerais bien savoir ...

merci
Bonjour,

Juste pour une idée;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>	

<title>test3</title>

<style type="text/css">
*{margin: 0; padding: 0;}

html, body {
	height: 100%;
	margin: 0;
    background: #000;
	}
	
div#global {
	min-height: 100%;
	width: 950px;
	margin: 0 auto;
	position: relative;
    background: #OOO;
	}
			  
#droite {
	width: 610px;
	overflow: hidden;
    color: #FFF;
   	}

div#header {
	background: #000;
	color: #fff;
	height: 174px;
	}
	
div#header h1 {
	margin: 0;
	}
	
#gauche {
	float: left;
	width: 335px;
	overflow; hidden;
	}

#sidebar{
	overflow; hidden;	
}

#sidebar ul{
	list-style-type: none;
	width: 332px;
	height: 545px;
	position: relative;
	margin: 130px auto 30px;
	background: url(fond_menu.gif);
}

#sidebar li{
	position: absolute;
}

#sidebar li a span{
	display: none;
}

#sidebar li a{
	display: block;
	width: 100%;
	height: 100%;
}

.un{
	top: 85px;
	left: 40px;
	width: 87px;
	height: 27px;
}
	
.deux{
	top: 123px;
	left: 40px;
	width: 160px;
	height: 31px;
}

.trois{
	top: 157px;
	left: 40px;
	width: 220px;
	height: 35px;
}

.quatre{
	top: 195px;
	left: 54px;
	width: 227px;
	height: 42px;
}

.cinq{
	top: 249px;
	left: 58px;
	width: 87px;
	height: 30px;
}

.six{
	top: 290px;
	left: 63px;
	width: 125px;
	height: 30px;
}

.sept{
	top: 337px;
	left: 68px;
	width: 87px;
	height: 27px;
}



div#footer {
	clear: left;
	width: 100%;
        color: #fff;
        
              }
</style>
</head>


<body>

<div id="global">
	<div id="gauche">
		<div id="sidebar">
			<ul>
				<li class="un"><a href="#" title="" ><span>accueil</span></a></li>
				<li class="deux"><a href="#" title="" ><span>nocturne</span></a></li>
				<li class="trois"><a href="#" title="" ><span>balade</span></a></li>
				<li class="quatre"><a href="#" title="" ><span>foire</span></a></li>
				<li class="cinq"><a href="#" title="" ><span>presse</span></a></li>
				<li class="six"><a href="#" title="" ><span>partenaire</span></a></li>
				<li class="sept"><a href="#" title="" ><span>contact</span></a></li>
			</ul>
		</div>
	</div>

	<div id="droite">
		<div id="header">
		<img src="header5.jpg" alt=" logo" />
		</div>

		<div id="content">
		<h2><img style="width: 250px; height: 60px;" alt="Bienvenue" src="boutonb.jpg"></h2>

		<p>Bienvenue sur le site internet de saint brieuc animation</p>

		<p>Présentation des sections :</p>

		<ol>

			<li>Les Nocturnes</li>
			<li>Ballade avec brassens</li>
			<li>La foire aux peintres</li>
		</ol>
		</div>
	</div>

	<div id="footer">
	2007 - Saint-Brieuc
Animation, Tous droits
réservés. <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fsaintbrieucanimation.free.fr%2Ftest%2F">Site
conforme à l'Html 4.O1</a>
	</div>

</div>

</body>
</html>
upload/5854-header5.jpg upload/5854-fondmenu.gif
NestorO1 a écrit :
Je réalise un site internet pour une association, j'ai trouvé de l'aide en parcourant le site d'alsacréation (je metterai un lien vers le site).

Voila la version test en question :

http://saintbrieucanimation.free.fr/test/

Sous firefox, pas de probleme, tout marche impec. Le site est conforme a l'html W3C.

Cependant sous IE6, le menu se retrouve décalé vers le bas : pourquoi ?

Je n'arrive pas a comprendre.

Merci de votre aide biggrin

Salut. Smiley smile

Merci de suivre les règles du forum et d'ajouter [Résolu] au titre de ton sujet plutôt que d'effacer tes messages.
Modifié par Julien Royer (03 May 2007 - 19:50)