Un peu perdu niveau css pour intégrer mon design

Gros N@z · 9 Juillet 2008

Bonjour à tous,

Je suis en train de réaliser un site internet pour une société dans le cadre de mon stage. J'ai opté pour cms made simple qui me parait assez simple a mettre en uvre et surtout efficace. Surtout pour ceux qui auront à mettre du contenu, ce sera bien plus facile avec un système wysiwyg.

Mon petit problème est que je n'arrive pas à faire le menu a partir de ce qu'il y a actuellement... Je connais un peu le css de base mais je n'y arrive vraiment pas (et c'est pas faute d'avoir essayé). Idem pour le fond continuant après le header, comment faire ? Des div ?

Si quelqu'un pouvait me filer un coup de main, ce serait super sympa de sa part. Voici une archive contenant le gabarit, la feuille de style, mon design sous photoshop, mon rendu actuel sous firefox 3.0 et les images de la découpe css actuelle.

Merci beaucoup pour votre aide !

Gros N@z · 10 Juillet 2008

Alors...

J'ai bidouillé un peu ce matin et je suis arrivé à quelque chose de pas trop mal (voir les images) Mes problèmes sont que je n'arrive pas du tout à déplacer les menus dans la barre des menus de quelque manière que ce soit (margin...) ; le second est que lorsque que je passe sur ma second catégorie, il n'y a pas de couleur de fond sur la sous catégorie.

Voici le contenu du gabarit et de la feuille de style

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=&quot;http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>{sitename} - {title}</title>
	{metadata}
	{stylesheet}
	{cms_selflink dir="start" rellink=1}
	{cms_selflink dir="prev" rellink=1}
	{cms_selflink dir="next" rellink=1}
</head>
<body>
		 <div id="header">
		  <a href=&quot;http://www.xxxxx.com"><img id="logo" src="images/xxxxx/logo_xxxxx.png" alt="xxxxx.com"></a>
		<div id="menu_vert">	
		 		<h2 class="accessibility">Navigation</h2>
		 		{menu template='cssmenu.tpl'}
				  <hr class="accessibility" />
			  </div>
		</div>
	<div id="conteneur">
		<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
	</div>
	<div id="footer"> {global_content name='footer'} </div>
</body>
</html>

CODE

* {margin:0;
padding:0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;									
background-image: url(images/xxxxx/background_bas.png);
}
#conteneur {
width: 1010px;
margin: 0 auto;
background-image: url(images/xxxxx/fond_contenu.png);
background-repeat: repeat-y; 
}
#header {
width: 1010px;
margin: 0 auto;
height: 134px;
background-image: url(images/xxxxx/fond_header.png);
background-repeat: no-repeat;
}
#footer {
width: 1010px;
margin: 0 auto;
height: 38px;
background-image: url(images/xxxxx/fond_footer.png);
background-repeat: no-repeat;
}
#footer p {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
position: relative;
bottom: -5px;
}
#logo {
width: 187px;
height: 64px;
margin-left: 20px;
position: absolute;
top: 44px;
border: 0;
}
#search {
float: right;
width: 23em;	 /* enough width for the search input box */
text-align: right;
padding: 0.6em 0 0.2em 0;
margin: 0 1em;
}
///////////////////////MENU////////////////////////////////////////
#menu_vert {
}
#primary-nav li li { 
   width: 200px; 
}
	
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 5px 10px; 
   text-decoration: none; 
   color: #093a66;
}
	
#primary-nav li li a { 
   border: 1px solid #c4c4c4;
}
#primary-nav li, #primary-nav li.menuparent { 
}
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh {
   background-color: #c4c4c4;  
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}

Modifié 11 Juillet 2008 par Gros N@z
Merci d'utiliser la balise CODEBOX pour les codes de plus de 10 lignes. Dan.

Gros N@z · 10 Juillet 2008

Problème résolu sur un autre forum

**captain_torche** · 10 Juillet 2008

Il serait sympathique que tu donnes la réponse qui t'a été fournie.

Connexion

Un peu perdu niveau css pour intégrer mon design

Sujets conseillés

Gros N@z

Gros N@z

Gros N@z

captain_torche

Veuillez vous connecter pour commenter

Parcourir

Activité