OVH Cloud OVH Cloud

[CSS] Help !!! Inline pas en ligne ?

7 réponses
Avatar
Marie ALHOMME
Raaaah, ça m'énerve !!

J'ssaye de faire une "bête liste" horizontale, mais ça veux pas et je
sais pas pourquoi...
Et ça m'énerve !! :)

Voici donc l'adresse de la page qui ouvre la pop-up qui va bien :
http://www.pouipouidesign.net/lbtc.htm

et donc la pop-up -> click droit -> code source :)

Pour le css, voici le code incriminé :
------------------------
body {
margin: 0px;
padding: 10px;
text-align: left;
font: 0.7em black verdana;
}

#jobs ul {
margin-left: 10;
padding-left: 0;
white-space: nowrap;
}

#jobs li {
display: inline;
list-style-type: none;
}

#titre {
position: fixed;
font-size: 1.2em;
font-weight: 800;
font-variant: small-caps;
color: #FF9900;
font-stretch: expanded;
}

#titre span {
color: black;
font-size: 0.7em;
font-weight: lighter;
font-stretch: extra-expanded;
}

#titre span.soustitre {
font-size: 1em;
line-height: 2.5em;
font-style: italic;
}
------------------------

Je devine que ça a voir avec la taille de la fenetre mais... y' pas
moyen de contourner ? avec un overflow: scroll ? mais où ?
Ou alors c'est que la liste n'est pas la meilleure solution ?
Bref... j'patauge :)


Merci à tous de votre aide, ça me rends folle !

Marie

7 réponses

Avatar
"Marie ALHOMME @ Tiscali" a *crit :

"@SM" a écrit dans le message de
news:
> "Marie ALHOMME @ Tiscali" a ecrit :
> > Voici donc l'adresse de la page qui ouvre la pop-up qui va bien :
> > http://www.pouipouidesign.net/lbtc.htm
>
> Comprends pas j'arrive sur une page de maquettes d'essais de truc
beurk flash
> d'où qu'il est le popup ?
> Click droit ==> nianiania macromedia flash blabla ! ! !
> Y va pas y avoir que toi d'énervé !

Mais c'est pourtant simple,
Tu clickes sur le lien de la pop-up "lbtc"



Et où est cette popup lbtc ?
Je suis d'abord arrivé sur une page avec en haut à gauche (de mémoire)
un mot qui ressemblait à ce lbtc présenté comme 1 lien
J'y ai cliqué ...
Et hop!
dans la même fenêtre arrive je ne sais quoi
genre 3 ? qui se dispersent sur la page
pour réveler au bout d'un moment des maquettes flash (rebeurk de beurk
tant pour le flash que j'aborre que pour les maquettes)
(heureusement que c'était pas en flash 10, j'étais en + bon pour une MaJ !)
et TOUJOURS pas de popup ...
GRrrrMmmmmbl !

et tu fais click droit sur le
fond de la pop-up



Ha ? ta popup c'est cette page de maquettes ?
Perso pour moi une popup est ce qu'on appelle aussi
une fenêtre jaillissante
c a d
une plus petite fenêtre qui vient se supperposer sur celle principale.

(pas là où il y a les flash,



Ben ? où alors, vu que la page en est remplie que ça déborde même
Tout le monde n'a pas un 21 pouces ni la devinerette pour comprendre
qu'on est sur un popup quand on n'y est pas.

ou sinon "affichage ->
source de la page" ou équivalent) et donc comme ça tu as le code html



J'ai rien essayé d'alternatif en constatant
- que je n'avais pas de popup
- que j'étais sur un multiple pavé de flashes
- et que donc Merdum, k'essse ke cé encore que ces liens perdus

d'intégration de mes flash... et dans mon message le code css...

Je recentre donc le débat :)
- je me contrecarre de savoir que tu n'aimes pas mes trucs flash, là
n'est pas le soucis :P



Dommage ... (je ne dois pas être le seul)

- mon problème se situe sur l'implémentation d'une liste horizontale
(pour présenter mes travaux sur une ligne horizontale plutot que
verticale, "c'est mon choix") ou même de tout autre procédé permettant

d'aligner des images ou des objects (je suis preneuse d'autres solutions



La solution la plus simple est d'avoir des boîtes en float:left
réglées en % pour leurs largeurs (par rapport à celle contenante)
en tenant compte des marges laissées entre elles toujours en %
et en gardant en retenue du total des répartitions un petit % pour IE
qui ne sait pas compter suivant les standards

voir ici un exemple de mini-menu (bas de page)
http://www.dimmer.fr/fr/location.html

Ou, pour 5 menus de même largeur (variable avec celle de la fenêtre)
un truc du genre :

<style type="text/css"><!--
#menu {
font-family: arial,helvetica,verdana;
font-size: 12px;
letter-spacing: 1px;
color: maroon;
background: #eee;
border: 1px solid maroon;
padding: 2%;
width: 100%;
}
#menu a:link {
width: 17%;
margin: 1%
float: left;
border: 1px solid yellow;
border-width: 1px 2px 2px 1px;
background: #ccc;
margin-top: 0;
padding: 3px;
font-weight: bold;
letter-spacing: 2px;
text-align:center;
text-decoration: none;
color: #333;
}
#menu a:hover {
color: #ffc;
border-color: black;
background: #999;
}
#menu a:active {border-color: red;}
--></style>
<div id="menu">
<p>Un petit essais de menu sur une ligne</p>
<a href="javascript:alert('menu 1');">Page 1</a>
<a href="javascript:alert('menu 2');">Page 2</a>
<a href="javascript:alert('menu 3');">Pour la Page 3, merci de me cliquer</a>
<a href="javascript:alert('menu 4');">Page 4</a>
<a href="javascript:alert('menu 5');">Rendez-vous Page 5</a>
</div>
donne une approche presque correcte avec IE

sémantiquement plus justes si il y en a) sur une ligne hori et non



Je recherche dans le fouilli du DD, normalement je dois avoir qque chose ...

Ah ! mais c'est même en ligne !
(mes élecubrations à propos de css et leurs résultats différents suivant navigateur)
- tentative d'alignement vertical (page organisée sans aucun <table>)
(avec liens vers une page (pas de moi) soignée aux petis oignons, à voir absolument)
http://perso.wanadoo.fr/stephane.moriaux/truc/ggv/
- tentative de menu horizontal :
http://perso.wanadoo.fr/stephane.moriaux/truc/ggv/menu/reparti.htm
(résultat corect IE en § 5 )
- une soluce menu horizontal donné par je ne sais plus qui
avec ul li (cacabouilla avec NC4.5, iCab, Opera ... !)
http://perso.wanadoo.fr/stephane.moriaux/truc/ggv/menu/menu_reparti.htm

verti... qu'elle que soit la taille de la fenêtre, et qui plus est avec
une boite fixed en haut dans la meme page



Aiye ! pask'en + y a un fixed ? et qui vient tout chambouler j'imagine ?
il n'est pas rangé dans un div latéral ?

(cf. ma page popup)... parce
que pour l'instant ce qui marche encore "le mieux" (visuellement, et au
niveau "portabilité") c'est les tables (ce qui somme toute n'est
peut-etre pas la pire des solutions non plus, sémantiquement parlant,
non ?) mais j'aimerai éviter quand meme si possible...



Bof .. vu les maquettes qui s'en inspirent terriblement, pourquoi pas
ça restera dans le ton ;-)

Nota : mon Opera ne sait pas ce qu'est une <table> ! ! !

Est-ce qu'on s'en sortira un jour ?

As-tu des pistes à ce sujet sur la raison pour laquelle je n'arrive pas
à implémenter ce modèle (dont j'ai founi les divers codes dans mon
message d'origine) ?



Vu le fil ... je suis un peu largué :-(

voir la faq du coin des experts de wanadoo
http://perso.wanadoo.fr/coin.des.experts
re-visiter l'open web
http://www.openweb.eu.org/
qui doit lui aussi avoir sa page sur le menu constitué à partir des ul et li
(qui à ce que je crois avoir compris est un standard)
et pour le fixed, peut-être ici ?
http://www.openweb.eu.org/articles/initiation_absolue/

Merci encore de ton intervention... en espérant la prochaine moins
"agressive" ;)



J'ai horreur mais alors horreur du Flash !
==> un exemple alternatif au Flash (jpg + JS + CSS) :
http://www.wpdfd.com/editorial/thebox/example11.html
( Et ça pourra te servir pour les positionements de divs )
( servira-ce à ton staff de designers ? ? )

Et comment ça se fait que je n'ai pas eu de popup ?

Marie

PS : tu peux éviter de quoter ce à quoi tu ne réponds pas ? merci ! (cf.
les chartes de usenet, pas l'adresse exacte sous la main là mais google
est ton ami) :)



PS : quand j'ai mes nerfs tu sais ce que je leurs dis !
de tte la manière j'ai répondu à tout et même à ce qui n'était pas demandé.

--
**************************************************************
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Raphaël Wils
[...] La solution la plus simple est d'avoir des boîtes en float:left


[...]
Stéphane MORIAUX



Cette solution a été proposé au tout début par moi-meme et appliqué par
Marie qui entre temps a appris ses tables de multiplication ;-)

Raphaël
http://perso.club-internet.fr/raphael.wils
Avatar
"Raphaël Wils" a ecrit :

> [...] La solution la plus simple est d'avoir des boîtes en float:left
[...]
> Stéphane MORIAUX

Cette solution a été proposé au tout début par moi-meme et appliqué par
Marie qui entre temps a appris ses tables de multiplication ;-)



Oui ;-))
J'avais vu (après seulement, bien sûr !)

http://perso.club-internet.fr/raphael.wils



--
**************************************************************
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
"Marie ALHOMME@ Will Up" a ecrit :

Oui sauf qu'apparemment, horreur malheure, ça ne passe pas sous ie ? le
fixed est pas fixed et la liste fout un peu le camp... :'(
je sens le hack spécial IE... c'est ça ?? grm§&àç'(à*ùvm de IE !!!!



J'ai beaucoup plus de pb d'affichage des Flashes
(je dois constamment forcer le réaffichage)
qu'avec leur arrangement qui a l'air correct.

Lee hack special IE (dont le mien se fout, soit dit en passant)
c'est pour (soi-disant) régler un pb du fixed sur IE ==>
si on met des liens dans le fixed ils deviennent innactifs quand
on scrolle la page !
Il faut revenir en haut de page pour réactiver les liens ...

Ces généralités mises à part, je ne comprends pas ce que tu veux
J'ai re-bravé les flashes et suis allé à
http://www.pouipouidesign.net/lbtc_.htm

Ni pas vu de menu ni de fixed ... !

Tu veux faire des menus sur les pavés des flashes (qui remplissent tout le pop-up)
Ah? ben non, y sont pas tous de même largeur et aucun ne remplit entierement
le champ de la fenêtre.

Ah! non, après autopsie du code, il semblerait que le menu c'est 1 2 3
Ce serait bien si <a href="#2"> ou <a href="#3">
Ce serait bien si les ancres pouvaient commencer par une lettre !

Quant au fixed, avec le css concocté ==> bravo !
Il reste bien fixé au départ et ne reste pô z'à l'ecran lors de scrolls.

J'ai la très nette impression que dans ton choix d'organisation horizontale de ta page
Que le positionnement des ancres pose problème (cf + bas)
Qu'il va te faloir soit :
- recopier le menu au dessus de chaque Flash
- ou un petit Javascript pour déplacer le menu en même temps qu'on saute vers l'ancre
(ce qui résoudrait du même coup cette histoire de fixed aux liens perdus)
laisser les LI en largeur libre
faire une class pour embed avec marges (ce sont eux qui vont régler les LI)
régler les dimensions du popup au petit poil
demander au staff de designers de faire des paneaux de même taille !
pasque là y nous enm... un max !
voir ici cequ'ça donne
http://perso.wanadoo.fr/stephane.moriaux/truc/ma/

Je suis de + en + persuadé que l'idée d'un déplacement horizontal vers une ancre
est une très mauvaise idée ! !
==> IE la met à gauche de l'écran ==> la démo fonctionne avec lui
==> Mozzilla la met à droite ==> on ne peut voir le panneau 3

Reste plus qu'à appliquer le déplacement au titre ET à la page.
(pas su le faire)

Dernière chose :
Le titre est très dégueu sur mon IE Mac ! (caractères trop petits )
(ça passe sur Mozilla)

Passons aux css :
Pas vu de changement de couleur au mouseover ...
Les ranger dans l'ordre :
a:link {
text-decoration: none;
color: #FF6600;
font-size: 1.2em;
font-weight: 800;
}
a:visited {
text-decoration: none;
font-size: 1.2em;
font-weight: 800;
color: #FF9900;
}
a:hover {
color: #FFCC33;
}

Bon, le reste des css cf ma démo

Si vous avez des pistes...



Je ne vois que le JavaScript, mais même ainsi c'est très aléatoire.
Chaque navigateur n'en faisant qu'à sa tête !

Quand même !
le html de nos grands mères n'était pas si mal !

--
**************************************************************
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
Marie ALHOMME
Raphaël Wils wrote:
"Marie ALHOMME@ Will Up" a écrit dans le message de
news:bmp088$sgl$
La solution se trouve la
http://perso.club-internet.fr/raphael.wils/fichiers/essais6.htm
Le scroll se fait horizontalement et verticalement si l'écran est trop
petit.
Ca marche sous WinXP/IE6 SP1 et firebird 0.6.1.



Merci beaucoup !!
J'avais opté pour un div en absolute sous ie, à défaut de, mais je vais
essayer ta méthode !

Encore merci !!!


Marie
Avatar
Marie ALHOMME
@SM wrote:
"Marie ALHOMME@ Will Up" a ecrit :
Lee hack special IE (dont le mien se fout, soit dit en passant)
c'est pour (soi-disant) régler un pb du fixed sur IE ==>
si on met des liens dans le fixed ils deviennent innactifs quand
on scrolle la page !
Il faut revenir en haut de page pour réactiver les liens ...



Ah ? Je crois que j'ai fait sauter les liens sur les verisons suivantes,
donc au pire... :)


Ces généralités mises à part, je ne comprends pas ce que tu veux
J'ai re-bravé les flashes et suis allé à
http://www.pouipouidesign.net/lbtc_.htm

Ni pas vu de menu ni de fixed ... !

Tu veux faire des menus sur les pavés des flashes (qui remplissent
tout le pop-up) Ah? ben non, y sont pas tous de même largeur et aucun
ne remplit entierement
le champ de la fenêtre.

Ah! non, après autopsie du code, il semblerait que le menu c'est 1 2 3
Ce serait bien si <a href="#2"> ou <a href="#3">



Un peu perdu ? ;)
C'est pas grave, j'ai fait autrement, et je crois que la solution de
raphael m'ira tres bien (essai ce soir ou demain)


Ce serait bien si les ancres pouvaient commencer par une lettre !



Bon à savoir, je te remercie (ça me servira autre part)



Quant au fixed, avec le css concocté ==> bravo !
Il reste bien fixé au départ et ne reste pô z'à l'ecran lors de
scrolls.



oui mais le but n'était pas de faire du "fixed" pour ie, mais plutot de
faire quelque chose qui soit pas trop moche sous ie tout en étant en
fixed dans les autres...

J'ai la très nette impression que dans ton choix d'organisation
horizontale de ta page Que le positionnement des ancres pose problème
(cf + bas)



Oui, c'st pour ça que j'ai laissé tombé ça, parce que chacun
(navigateur) interprète ça comme il veux :)


Dernière chose :
Le titre est très dégueu sur mon IE Mac ! (caractères trop petits )
(ça passe sur Mozilla)



C'est bon à savoir
c'est vrai que je ne peux pas tester sur bcp de plateformes
différentes...
je pense investir dans un coup de broswercam.com quand j'aurai fini le
site


Passons aux css :
Pas vu de changement de couleur au mouseover ...
Les ranger dans l'ordre :



c'est marrant, j'avais justement eu des problemes avec cet ordre là, et
c'est en mettant hover avant visited que ça remarchait ?!!!


Quand même !
le html de nos grands mères n'était pas si mal !



A qui le dis-tu ?!
Je regrette le temps ou faire des tables ou frames n'était pas une
hérésie :) c'était tellement plus simple...
mais je trouve que ce que l'on peux faire "maintenant" (que je me
réveille) c'est quand même puissant...
On peux pas tout avoir hein ? :)

Encore merci de ton aide et de ton temps !!
Je reviens bientot vous faire tester le site entier :)

Marie
Avatar
"Marie ALHOMME@ Will Up" a ecrit :

Encore merci de ton aide et de ton temps !!
Je reviens bientot vous faire tester le site entier :)



Ps trop lourdes les pages ! hein ?
:-)

Marie



--
**************************************************************
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************