Probleme de posiitonnement en css
Résolu
gryzzly
Messages postés
5220
Statut
Contributeur
-
gryzzly Messages postés 5220 Statut Contributeur -
gryzzly Messages postés 5220 Statut Contributeur -
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 :
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 → *
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
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Enlever soulignement lien css ✓ - Forum CSS
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
3 réponses
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
--
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;
}
--
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.
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.
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.
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.
