IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Aligner ma liste css sur la gauche avec son image.


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Webdesigner
    Inscrit en
    Décembre 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : Décembre 2018
    Messages : 14
    Par défaut Aligner ma liste css sur la gauche avec son image.
    bonjour

    je voudrais aligner un tableau css sur la gauche mais après de multiple tentative rien ne marche.
    voici le
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Librairie l'indépendante</title>
    <link rel="stylesheet" href="style.css">
    <body>
    <img src="img/logo.gif" height="84" width="200" alt="Logotype - L'IndÈpendante"  title="Logotype - L'IndÈpendante" >
    <h1>Librairie <em>L'indépendante</em></h1>
    <dl>
    	<dt><a class="Accueil" href="index.html">Accueil</a></dt>
    	<dt><a class="Présentation" href="contact.html">Présentation</a></dt>
    	<dt><a class="Informations pratiques" href="auteur.html">Informations pratiques</a></dt>
    	<dt><a class="Evénements" href="indice.html">Evénements</a></dt>
    	<dt><a class="Nos coups de coeur" href="indice.html">Nos coups de coeur</a></dt>
        <img src="img/bandeau.jpg" width="960" alt="bandeau"  title="L'indépendante">
    </dl>
    <h2><em>L'indépendante</em> : libre et joyeuse</h2>
    <p>La librairie L'indépendante vous accueille tous les jours pour vous offrir le meilleur des livres. Littérature, polars, poésie, philosophie, BD pour <br />tous les âges et toutes les bourses. Venez découvrir notre espace tentaculaires, nos rayonnages multiformes et nos libraires joyeux.</p>
    <h3>Prochain évènement</h3>
    <strong>Lecture post-mortem de <em>L'Odyssée</em> par Homère</strong><br />
    Homère nous fera le plaisir de nous lire l'introduction de son immense poème épique, le dernier vendredi de ce mois.<br />
    >> En savoir plus <lien hypertexte vers page ÈvÈnements>
    <h4>Lecture du soir</h4>
    <p>Cette semaine, votre libraire vous invite à lire un aphorisme de Nietzsche au moment du coucher.<br />
    >> En savoir plus <lien hypertexte vers page "Nos coups de coeurs"></p>
    <h5>Librairie l'indépendante - 26, allée du Sphinx - 45020 Tournepioche</h5>
    </body>
    </html>

    voici le
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    /* reset /
    * {
        margin:0px
    	padding:0px
    	}
    /* page */
    body {
    	font-family:arial,verdana,sans-serif;
    	color:#000000;
    	margin:50px
    	}
    h1 {
    	font-family:arial,verdana,sans-serif;
    	font-size:20px;
    	color:#aa3322;
    	}
    /*liste */
    dl,dt {
        background-color:#aa3322;
        background-image: url('img/bandeau.jpg') no repeat;
        padding-left:0;
    	font-size:12px;
        color:#cccccc;
        border-bottom: 1px dashed #cccccc;
    	}
    h2 {
    	font-family:arial,verdana,sans-serif;
    	font-size:24px;
    	color:#000000;
    	}
    h3 {
    	font-family:arial,verdana,sans-serif;
    	font-size:24px;
    	color:#000000;
     
    	}
    h4 {
    	font-family:arial,verdana,sans-serif;
    	font-size:24px;
    	color:#000000;
    	}
    h5 {
        font-family:arial,verdana,sans-serif;
        background-color:#aaaaaa;
    	font-size:14px;
    	text-align:center;
    	color:#aa3322;
    	margin-top:1px solid;
    	padding: 30px 30px 30px 30px;
    	}

    je cherche a coller ma liste avec l'image juste en dessous sur la gauche tout en gardant le reste a 50px du bord.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour et bienvenue sur DVP.
    Je n'ai pas tout bien compris mais la première des choses à faire serait de mettre tes éléments dans le même conteneur ... mais bon !!

    Tu utilises un <dl> pour ton menu, il existe un élément bien plus approprié <nav>.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div style="display:flex">
      <nav>
        <a class="Accueil" href="index.html">Accueil</a>
        <a class="Présentation" href="contact.html">Présentation</a>
        <a class="Informations pratiques" href="auteur.html">Informations pratiques</a>
        <a class="Evénements" href="indice.html">Evénements</a>
        <a class="Nos coups de coeur" href="indice.html">Nos coups de coeur</a>
      </nav>
      <img src="img/bandeau.jpg" width="960" alt="bandeau"  title="L'indépendante">
    </div>
    en mettant les <a> en display:block.

  3. #3
    Membre averti
    Femme Profil pro
    Webdesigner
    Inscrit en
    Décembre 2018
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Services à domicile

    Informations forums :
    Inscription : Décembre 2018
    Messages : 14
    Par défaut merci pour ta réponse
    Bonjour,

    Effectivement, ça marche beaucoup mieux avec un <nav>.

    Encore merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2010] userform liste déroulante sur une cellule avec boucle conditionnelle en ligne (row)
    Par fredouillebb dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 03/10/2017, 08h13
  2. Liste à Puce sur 3 colones avec complétion
    Par nicolas8831 dans le forum Mise en forme
    Réponses: 3
    Dernier message: 12/02/2015, 19h59
  3. Selectionner une valeur dans une liste déroulante sur le net avec vba
    Par zneidi77 dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 20/06/2012, 15h48
  4. Réponses: 1
    Dernier message: 03/07/2007, 16h05
  5. Informations sur un fichier avec son URL
    Par Kiroukool dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 16/10/2006, 22h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo