MENU VERTICAL CSS (3 minis questions)

[garancetosello]

Youpi, yolo, alleluia, tralala, amen ...
Je suis arrivée à faire ENFIN mon 1ER script CSS et ce grâce à Cduray (je t'adore Cduray !! :idea: )
qui a une patience de dingue.
Merci aussi à vous tous.
C'est vraiment sympa d'aider des gens dans la panade.
http://www.votre-faire-part.com/page.html

Mais j'ai encore besoin de vous
MENU VERTICAL
- J'aimerai enlever le saut de ligne sous PRODUITS ASSORTIS
C'est une balise h1
J'avais mis un padding-top: 0px;
Mais ca ne marche pas

- Et je voudrai faire un saut de ligne à la fin de chaque bloc
exemple : après "Set de table" après "carte rectangle"

- Et de plus je voulais savoir et que vous m'expliquiez comment mettre des puces devant les liens.
Si c'est compliqué, laissez tomber.

Voici mon code CSS
http://www.votre-faire-part.com/page.css

#navigation {
	width:214px;
	height:850px;
	background-color: #FFFFFF;
	float: left;
	background-repeat: repeat-y;
}
#navigation h1 {
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-left: 10px; 
}
#navigation  ul {
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
	list-style-type: none;
}
#navigation li a {
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
	color: #000000;
	text-decoration: none;
	display: block;
	width: 190px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px; 
	padding-top: 4px;
	padding-right: 1px;
	padding-bottom: 0px;
	padding-left: 6px;
}
#navigation li a:hover {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
	color: #FF6699;
	background-color: #FFFFFF;
}

Garance

 

[MikeR]

Que viennent faire des(!) H1 dans un ul?
Utilise des li sans lien à la place.

 

[lambi521]

Pour les puces : #navigation ul li {list-style-type:circle;}

Un conseil, va faire un tour sur http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html

Tu apprendras bcp plus de choses et tu comprendras très vite comment te débrouiller toute seule plutôt que de demander sur WRI à chaque fois que tu veux faire un lien ou un paragraphe... Sinon ton site sera en ligne dans 1 an à mon avis

 

[garancetosello]

C'est exactement ça lambi521 !!
J'ai mis 1 semaine à centrer le site, 1 semaine pour le menu horizontal et là je sens que ca va être encore mal barré !
Et encore je n'ai pas à me plaindre, j'ai Cduray qui veille sur moi et me donne pas mal de bons conseils,
Bon je vais analyser le lien que tu m'as donné quand j'aurai fini avec mes rendez-vous !

 

[lambi521]

Effectivement il faut un petit peu de temps pour lire 2 3 tutos mais en fait c'est très simple tu comprendras vite. C'est toujours le même principe. Je n'y connaissais rien du tout à la base et maintenant je connais les propriétés CSS par coeur (je sais pas si c'est vrmt une bonne chose mais bon...)

Tu as déjà les bases car tu as réussi à découper ta page comme tu le voulais et à mettre le menu, tu n'as plus qu'à remplir c'est déjà pas mal pour un début.

Sinon pour le CSS tu peux le coder avec DreamWeaver le logiciel te "propose" les propriétés de chaque élément comme ça tu n'as pas à tout le temps recopier. Par exemple tu tapes "list-style-type:" dans DreamWeaver et une liste s'affiche avec tous les éléments que tu peux mettre pour cette propriété : circle, square, disc, none etc...

 

[essentielgsm]

Je peux te conseiller de corriger ton code html avant de faire la mise en page avec CSS.
Ton code HTML est plein d'erreurs. Pour corriger : http://validator.w3.org/

Pour ton menu de gauche "produits assortis", tu ne peux pas mettre de balise H1 directement dans un UL.
Tu peux faire :
<ul>
<li><h1>....</h1></li>
</ul>

Pour la CSS, applique à ton H1 :
margin:0 0 0 10px;

Ton saut de ligne devrait disparaître

Si tu as un peu de trésorerie, investi dans un bon intégrateur html/css. A partir de maquettes, en quelques jours ton site
sera utilisable. Difficile de tout faire soit même, CSS étant par ailleurs un langage graphique assez complexe et changeant
suivant les navigateurs...

 

[garancetosello]

le hic c'est que si je fais

<div id=navigation>
  <ul>
    <li><h1>- PRODUITS ASSORTIS -</h1></li>
</ul>
<ul>
    <li><a href="#">Poster</a></li>
    <li><a href="#">Dragée</a></li>
    <li><a href="#">Set de Table</a></li>
    <li><a href="#">Marque place</a></li>
    <li><a href="#">Etiquette autocollante</a></li>
    </ul>
  </div>

J'ai un écart énorme entre PRODUITS ASSORTIS et POSTER

En revanche si je fais

<div id=navigation>
  <ul>
    <li><h1>- PRODUITS ASSORTIS -</h1></li>
    <li><a href="#">Poster</a></li>
    <li><a href="#">Dragée</a></li>
    <li><a href="#">Set de Table</a></li>
    <li><a href="#">Marque place</a></li>
    <li><a href="#">Etiquette autocollante</a></li>
    </ul>
  </div>

ca marche parfaitement

La deuxième solution est correcte dans le codage ?
Merci
G