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 :

Alignement texte et menu dans barre latérale


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    55
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 55
    Par défaut Alignement texte et menu dans barre latérale
    Bonjour à toutes et à tous !

    j'ai un problème d'alignement en css et comme d'hab je suis sûr que c'est d'une simplicité monstre mais je vois pas mon erreur !

    voila en image ce que j'ai actuellement (image : actuel.jpg en pièce jointe)
    et voila ce que je veux (image exemple.jpg en pièce jointe)

    voila mon code css actuel :

    Code : 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
    #navigation{
    	background:#313131 url(./img/background.png); /* le fond*/
    /* début ombre portée en css3*/
    	-webkit-box-shadow: 30px 0px 15px 15px #ffffff;
    	-moz-box-shadow: 30px 0px 15px 15px #ffffff;
    	box-shadow: 30px 0px 15px 15px #ffffff; 
    /* fin ombre portée en css3*/
    /* début dimension et positionnement de la barre latérale */
    	width : 150px;
    	height : 650px;
    	position : fixed;
    	left : 0;
    /* fin dimension et positionnement de la barre latérale */
    /* début alignement du contenu*/
    	display:inline-block;
    	vertical-align:middle;
    	clear:both;
    /* fin alignement contenu */
    }
    #navigation h1,h2{
    /* début propriété du texte */
    	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
    	text-align: center;
    /* fin propriété du texte */
    /* début rotation du texte en css3 */
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        writing-mode: lr-tb;
    /* fin rotation du texte en css3 */
    }
     
    #navigationMenu li{
     /* correspond au icone avec une classe supplémentaire par icone plus bas dans le css*/
    	list-style:none;
    	height:39px;
    	padding:2px;
    	width:40px;
    	margin: 0 0 0 109px;
     
    }
    j'ai toujours galéré avec ces alignements, merci d'avance pour le coup de main !

    Did

    edit : en y repensant, ne devrais-je pas décomposé ma barre latérale en 2 div, le premier pour le texte et le second pour mes icônes ?
    Images attachées Images attachées   

  2. #2
    Membre éprouvé
    Avatar de Emyleen
    Femme Profil pro
    Webmaster
    Inscrit en
    Mars 2010
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 40
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2010
    Messages : 151
    Par défaut
    Bonsoir Didou038,

    En effet je penses qu'il vaudrait mieux que tu mettes tes icônes dans un bloc. Le schéma ressemblerait à ceci (voir pièce jointe).

    Tu n'auras plus qu'a rajouter des margin, des paddings, des tailles et ça devrait être bon
    Images attachées Images attachées  

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    55
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 55
    Par défaut
    ok merci, je vais voir pour faire cela,

    je repasse si j'ai un soucis (ce qui est certain )

    edit : apparemment j'y suis arrivé !

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Citation Envoyé par didou038 Voir le message
    edit : apparemment j'y suis arrivé !
    C'est alors ?

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    55
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 55
    Par défaut
    avant de le mettre en résolu, est-il possible de vous montrer mon css afin de voir si ce que j'ai fait est "propre" ?

    je pense que j'ai d'autres soucis qui me font sortir le texte de mes divs, surement lié au position, je fourni le css d'ici ce soir.

Discussions similaires

  1. [XL-MAC 2004] Ajout menu dans Barre d'excel
    Par patyom dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 03/02/2010, 15h34
  2. Affichage de menu dans barre d'outils
    Par Isa22 dans le forum GTK+ avec C & C++
    Réponses: 2
    Dernier message: 01/03/2007, 14h41
  3. alignement text dans un menu avec ie
    Par HADES62 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 10/05/2006, 19h49
  4. Un menu dans une barre d'outils Swing : possible ?
    Par nicolas54 dans le forum AWT/Swing
    Réponses: 6
    Dernier message: 28/03/2006, 07h54
  5. Menu dans la barre des menus OS X
    Par SHiSo dans le forum AWT/Swing
    Réponses: 4
    Dernier message: 02/06/2005, 20h16

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