rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Probleme de posiitonnement en css

Posté par gryzzly, le dimanche 25 novembre 2007 à 19:37:57
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/h­ead.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/m­enu/menubtn_r1_c1.gif) no-repeat top;}
				#ban_menu li.selected a
					{background:url(http://mondesauvage.free.fr/share/ccm/m­enu/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/m­enu/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 → *
Le méchant nounours ©Moi
Répondre à gryzzly  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le dimanche 25 novembre 2007 à 20:22:43
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épondre à Gihef

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
gryzzly, le dimanche 25 novembre 2007 à 20:32:44
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.
Le méchant nounours ©Moi
   
Répondre à gryzzly

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le dimanche 25 novembre 2007 à 20:41:08
(-;

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épondre à Gihef

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 gryzzly, le dimanche 25 novembre 2007 à 21:00: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.
Le méchant nounours ©Moi
   
Répondre à gryzzly
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Amaya 9.54Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...Catégorie: Editeurs HTML
Licence: Open Source
Télécharger Firstpage 2006Firstpage - First Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de...Catégorie: Editeurs HTML
Licence: Freeware/gratuit
Télécharger Matizha Sublime 3.2Matizha Sublime - Matizha Sublime 3 est un outil de choix pour tout webmaster sérieux à propos de la création de pages web. D’abord un...Catégorie: Editeurs HTML
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « probleme de posiitonnement en css »