MENU VERTICAL CSS (3 minis questions)

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par garancetosello, 4 Décembre 2014.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 :D
    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

    Code:
    #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
     
  2. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    Que viennent faire des(!) H1 dans un ul?
    Utilise des li sans lien à la place.
     
  3. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    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
     
  4. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 !
     
  5. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    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...
     
  6. essentielgsm
    essentielgsm Nouveau WRInaute
    Inscrit:
    7 Décembre 2014
    Messages:
    9
    J'aime reçus:
    0
    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...
     
  7. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    le hic c'est que si je fais
    Code:
    <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
    Code:
    <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
     
Chargement...
Similar Threads - MENU VERTICAL CSS Forum Date
menu css vertical avec longue liste Développement d'un site Web ou d'une appli mobile 16 Juin 2010
Le menu n'apparait pas dans l'interface Google Ads AdWords Aujourd'hui à 15:36
Conserver ou non le nofollow sur menu Netlinking, backlinks, liens et redirections 9 Octobre 2019
Menu navigation, les tendances? Développement d'un site Web ou d'une appli mobile 20 Septembre 2019
Ne pas rendre crawlable le menu ? Référencement Google 15 Septembre 2019
Mauvais affichage menu en https (https imposé par google) Développement d'un site Web ou d'une appli mobile 15 Juin 2019
Modification du menu perte de trafic Demandes d'avis et de conseils sur vos sites 8 Mai 2019
Votre Avis sur le référencement d'un menu ou d'une page de listing Demandes d'avis et de conseils sur vos sites 7 Mars 2019
Comment hiérarchiser les liens de menu présentés sous son site dans Google Référencement Google 6 Février 2019
Mega menu : Nofollow ou Obfuscation de lien ? Netlinking, backlinks, liens et redirections 5 Février 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice