je me met au css mais besoin de conseils

vector

Membre actif
16 Novembre 2004
157
1
51
virginie.penalba.free.fr
Re-re bonjour ! je ne veux pas harceler le forum..mais c'est pour la bonne cause.. j'ai décidé finalement de tout refondre mon site en css, car j'en ai marre des trucs qui se calle pas bien..

Alors j'avais trouvé pour faire un cadre : ça
Facile mais j'ai voulu l'intégrer à ma page qui contient déjà un style css (menu) et mon cadre ne se met pas en fond : en dessous du menu) je voudrais aussi que le tout soit centré sur ma page...

Comme ceci : (fait avec tableaux)

Ah oui et les points noir au dessus de chaque photos du menu, on peut pas les supprimer ?

Oooh merciii ! :rose:
 
j'ai compris pourquoi mon menu était hors du calque...c'est tout con...je ne l'avais pas positionner à l'intérieur des balises "div"...Bon mainteant je galère vraiment sur le fait de ne pas pouvoir centrer le tout et bien positionner mon menu par rapport au fond noir..
SVP merci vraiment pour votre aide :
voir

---------- Nouveau message ajouté à 16h22 ---------- Le message précédent a été envoyé à 15h10 ----------

Personne ne repond du coup je me debrouille seule finalement :
voilà comment je me debrouille
Je suis assez fière de moi maintenant..il me reste quand une enigme : le menu qui est décalé par rapport au bloc noir...ça fait un moment que je cherche et là je crois que j'ai vraiment besoin de votre aide...

le css :
Bloc de code:
/**************************************************************

	Image Menu
	v 2.2

**************************************************************/
ul#imageMenu { position: relative; width: 1090px; height: 175px; }

ul#imageMenu { height: 175px; }

ul#imageMenu li { float: left; }

ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; }

ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); }

ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); }

ul#imageMenu li.produits a { background: url(img_menu/produits.jpg) 0 50%; }

ul#imageMenu li.contact a { background: url(img_menu/contact.jpg) 0 50%; }


body { color: #000; font-size: 11px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; background-color: white; }


.formulaire { color: #c39; font-size: 10px; margin: 0; border-width: 1px; }
a:link { color: #fb1eec; }
a:hover { color: purple; }
a:visited { color: #800080; }
a:active { color: #800080; padding: 0; }
.clear {
	clear: both;
}
#cadre { background-image: url(img/fond_noir.gif); top: 0; margin-left: auto; margin-right: auto; width: 1000px; height: 659px; margin-top:-15px }
#logo { background-image: url(img/logo.jpg); background-repeat: no-repeat; width: 1000px; height: 72px; margin-top: 15px; }
body { color: black; background-color: white; background-image: url(img/fond.jpg); background-repeat: no-repeat; background-attachment: fixed; }

/*************************************************************/

Merci:zen:
 
Bonjour.
Ton menu dépasse de la zone noire, parcequ'il est PLUS GRAND que cette dernière :

ul#imageMenu { position: relative; width: 1090px; height: 175px; }

Oui mais le soucis c'est que si je mais 1000px et ben la derniere image du menu (à droite) va repartir à la ligne (en dessous) et le menu est toujours décalé sur la droite.
En faite peu importe la taille, il faudrait juste qu'il soit centré par rapport au bloc noir..

Merci pour ta réponse
v
 
Alors, je voi qu'il ya 20px en trop a droite comme à gauche, donc on va essayer de faire ca:
20+20 = 40
1090-40 = 1050
ul#imageMenu { position: relative; width: 1050px; height: 175px; }

En remettant le cadre noir à 1050px aussi.
 
<ul style="list-style-type:none">

Pas vraiment top les attributs css dans le html, j'opterai plutôt pour les mettre de la manière suivante dans le css :
Bloc de code:
ul#imageMenu { position: relative; width: 1090px; height: 175px; [COLOR="Red"]list-style:none; padding:0;[/COLOR] }

D'une part il n'y aura plus les listes, d'autre part il n'y aura plus le décalage en padding de l'élément <ul>

Tu peux également supprimer la ligne suivante dans le css :
Bloc de code:
ul#imageMenu { height: 175px; }
Elle est inutile car elle répète la propriété de hauteur définie dans la ligne précédente
 
Salut,
qui aurait une explication sur le fait que sur cette page j'ai un ascenseur vertical alors que la structure est quasi pareille sur mes autres pages mais il n'y a pas d'ascenseur.


Ma page HTML :


Bloc de code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu</title>
		<link href="produit.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="_common/js/mootools.js"></script>
		<script type="text/javascript" src="imageMenu.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script src="thumbs.js" type="text/javascript"></script>


</head>
<body margin: 0; text-align: center; leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

<div id="cadre">
<div id="logo"></div>
<ul id="imageMenu"> 
	<li class="societe"><a href="societe.html"></a></li> 
	<li class="productions"><a href="production.html"></a></li> 
	<li class="produits"><a href="produits.html"></a></li> 
	<li class="contact"><a href="contact.html"></a></li> 
</ul>

<div id="fondproduits"></div>
<div id="texte">Prov’herbes établissement en nom propre crée en octobre 1987.<br>
Nombre de personnes travaillant à temps complet dans l’entreprise :10 <br>
L’établissement se situ dans le sud de la france , au centre d’un triangle défini par Arles, Nîmes, Avignon à distance égale des portes de la Camargue , des pieds du mont Ventoux et des prémisses des Cévennes.</div>


				
				<script type="text/javascript"> 
	window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0});
	});
</script>



<ul id="thumbs">		
  <li> 
    <a href="img/grand/produit-01.png">
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-01.gif" /> 
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-02.png"> 
      <img alt="Étui herbes de Provence spécial poisson" 
        src="img/vignettes/produit-02.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-03.png">  
      <img alt="Étui herbes de Provence spécial Pâte, tomate, pizza" 
        src="img/vignettes/produit-03.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-04.png">  
      <img alt="Étui herbes de Provence spécial grillade, marinade, ragoût" 
        src="img/vignettes/produit-04.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-05.png">  
      <img alt="Étui herbes de Provence spécial fromage" 
        src="img/vignettes/produit-05.gif" />  
    </a> 
  </li> 
  
 <li> 
    <a href="img/grand/produit-06.png">  
      <img alt="Étui herbes de Provence Bio spécial mijoté, barbecue, marinade " 
        src="img/vignettes/produit-06.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-07.png">  
      <img alt="Étui herbes de Provence spécial agneau" 
        src="img/vignettes/produit-07.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-08.png">  
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-08.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-09.png">  
      <img alt="Étui thym" 
        src="img/vignettes/produit-09.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-10.png">  
      <img alt="Étui laurier" 
        src="img/vignettes/produit-10.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-11.png">  
      <img alt="Étui thym/laurier" 
        src="img/vignettes/produit-11.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-12.png">  
      <img alt="Présentoir étuis thym, laurier, thym/laurier" 
        src="img/vignettes/produit-12.gif" />  
    </a> 
  </li> 
</ul></div>

							
	</body>
</html>


mon css :

Bloc de code:
/**************************************************************

	Image Menu
	v 2.2

**************************************************************/
ul#imageMenu { position: relative; top: -15px; width: 1010px; height: 175px; list-style:none; padding:0; }

ul#imageMenu li { float: left; }

ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; }

ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); }

ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); }

ul#imageMenu li.produits a { background: url(img_menu/produits.jpg) 0 50%; }

ul#imageMenu li.contact a { background: url(img_menu/contact.jpg) 0 50%; }
a:link { color: #fb1eec; }
a:hover { color: purple; }
a:visited { color: #800080; }
a:active { color: #800080; padding: 0; }
.clear {
	clear: both;
}
#cadre { background-image: url(img/fond_noir.gif); top: 0; margin-left: auto; margin-right: auto; width: 1000px; height: 660px; margin-top:-15px }

#logo { background-image: url(img/logo.jpg); background-repeat: no-repeat; width: 1000px; height: 72px; margin-top: 10px; }

body { background-color: white; background-image: url(img/fond.jpg); background-repeat: no-repeat; background-attachment: fixed; }
#texte { color: black; font-size: 13px; font-family: Geneva, sans-serif, Arial, Helvetica, SunSans-Regular; font-variant: small-caps; line-height: normal; text-align: justify; width: 900px; height: 400px; margin-right: auto; margin-left: auto; }
#fondSociete { background-color: white; width: 990px; height: 405px; margin-top: -20px; margin-right: auto; margin-left: auto; }
/*************************************************************/

Merci à tous
 
J'ai pas le temps de tout regarder, analyser (une page en ligne serait mieux) mais :

Bloc de code:
<body [B]margin: 0; text-align: center;[/B] leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
Là il y a un problème, et

Bloc de code:
<li class="societe"><a href="societe.html"></a></li> 
    <li class="productions"><a href="production.html"></a></li> 
    <li class="produits"><a href="produits.html"></a></li> 
    <li class="contact"><a href="contact.html"></a></li> 
</ul>
Ici les liens sont vides, donc inaccessible avec une synthèse vocale et pas référencés par les robots indexeurs. Si c'est juste pour avoir des menus en images, ll faut les mettres dans le code html, exemple :

Bloc de code:
<li class="societe"><a href="societe.html"><img src="societe.png" alt="société" /></a></li>
Enfin, il n'est pas nécessaire d'utiliser xhtml 1.1 qui, si on suit les règles à la lettre, devra être envoyé avec le header application/xhtml+xml que IE ne comprend pas. Mieux vaut utiliser le xhtml 1.0 strict ou transitionnal.
 
Mais mon menu fonction bien pourtant avec les liens tel quels :
http://virginie.penalba.free.fr/essai2/essai2.html

---------- Nouveau message ajouté à 09h48 ---------- Le message précédent a été envoyé à 09h45 ----------

Si tu veux apprendre le CSS comme il faut, et comprendre ce que tu fais, empaluche toi ceci.

Excellent ouvrage, parole de développeur repenti.

Merci pour ton conseil, je vais le suivre, mais est-ce que ce livre est bien adapté pour quelqu'un qui a niveau débutant en css, et une rétissance à la programmation pure ?