alignement vertical: "baseline"
Mihamina Rakotomandimby (R12y)
Je me mords les doigts depuis un moment.
(On passera sur le debat des gouts et des couleurs ;-))
Voici le design original: http://www.blueline.mg
HTML5, CSS "moderne", statique, dont on ne touche plus rien.
Voici celui que je suis en train de faire: http://mailadmin.blueline.mg
xHTML généré programmatiquement (OCaml, avec Ocsigen)
Je voudrais que ce que je suis en train de faire ressemble le plus à
l'original.
Là ou je coince c'est sur le menu horizontal: je n'arrive pas à faire en
sorte que les éléments du menu se calent en bas, et que lors du "hover"
le bord bas du fond blanc coincide avec le bord bas du fond rose.
Auriez vous des pistes?
PS: les pages sont longues à charger (latence 400ms), vous êtes si loins
de nous... :-)
--
Architecte Informatique chez Blueline/Gulfsat:
Administration Systeme, Recherche & Developpement
+261 33 11 207 36
Olivier Miakinen
Le 22/07/2010 20:48, Mihamina Rakotomandimby (R12y) a écrit :
>
> Voici le design original: http://www.blueline.mg
> HTML5, CSS "moderne", statique, dont on ne touche plus rien.
>
> Voici celui que je suis en train de faire: http://mailadmin.blueline.mg
> xHTML généré programmatiquement (OCaml, avec Ocsigen)
>
> Je voudrais que ce que je suis en train de faire ressemble le plus à
> l'original.
Ok.
> Là ou je coince c'est sur le menu horizontal:
Je suis étonné, car justement dans le design original ce menu est
vertical... tu ne cherches donc pas la ressemblance ici ?
> je n'arrive pas à faire en
> sorte que les éléments du menu se calent en bas, et que lors du "hover"
> le bord bas du fond blanc coincide avec le bord bas du fond rose.
>
> Auriez vous des pistes?
Tu peux essayer ceci :
display: block;
Cordialement,
--
Olivier Miakinen
Mihamina Rakotomandimby (R12y)
>> Voici le design original: http://www.blueline.mg HTML5, CSS "moderne",
>> statique, dont on ne touche plus rien.
>>
>> Voici celui que je suis en train de faire: http://mailadmin.blueline.mg
>> xHTML généré programmatiquement (OCaml, avec Ocsigen)
>> Je voudrais que ce que je suis en train de faire ressemble le plus à
>> l'original.
> Ok.
>> Là ou je coince c'est sur le menu horizontal:
> Je suis étonné, car justement dans le design original ce menu est
> vertical...
Ben là: http://www.blueline.mg, il est horizontal, d'apres moi.
Mais si ça ça s'appelle vertical, alors OK, il est vertical.
Ou peut-etre aurais-je du dire la "barre horizontale?"
> tu ne cherches donc pas la ressemblance ici ?
Si.
Olivier Miakinen
>>
>>> Là ou je coince c'est sur le menu horizontal:
>> Je suis étonné, car justement dans le design original ce menu est
>> vertical...
>
> Ben là: http://www.blueline.mg, il est horizontal, d'apres moi.
> Mais si ça ça s'appelle vertical, alors OK, il est vertical.
Sur <http://www.blueline.mg/> je vois ça :
<http://cjoint.com/data/hxl6Jtob1k.htm>.
C'est horizontal ou c'est vertical ?
> Ou peut-etre aurais-je du dire la "barre horizontale?"
Sur <http://mailadmin.blueline.mg/> je vois ça :
<http://cjoint.com/data/hxmbBzibcx.htm>.
C'est bien ça que j'appelle une barre horizontale, et un menu horizontal.
>> tu ne cherches donc pas la ressemblance ici ?
>
> Si.
Bon, et le « display: block; » ça marche ?
--
Olivier Miakinen
Mihamina Rakotomandimby (R12y)
> Bon, et le « display: block; » ça marche ?
Mettre mes <a> en "display:inline-block" semble avoir mieux "marché".
Mais pas encore exactement.
Et merci -:)
docanski
Mihamina Rakotomandimby (R12y) ecrit ce qui suit en ce 22/07/2010 20:48 :
> Bonjour,
Salut,
> (On passera sur le debat des gouts et des couleurs ;-))
Ça craint, en effet !
> Là ou je coince c'est sur le menu horizontal: je n'arrive pas à faire en
> sorte que les éléments du menu se calent en bas, et que lors du "hover"
> le bord bas du fond blanc coincide avec le bord bas du fond rose.
>
> Auriez vous des pistes?
#piedgauche="position:absolute;width:400px;height:40px;bottom:0;left:0"
#pieddroit="position:absolute;width:400px;height:40px;bottom:0;right:0"
ne marche pas ? J'ai pas essayé, à toi de faire.
Heu ... j'ai arbitrairement mis la largeur à 400 px (% c'est mieux,
évidemment) pour t'inciter à ne pas dépasser des fenêtres de 800 px,
vieux débat souvent tourné en troll. ;-)
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
SAM
OK,
alorsse ... voici :
(le menu vertical s'obtient en supprimant 'display: inline-block' de la css)
html :
======
<ul id="menu">
<li class="vu"><a href="1.htm">menu 1</a></li>
<li><a href="2.htm">menu 2</a></li>
<li><a href="3.htm">menu 3</a></li>
<li><a href="4.htm">menu 4</a></li>
</ul>
css :
=====
#menu { background: violet; list-style: none; padding: 0; }
#menu li { padding: 0; margin: 0; display: inline-block }
#menu a { display: block; padding: 2px 10px; margin: 5px 5px 0;
text-decoration: none; color: white;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
#menu a:hover,
#menu li.vu a { background: white; color: black }
c'est du bête css2 (excepté les trucs "radius")
et pour le html ... y a pas plus simple ...
que même le Xhtml devrait y arriver ;-)
--
sm
SAM
> On Fri, 23 Jul 2010 12:03:49 +0200, Olivier Miakinen wrote:
>> Bon, et le « display: block; » ça marche ?
>
> Mettre mes <a> en "display:inline-block" semble avoir mieux "marché".
> Mais pas encore exactement.
chez moi (firefox) ça marche pareil qu'avec le système par UL+LI
css :
=====
#liens { background: violet; }
#liens a { display: inline-block; padding: 2px 10px; margin: 5px 5px 0;
text-decoration: none; color: white;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
#liens a:hover,
#liens a.vu { background: white; color: black }
html :
======
<div id="liens">
<a class="vu" href="1.htm">menu 1</a>
<a href="2.htm">menu 2</a>
<a href="3.htm">menu 3</a>
<a href="4.htm">menu 4</a>
</div>
--
sm