Probleme de posiitonnement en css

Résolu/Fermé

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 - 25 nov. 2007 à 19:37
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 - 25 nov. 2007 à 21:00

Bonsoir,

Sur l'exemple ci dessous, ce serait merveilleur que quelqu'un me trouve une solution css pour positionner correctement les titres qui apparaissent sur le menu. Actuellement le titre est collé en haut de l'image, et j'aimerais le descendre de 5 ou 6 pixels.
J'ai essayer d'encapsuler le tout dans un div, dans un span, etC... sans parvenir au résultat.

Le comportement doit rester identique : c'est le bouton qui doit servir de lien.

du code vaut toujours mieux qu'un long discours :


<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
  <title>Portes coulissantes</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">

* 
	{
	margin:0;padding:0; color:#FFFFFF; border: 1px solid green;
	}

html 
	{
	background:#000000 url(headerstripe.jpg) repeat-x;
	}

body
	{
	
	}

#page
	{
	width:1000px;
	margin:30px auto 30px auto;
	}

/* DEBUT DE LA BANNIERE */

#ban 
	{
	background:url(http://mondesauvage.free.fr/share/ccm/menu/head.gif) no-repeat;
	height:180px;
	position:relative !important;

	}

	/* menu positionné sur la banniere */
		
		#ban_menu
			{
			position:absolute;
			bottom:0px;
			left:0px;
			font-size:14px;
			}
			
		/* positionné au niveau du logo */
			
			#ul_accueil
				{
				float:left;
				width: 150px;
				height:66px;
				text-align:center;
				list-style:none;
				}
			
				#ul_accueil li
					{
					width:120px;
					height:66px;
					margin:0 auto 0 auto;
					}
			
		/* positionné au niveau du bloc titre */
			
			#ul_topmenu
				{
				float:right;
				margin-right:10px;
				width:800px;
				height:66px;
				text-align:center;
				list-style:none;
				}
			
				#ul_topmenu li
					{
					float:right;
					width:120px;
					height:66px;
					}
				
			/* permet d'afficher les images de survol */
				#ban_menu li a, #ban_menu li.selected a, #ban_menu li a:hover, #ban_menu li.selected a:hover 
					{
					display:block;
					height:66px; 
					width:120px;
					text-decoration:none;
					text-decoration:none;
					text-transform: uppercase;
					}
			
			/* configuration de la mise en forme du texte */
				#ban_menu li a
					{color: red;}
				#ban_menu li.selected a
					{color: white;}				
				#ban_menu li a:hover, #ban_menu li.selected a:hover
					{color: orange;}
					
			/* ne pas regrouper ces propriétés dans le commun, permet de choisir des images personnalisées pour chaque élément de la liste */
				#ban_menu li a
					{background:url(http://mondesauvage.free.fr/share/ccm/menu/menubtn_r1_c1.gif) no-repeat top;}
				#ban_menu li.selected a
					{background:url(http://mondesauvage.free.fr/share/ccm/menu/menubtn_r1_c1.gif) no-repeat bottom;}
				#ban_menu li a:hover, #ban_menu li.selected a:hover 
					{background:url(http://mondesauvage.free.fr/share/ccm/menu/menubtn_r1_c1.gif) no-repeat 50%;}

/* permet de supprimer l'apparition des images si la souris est dans le bas de l'image */
	#ban_cache_menu 
		{width:1000px;
		height:30px;
		position:absolute;
		bottom:0px;
		left:0px;
		}

/* FIN DE LA BANNIERE */

</style>
</head>

<body id="news">body
<div id="page">page
	<div id="ban">ban
		<div id="ban_menu">
			<ul id="ul_accueil">
			  <li id="topmenu_accueil"><a href="#">Accueil</a></li>
			</ul>
			<ul id="ul_topmenu">
			  <li id="topmenu_faune" class="selected"><a href="#">Faune</a></li>
			  <li id="topmenu_flore"><a href="#">Flore</a></li>
			  <li id="topmenu_montagne"><a href="#">Montagne</a></li>
			  <li id="topmenu_web"><a href="#">Web</a></li>
			  <li id="topmenu_blog"><a href="#">Blog</a></li>
			  <li id="topmenu_contact"><a href="#">Contact</a></a></li>
			</ul>
		</div>
		<div id="ban_cache_menu">
		</div>
	</div>
</div>
</body>
</html>

Merci d'avance a celui qui trouvera comment organiser la css. Si nécessaire, hésitez pas à revoir l'architecture de la liste ul/li/a ... le tout c'est que ca fonctionne.

PS : pour désactiver rapidement les bordures vertes, il suffit de supprimer le border: 1px solid green de la première propriété css → *

A voir également:

Probleme de posiitonnement en css
Enlever couleur lien css ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Mettre une image à gauche css ✓ - Forum CSS
Css download - Télécharger - HTML
Mon css ne s'applique pas ✓ - Forum CSS

3 réponses

Réponse 1 / 3

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
25 nov. 2007 à 20:22

Salut toi (-:

Pour ce genre de problème je m'y prends toujours de la même manière.
Pour centrer, une height et un line-height identiques.

Essaye

        #ban_menu li a, #ban_menu li.selected a, etc. 
          {
          display:block;
          height:66px; 
          line-height:36px; 
          width:120px;
          text-decoration:none;
/*          text-decoration:none;               pas besoin (-;     */
          text-transform: uppercase;
          }

Réponse 2 / 3

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
25 nov. 2007 à 20:32

T'es un champion mon gihef...

J'vais la noter en lieu sur cette propriété...

et t'aurais pas en poche un moyen de bloquer la taille d'une police, y compris si on utilise ctrl+molette souris ? et ca règle tous mes problemes de mise en page.

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
25 nov. 2007 à 20:41

(-;

C'est pas gentil ça…
À part avec des images, je ne sais pas faire.

Si tu veux ajouter un peu de bizarrerie, ajoute un overflow ?

--

Réponse 3 / 3

gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 331
25 nov. 2007 à 21:00

Lol, je sais, c'est pas gentil, mais c'est juste pour les 7 titres de catégorie de cette bannière. Juste histoire de conserver quelque chose de propre dans toutes les situations... le reste du design sera évolutif, mais là, je peux pas gérer des tailles dynamiques pour ce topmenu.

et non, je n'utiliserais pas d'image pour ce rendu, je perdrais en qualité et référencement ;o)
et non, je mettrais pas d'overflow (quoi que ca puisse etre très utile dans certaines situations...

tant pis, ptet qq'un d'autr passera et trouvera... ou alors je trouverais au hasard des requetes...

merci à toi.

Discussions similaires

trait horizontal avec du css

[CSS] Forcé retour à la ligne

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Enlever le soulignement sous les liens en HTML/CSS

Discussions similaires

Newsletters