28220 sujets

CSS et mise en forme, CSS3

Est ce possible ?!

bonsoir à tous !

je suis entrain de mettre en css un site et j'ai un "tit" probleme, mais déja à la base je me demande si mon "design" peut etre transformé en css.
voilà les sources et captures si quelqu'un peut me mettre sur la la voie

+ petites explications sur le but Smiley smile j'aimerai que le menu "orange" remonte (comme c'était le cas avant que je mette un autre bloc pour afficher le texte de substitution) ensuite dans la version en tableau de ce site sous le menu orange ca continue jusqu'en bas avec un fond bleu foncé. en gros le menu orange sépare le site en deux à sa gauche le contenu et à sa droite diverses options (sondages, images etc...)

- une capture :
upload/7939-IE.jpg

- code html :

<!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=iso-8859-1" />
<title>Test</title>
<link href="php/styles_inc/defaut.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Container">
	<div id="Site">
		<div id="ban"><img src="images/bannieres/04.jpg" alt="banniere" title="banniere" /></div>
		<div id="ssbarreg"></div>
		<div id="contents"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla venenatis tincidunt elit. Maecenas id justo. Curabitur posuere, 					risus sed vulputate eleifend, est sem interdum leo, id feugiat lectus est eu leo. Sed nec lectus. Sed vel ligula eget augue placerat varius. Proin eros neque, egestas quis, ullamcorper sit amet, venenatis nec, erat. Nam rhoncus erat eget nulla. Vestibulum felis massa, placerat in, bibendum eu, aliquet at, ante. Donec nec leo vitae est congue ullamcorper. Nulla pharetra ipsum eget nibh. Aliquam eget ligula. Sed nec turpis id magna ornare tincidunt. Vestibulum porttitor, neque quis scelerisque dapibus, dui sem tempus arcu, quis luctus odio libero id nunc. Sed faucibus, neque nonummy dictum mollis, nulla sapien fermentum nisi, eget fermentum urna lacus at massa. Vivamus euismod arcu sit amet sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae velit ac sem iaculis fermentum. In sodales. Proin posuere odio ut nunc.</p>  
		</div>
		<ul>
		<li><a href="association.html"><img src="images/index_02.jpg" alt="association" title="association"/></a></li>
		<li><a href="association.html"><img src="images/index_04.jpg" alt="membres" title="membres"/></a></li>
		<li><a href="association.html"><img src="images/index_05.jpg" alt="animations" title="aanimations"/></a></li>
		<li><a href="association.html"><img src="images/index_06.jpg" alt="locaux & job" title="locaux & job"/></a></li>
		<li><a href="association.html"><img src="images/index_09.jpg" alt="partenaires" title="partenaires"/></a></li>
		<li><a href="association.html"><img src="images/index_14.jpg" alt="adhesion" title="adhesion"/></a></li>
		<li><a href="association.html"><img src="images/index_15.jpg" alt="contact" width="141" height="41" title="contact"/></a></li>
		</ul>
		<div id="logo"><img src="images/index_03.jpg" /></div>
		<div id="ssbarred"></div>
		<div id="footages"></div>
	</div>
</div>
</body>
</html>


- le code css (surement des choses en trop ou pas utils) :


/* CSS Document */
body {
	background-image:url(../../images/picto/tiled.gif);
	text-align:center;
	margin:0px 0;
	padding:0;
	
	}
* { margin:0; padding:0;}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a img {border:none;}
img {vertical-align: middle;}

/* -- Container 100% sur 100%-- */
div#Container { 
			width:100%; 
			height:100%; 
			margin:auto; 
			text-align:center;
			margin:0;
			padding:0;
			}

/* -- Container site 760px sur 100%*/
div#Site { 
			width:760px; 
			margin:0; 
			text-align:left;
			margin:0;
			padding:0;
		}
div#ban {
			padding:0;
			margin:0;
			width:441px;
			height:143px;
			float:left;
			clear:right;
			}
div#Site ul {
			padding:0 0 0 0;
			margin:0 0 0 0;
			float:left;
			list-style:none;
			vertical-align: middle;
			}	
div#logo	{
			padding:0;
			margin:0;
			float:left;
			background-color:#FFFFFF;
			}
div#ssbarreg {
			padding:0;
			margin:0;
			width:441px;
			height:28px;
			float:left;
			clear:both;
			background:#3399CC;
			}
div#ssbarred {
			padding:0;
			margin:0;
			clear:rigth;
			width:178px;
			height:28px;
			float:left;
			background:#3399CC;
			}
div#contents {
			padding:0;
			margin:0;
			width:441px;
			height:100%;
			float:left;
			}
			
div#contents p {
			margin:0;
			padding-left:1em;
			padding-top:1em;
			padding-bottom:1em;
			padding-right:1em;
			background-color:#E7E7E0;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:0.8em;
			}
div#footages {
			margin:0;
			padding:0;
			width:760px;
			height:28px;
			background:#3399CC;
			}
Sujet clos
Aller à