Centrer un menu déroulant farouche

Fermé
LaGirafe - Modifié par LaGirafe le 20/02/2015 à 15:47
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 22 févr. 2015 à 13:34
Bonjour bonjour,
Alors je préviens tout de suite, il est possible que certains veuillent me jeter des salades et des tomates à la vue de ce qui va suivre, j'ai conscience qu'il s'agit de bidouillage plutôt que de vrai codage, mais je n'ai pas la possibilité de me concentrer plus là dessus malheureusement, du coup je me sers de Tumblr...
Mon problème est très simple : j'ai un menu déroulant sous mon en-tête qui refuse catégoriquement (le fourbe) de se centrer suite à la suppression d'une de ses colonnes, voyez plutôt : http://kamelo-pardalis.tumblr.com/
J'ai fouillé partout à la recherche dudit problème en vain, impossible de savoir d'où cela provient.
Je vous copie le petit extrait qui correspond au menu, bonne lecture!

<div id="kk">
<div id="ag">
<a href="#">basics</a></a>
<div id="vv">
<a href="/">home<a>
{block:AskEnabled}<a href="/ask">{text:Ask Title}</a>{/block:AskEnabled}
{block:SubmitEnabled}<a href="/submit">submit</a>{/block:SubmitEnabled}
<a href="/archive">archive</a>
<a href="{RSS}">rss feed</a>
</div></div>
<div id="ag"><a href="#">links</a></a>
<div id="vv">
{block:ifLinkOneTitle}
<a href="{text:Link One}" class="link">{text:Link One Title}</a>
{/block:ifLinkOneTitle}
{block:ifLinkTwoTitle}
<a href="{text:Link Two}" class="link">{text:Link Two Title}</a>
{/block:ifLinkTwoTitle}
{block:ifLinkThreeTitle}
<a href="{text:Link Three}" class="link">{text:Link Three Title}</a>
{/block:ifLinkThreeTitle}
{block:ifLinkFourTitle}
<a href="{text:Link Four}" class="link">{text:Link Four Title}</a>
{/block:ifLinkFourTitle}
{block:ifLinkFiveTitle}
<a href="{text:Link Five}" class="link">{text:Link Five Title}</a>
{/block:ifLinkFiveTitle}
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{block:Pages}{/block:HasPages}
</div></div>
</div>
</div>


Et comme je suis plutôt sympa, et que j'ai surtout aucune idée d'où ça vient, je vous met le css en entier :

<style type="text/css">
html{
height:103%;}

body, p {
font-family: 'Lekton';
font-style: normal;
font-size: 12px;
line-height:12px;
padding: 0px;
margin: 0px;
color:{color:text};}

body {
background-color:{color:background};
background-image:url({image:Background});
background-attachment: fixed;
background-repeat: repeat;}

kk{margin-left:auto
margin-right:auto;
}

a {
text-decoration:none;
color:{color:text};
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;}

a:link, a:active, a:visited{
color: {color:Link};
text-decoration: none;
-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}

a:hover{
color:{color:link hover};}

img {{block:ifRoundedPhotos}border-radius:5px;{/block:ifroundedphotos}}
img:hover{opacity:1.0;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}

#wrapper {
padding-left:46px;
position: relative;
width: 100%;}


.clear {
text-align:left;clear: both;}

#entry.masonry-brick {
top: 0 !important;
left: 0 !important;}

#infscr-loading {
position: absolute!important;
width: 16px!important;
height: 11px!important;
bottom: 0px!important;
left: 48.5%!important;
margin-top: 10px!important;
margin-bottom: 5px!important;}

.title{
text-align:center;
font-size:14px;
line-height:16px;}

blockquote{
padding:0px 0px 2px 1px;
margin:0px 0px 2px 1px;
border-left: 1px dotted #555555;}

#container{width:100%;height:auto;top:20px;text-align:center;padding-top:28px;
}


.blogtitle
{font-size:36px;
line-height:36px;
letter-spacing: 5px;
text-transform: uppercase;
text-align:center;}
.blogtitle a{color:{color:Blog Title};text-transfrom:uppercase;}
.description{
margin-top:7px;margin-bottom:7px;
font-size:14px;display:block;padding:0px 120px 0px 120px;}

.description a{display:inline;}

#content{margin:auto;position:relative;
{block:IndexPage}width:1320px;{/block:IndexPage}
{block:PermalinkPage}width:500px;{/block:PermalinkPage}}

{block:IndexPage}
@media (max-width: 1340px) {
#content{width:1100px;}}

@media (max-width: 1150px) {
#content{width:880px;}}

@media (max-width: 800px) {
#content{width:660px;}}

@media (max-width: 500px) {
#content{width:220px;}}
{/block:IndexPage}

.entry{
padding:7px 8px 8px 8px;
{block:IndexPage}
overflow:hidden;
{/block:IndexPage}
{block:PermalinkPage}
width:450px;
height:auto;
{/block:PermalinkPage}}

.photo{width:200px;height:auto;}
.photo img{width:200px; -webkit-transition: 0.3s ease-in;{block:ifRoundedPhotos}border-radius:5px;{/block:ifroundedPhotos}}
.photo img:hover{-webkit-transition: 0.3s ease-in;
opacity: 0.6;
filter: alpha(opacity=40);
}
.photobig{width:420px;}
.photobig img{width:420px;}
.text{width:200px;background-color:{color:center};{block:indexpage}border: 1px solid #ccc;{/block:indexpage}{block:permalinkpage}width:400px;{/block:permalinkpage}}
.photoset{width:200px;overflow:hidden;}{block:permalinkpage}width:400px;{/block:permalinkpage}}
.video{width:415px;overflow:hidden;border:1px solid #ccc;background-color:{color:center};}
.supreme{text-align:right;margin-top:8px;}


Si quelqu'un a une petite idée je veux bien lui offrir toute ma gratitude (et une part de tarte aux quetsches)
Merci d'avance et bonne journée!





A voir également:

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
21 févr. 2015 à 16:26
Salut

dans le css

#kk tu rajoutes
font-size:0;

#ag tu retires
margin-left: 3px;
float: left;

#ag tu modifies le width comme ca
width: 150px;

#vv tu modifies le width comme ca
width: 150px;

la raison le div kk fait 300px de largeur il y 2 div #ag dans ce div 300 / 2 = 150
float left ne sert a rien car c'est en display: inline-block
font-size:0; sert a éliminer le white space entre les div inline-block

à l'avenir sert toi de firefox avec les plugin firebug et webdeveloper
clic droit sur l'élément et inspecter l'élément avec firebug ou examiner l'élément

voila
0
Salut Animostab et merci beaucoup pour ta réponse!
Est-il normal que je ne parvienne même pas à trouver #ag et #vv dans le CSS?
Bonne journée à toi!

ps: J'ai suivi tes conseils pour firebug (merci beaucoup d'ailleurs), comme les éléments figurent bizarrement sur le CSS lorsque j'inspecte les éléments avec l'add-on mais que je n'en vois aucune trace sur le CSS dans mon éditeur Tumblr, j'ai rajouté les entrées #kk, #ag et #vv (je ne suis pas sure que ce soit une bonne idée mais bon) à partir des données que j'avais avec firebug, en y apportant tes modifications. Du coup voilà ce que ça donne : le menu est désormais placé verticalement, alors que je ne pense pas avoir omis quoi que ce soit..
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 22/02/2015 à 12:30
le css se trouve ici
static.tumblr.com/ek9ly4s/do1mow8kk/style.css
il y a bien les #ag #vv #kk (cherche bien car c'est minifié sur une seule ligne)
donc fait les transformations dans ce fichier et pas in page
comme in page tu as retiré
#ag { margin-left:3px;

dans le css style.css tu as toujours
#ag {margin-left: 3px; donc le margin-left de 3px est appliqué
donc ca pousse le 2eme #ag en dessous parce que (150 + 3) X 2 = 306px ce qui est supérieur à 300px (largeur du parent)
tout ce que tu supprimes inpage n'est en fait pas supprimé car c'est toujours dans le css style.css et c'est donc appliqué
en dernier recours inpage
#ag {
margin-left: 0px;
float: none;
}

voila
0
Ça roule, je pense avoir compris, mais du coup ça m'amène à un autre (et ultime?) souci : je ne pense pas avoir accès a ces fichiers et je ne crois pas être en capacité de les modifier.. si?

Edit : après quelques recherches je viens de trouver comment modifier la feuille de style. Je te remercie beaucoup d'avoir pris le temps de me répondre, ton aide m'a été précieuse et je t'offrirais bien une part de tarte aux quetsches !
Excellente journée à toi!
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
22 févr. 2015 à 13:34
Ok @+
0