28172 sujets

CSS et mise en forme, CSS3

Un peu perdu niveau css pour intégrer mon design

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 xxx 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 ! Smiley smile
Modifié par newty (11 Jul 2008 - 09:24)
Bonjour newty et bienvenue sur Alsacreations! Smiley smile
Travailler avec une archive zip est quelque peu laborieux, ton sujet sera probablement plus vite traité avec une page en ligne démontrant le problème et pourquoi pas un screenshot du résultat escompté.
Bonne continuation!
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 Smiley smile 


<!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" 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="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>




* {
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é par newty (11 Jul 2008 - 09:24)
Sujet clos
Aller à