28173 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner un bloc en bas d'une image

Bonjour,

J'ai un logo pour un bandeau et je voudrais mettre le menu en bas à droite de ce logo.
Quand j'essaye de la faire avec un 
float: left;
sur l'image, mon menu en liste se met bien sur le côté mais en haut, juste sous la recherche.
Alors, j'ai ajouté un 
margin: 49px;
mais le problème est d'une part qu'un décalage apparaît sur IE, au pire je mets un commentaire pour IE.
Mais le vrai problème est que j'utilise des tailles relatives pour les polices, donc, si on augmente la taille du texte, le décalage existera de toute façon.
Comment faire pour que le bas du logo et le bas du menu restent sur la même ligne lorsqu'on augmente la taille du texte ?
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr-FR" />
<meta name="robots" content="index,follow, all" />
<!--[if lte IE 6]>
   <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
#test {
float: left;
}
form {
	margin: 0;
	padding: 0;
	text-align: right;
}
#total {
	width: 885px;
	background: #fff;
	font: 0.9em arial, verdana, sans-serif;
}
img {
border: 0;
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0;
	padding: 0;
	float: left;
}
h2 {
	margin: 0;
	padding: 0;
}

/* Header */ 
/* Topmenu */ 
#topmenu {
background: #F4FFFF;
padding-bottom: 0.5em;
}

#topmenu ul{
	font-size: 0.8em;
	text-align: right;
	margin: 0;
	padding: 0;
}

#topmenu li{
	margin-top: 0;
	display: inline;
	list-style-type: none;
	border-left: solid 1px #000;
	padding: 0 0.5em 0 0.6em;
}
#topmenu li.premier{
border: 0;
}

/* Recherche */ 

#rechercher p {
	text-align: right;
	background: #fff;
	padding: 0 0 0.2em 0;
	margin: 0;
	}

/* Menu */ 
#menu {
font-weight: bold;
font-size: 0.9em;
float: left;
overflow: hidden;
text-align: left;
width: 683px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;    
background: #ddd;
margin-bottom: 0.1em;
margin-top: 49px;
}
#menu ul {
 background: #ddd;
 margin: 0;
 padding: 0;
font-weight: bold;
}

#menu ul li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu ul li a {
	display: block;
	padding: 0.3em 0.6em 0.3em 0.6em;
	color: #000;
	border-right: 1px solid #000;
	text-decoration: none;
	background: #ddd;
	margin: 0;
}

#menu ul li a:hover {
	display: block;
  background: #ccc;
  color: #000; 
}

#menu ul li.actif {
	display: block;
	padding: 0.3em 0.6em 0.3em 0.6em;
	color: #000;
	border-right: 1px solid #000;
	text-decoration: none;
	background: #fff;
	margin: 0;
}


-->


</style>
</head>

<body>
<!-- Total -->
<div id="total">
<!-- Header -->
		
		<div id="topmenu">
			
    <ul>
      <li class="premier"><a href="#">S'inscrire</a></li>
      <li><a href="#">Mon compte</a></li>
      <li><a href="#">Se d&eacute;connecter</a></li>
      <li><a href="#">Plan du site</a></li>
    </ul>
		</div>
	    		
  <h1><img src="test.jpg" alt="test" width="200" height="100" /></h1>
				<div id="test"><div id="rechercher">
		<form method="get" action="achat/recherche.php" id="recherche"><p>
               <label for="motclef">Rechercher dans le catalogue : </label><input type="text" name="motclef" id="motclef" size="15" value="" />
					  <input type="submit" value="Rechercher" name="action" /></p>
			</form>		
		</div>
    		<div id="menu">
			<ul>
			<li class="actif">Accueil</li>
			<li><a href="#">A propos</a></li>
			<li><a href="#">Acc&egrave;s Professionnels</a></li>
			<li><a href="#">Contactez-nous</a></li>
			</ul>
		</div>
</div>
<!-- Fin Total -->
</div>

</body>
</html>



Merci
Modifié par jpsartre (11 Jun 2007 - 20:50)
À priori, on passera soit par un tableau (pour utiliser vertical-align: bottom, soit par display: table pour obtenir le même effet, soit par le positionnement absolu.

On peut avoir un aperçu de ce que tu veux faire ?
jpsartre a écrit :
upload/7447-impression.jpg
Pour le display : table, je dois l'appliquer au #menu ?

display: table|table-cell sera à priori peu utilisable, car non implémenté dans IE.

Le plus simple, ici, serait d'utiliser le positionnement absolu.

Tu mets l'image + le formulaire de recherche + le menu dans un div positionné en relatif, et tu positionnes ton menu en absolu par rapport à ce conteneur positionné.
Florent V. a écrit :

display: table|table-cell sera à priori peu utilisable, car non implémenté dans IE.



Please. Ne pas décourager l'utilisation de display table-cell. Les méthodes de rechuteà base de flottants dans IE existent, il vaut encourager à développer.

sinon, inviter à utiliser table qui est préférable actuellement dans la plupart des cas, quant aux coûts finaux.
Modifié par Laurent Denis (11 Jun 2007 - 12:24)
Laurent Denis a écrit :
Please. Ne pas décourager l'utilisation de display table-cell. Les méthodes de rechuteà base de flottants dans IE existent, il vaut encourager à développer.

Les flottants pour de l'alignement vertical dans IE ? J'ai dû louper l'info. Smiley confus

Laurent Denis a écrit :
sinon, inviter à utiliser table qui est préférable actuellement dans la plupart des cas, quant aux coûts finaux.

C'est vrai que dans le cas actuel un tableau à trois cellules serait pas mal. Mais il me semble qu'on s'en sort avec peu de dommages collatéraux avec le positionnement absolu dans ce cas précis (notamment : étant donné l'espace blanc entre le menu et le formulaire de recherche, espace qui devrait permettre l'agrandissement du texte sans chevauchement).
Alors je peux faire un tableau dans ce cas de figure.
Je lui mets un summary="" et voilà ?

Sinon, pourrais-je avoir plus d'informations sur :

a écrit :
Laurent Denis :

Les méthodes de rechute à base de flottants dans IE existent


Merci
jpsartre a écrit :
Je lui mets un summary="" et voilà ?

Il me semble que ça ne change rien (rapport aux implémentations dans les lecteurs d'écran), mais ça ne fait pas de mal et c'est conseillé/demandé par certains labels d'accessibilité.

Voir ici :
RGAA - 5.4 Ne pas utiliser les éléments ou attributs propres aux tableaux de données pour les tableaux de mise en page
a écrit :
Ne pas utiliser les éléments th, caption, thead, tbody, tfoot et les attibuts scope, headers, axis pour un tableau de mise en page.

L'attribut summary peut être utilisé si sa valeur est vide.

Modifié par Florent V. (11 Jun 2007 - 18:28)
Merci pour ces informations.

Mais si quelqu'un peut m'expliquer :
a écrit :
Les méthodes de rechute à base de flottants dans IE existent


Merci encore et à bientôt
jpsartre a écrit :
Mais si quelqu'un peut m'expliquer :
Les méthodes de rechute à base de flottants dans IE existent

Là comme ça je dirais qu'il s'agit d'une erreur. Pour ma part, je ne connais pas de méthode utilisant les flottants et permettant d'obtenir un alignement vertical (centré ou vers le bas).

Je pense que Laurent avait surtout en tête le fait de pouvoir utiliser les flottants pour IE (via des commentaires conditionnels) pour compenser la non implémentation de display:table-cell... mais ça ne concerne que les cas de « mise en colonnes » de contenus.
Sujet clos
Aller à