28173 sujets

CSS et mise en forme, CSS3

[Presque résolu]Alignement vertical liste + formulaire

Bonjour,

Voilà, je cherche à aligner verticalement une liste et un formulaire (dans la div "accessibilite"), de manière à ce que le texte soit au même niveau.

Voici mon code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Titre de ma page</title>
    <!-- Métadonnées -->
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="fr" />
    <!-- Feuille de style -->
    <link rel="stylesheet" type="text/css" href="./style.css.php" media="all" title="Défaut" />
    <!-- Javascript -->
    <script type="text/javascript" src="./menu.js"></script>
</head>
<body onload="cacheAllMenus();">
<div id="conteneur">
    <!-- Accessibilité -->
    <div id="accessibilite">
        <ul>
            <li><a href="#" accesskey="0" title="Politique d'accessibilité">accessibilité</a> &middot;</li>
            <li><a href="#menu" accesskey="1" title="Aller au menu">menu</a> &middot;</li>
            <li><a href="#corps-de-page" accesskey="2" title="Aller au contenu">contenu</a> &middot;</li>
            <li><a href="#" accesskey="3" title="Plan du site">plan du site</a> &middot;</li>
            <li><a href="#" accesskey="4" title="Pour me contacter">contact</a></li>
        </ul>
        <form action="/accessibilite/index.php" method="get" id="switcher">
            <label for="set">Choisir un habillage&nbsp;:</label>
            <select name="set">
                <option value="style1" selected="selected">Style 1</option>
                <option value="style2">Style 2</option>
            </select>
            <input type="submit" value="Ok" />
        </form>
    </div>
    <hr class="cache" />
    <!-- En-tete -->
    <div id="en-tete">
        &nbsp;
    </div>
    <hr class="cache" />
    <!-- Menu du site -->
    <div id="menu">
        <dl>
            <dt><a href="#" title="Retour à l'accueil">Accueil</a></dt>
        </dl>
        <dl>        
            <dt onmouseover="afficheMenu('ssmenu1');" onmouseout="cacheMenu('ssmenu1');">Menu 1</dt>
            <dd id="ssmenu1" onmouseover="afficheMenu('ssmenu1');" onmouseout="cacheMenu('ssmenu1');">
                <ul>
                    <li><a href="#">Sous-Menu 1.1</a></li>
                    <li><a href="#">Sous-Menu 1.2</a></li>
                    <li><a href="#">Sous-Menu 1.3</a></li>
                    <li><a href="#">Sous-Menu 1.4</a></li>
                    <li><a href="#">Sous-Menu 1.5</a></li>
                    <li><a href="#">Sous-Menu 1.6</a></li>
                </ul>
            </dd>
        </dl>
        <dl>    
            <dt onmouseover="afficheMenu('ssmenu2');" onmouseout="cacheMenu('ssmenu4');">Menu 2</dt>
            <dd id="ssmenu2" onmouseover="afficheMenu('ssmenu2');" onmouseout="cacheMenu('ssmenu2');">
                <ul>
                    <li><a href="#">Sous-Menu 2.1</a></li>
                    <li><a href="#">Sous-Menu 2.2</a></li>
                    <li><a href="#">Sous-Menu 2.3</a></li>
                    <li><a href="#">Sous-Menu 2.4</a></li>
                    </ul>
            </dd>
        </dl>
        <dl>    
            <dt onmouseover="afficheMenu('ssmenu3');" onmouseout="cacheMenu('ssmenu3');">Menu 3</dt>
            <dd id="ssmenu3" onmouseover="afficheMenu('ssmenu3');" onmouseout="cacheMenu('ssmenu3');">
                <ul>
                    <li><a href="#">Sous-Menu 3.1</a></li>
                    <li><a href="#">Sous-Menu 3.2</a></li>
                    <li><a href="#">Sous-Menu 3.3</a></li>
                    <li><a href="#">Sous-Menu 3.4</a></li>
                    <li><a href="#">Sous-Menu 3.5</a></li>
                </ul>
            </dd>
        </dl>
    </div>
    <hr class="cache" />
    <!-- Contenu de la page -->
    <div id="corps-de-page">
        <p>Toto is back!</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
        <p>Back...</p>
    </div>
    <hr class="cache" />
    <!-- Pied de la page -->
    <div id="pied-de-page">
        &nbsp;
    </div>
</div>
</body>
</html>

Et ma feuille de style :
html {
    /* Dimensions & marges */
    margin:		0;
    padding:		0;
}

body {
    /* Dimensions & marges */
    margin:		0;
    padding:		0;
    /* Police & alignement */
    font:		normal 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align:		center; /* hack IE : centrage horizontal */
}

a { text-decoration: none; }

a:hover { text-decoration: underline; }

.cache { display: none;	}


#conteneur {
    /* Positionnement */
    position:		relative;
    /* Dimensions & marges */
    width:		800px;
    margin:		5px auto; /* vertical horizontal */
    padding:		0;
    /* Police & alignement */
    text-align:		left; /* hack IE : centrage horizontal */
    /* !!! Temporaire !!! */
    border:		black 0.1em solid;
}


#accessibilite {
    /* Positionnement */
    position:		absolute;
    /* Dimensions & marges */
    width:		100%;
}

#accessibilite ul {
    /* Positionnement */
    float:		left;
    /* Dimensions & marges */
    margin:		0;
    padding:		0;
}

#accessibilite li {
    /* Dimensions & marges */
    margin:		0; /* haut droite bas gauche */
    padding:		0;
    /* Divers */
    display:		inline;
}

#accessibilite form {
    /* Positionnement */
    /* float:		right; */
    /* Dimensions & marges */
    margin:		0;
    padding:		0;
}


#en-tete {
    /* Dimensions & marges */
    height:		150px;
    margin:		0;
    padding:		0;
    /* Bordures & fond */
    /* background:		url(banniere.jpg) no-repeat; */
    background:		#CBC3DF;
}


#menu {
    /* Positionnement */
    position:		absolute;
    z-index:		100;
    /* Dimensions & marges */
    height:		30px;
}

#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
    /* Dimensions & marges */
    margin:		0;
    padding:		0;
    /* Divers */
    list-style-type:	none;
}

#menu dl {
    /* Positionnement */
    float:		left;
    /* Dimensions & marges */
    width:		12em;
}

#menu dt {
    /* Bordures & fond */
    background:		#ccc;
    border:		1px solid gray;
    /* Police & alignement */
    font-weight:	bold;
    text-align:		center;
    /* Divers */
    cursor:		pointer;
}

#menu dd {
    /* Dimensions & marges */
    border:		1px solid gray;
}

#menu li {
    /* Police & alignement */ 
    text-align:		center;
    background:		#fff;
}

#menu li a, #menu dt a {
    /* Dimensions & marges */
    height:		100%;
    /* Police & alignement */
    color:		#000;
    text-decoration:	none;
    /* Divers */
    display:		block;
}

#menu li a:hover, #menu dt a:hover {
    /* Dimensions & marges */
    background:		#eee;
}


#corps-de-page {
    /* Dimensions & marges */
    margin:		30px 0 0 0; /* haut droite bas gauche */
    padding:		0;
    /* Bordures & fond */
    border:		red 0.1em solid;
}


#pied-de-page {
    /* Dimensions & marges */
    height:		30px; /* ~30px */
    margin:		0;
    padding:		0;
    /* Bordures & fond */
    background-color:	#999999;
}

Accessoirement, si vous avez des remarques ou des conseils à me donner, je suis preneur Smiley smile

Merci d'avance.

PS : il s'agit pour l'instant d'un "prototype", la forme est donc un peu sommaire...

PPS : je n'ai pas mis le javascript, mais il est fortement inspiré de celui qui est donné avec le tutorial de menu déroulants.
Modifié par Polack (13 Feb 2006 - 13:45)
Polack a écrit :
Aurais-je mal formulée mon problème... ou bien, est-ce quelque chose que j'ai écrit? Smiley langue


Essayes de donner une largeur à ta liste ul, et un margin-left au moins équivalent à ton formulaire.
Igor a écrit :
Essayes de donner une largeur à ta liste ul, et un margin-left au moins équivalent à ton formulaire.


Merci pour ton aide Igor, mais je ne suis pas sûr de bien m'être fait comprendre. Ce que je cherche, c'est à aligner/centrer verticalement mon contenu. Pour l'instant, je fais ça :
1° J'affiche une liste de liens horizontalement à l'aide d'un display: inline au niveau du style de ma balise li.
2° J'ajoute un petit formulaire en m'arrangeant pour qu'il s'affiche à la suite/sur la même ligne en donnant la propriété float: left à ma balise ul.

Mon problème est le suivant :
Le texte de ma liste ne s'affiche pas au même niveau que le texte du label de mon formulaire.

Solution :
J'ai ajouté la propriété vertical-align: top au style de ma balise label.

Nouveau problème :
La solution marche bien (les 2 textes apparaissent au même niveau), par contre le texte n'est pas centré verticalement par rapport à ma liste déroulante (balise select) et à mon bouton.

Ma question :
Y-a-t-il un moyen simple et élégant (je suis peut-être un peu trop exigeant Smiley cligne ) d'arriver au résultat que je souhaite, c.a.d. :
- avoir le texte de ma liste et mon label au même niveau
- avoir le tout (le texte) centré verticalement par rapport au reste de mon formulaire
Modifié par Polack (09 Feb 2006 - 14:46)
J'ai mis le titre du sujet en "Presque résolu" car, comme je l'ai mis dans la réponse précédente, j'ai trouvé comment mettre au même niveau (verticalement) la liste et le label du formulaire.

Par contre, je n'arrive pas à centre le tout verticalement par rapport aux autre éléments du formulaire (liste déroulante et bouton). Une idée?
j'ai le même souci, avec les input text c bon mais pas avec le reste (checkbox etc etc)
Sujet clos
Aller à