OVH Cloud OVH Cloud

fichiers css ...

22 réponses
Avatar
scraper
Bonjour à tous !

j'espère que je m'adresse au bon endroit, quoi que j'en doute un peu,
n'ayant jamais vu de post à ce sujet ?

mes excuses dans le cas contraire ...

voila, j'essaie de débuter sur les feuilles de style (pour intégrer dans une
feuille en php - je débute aussi lol
et je bute sur des problèmes de compréhension du mécanisme des div ...

mon propos est d'essayer de recréer une structure identique à celle obtenue
avec des frames
donc, une page en 3 parties :
un bandeau de titre, qui prenne toute la largeur de la page
le reste divisé en une partie de gauche (menu) et l'affichage des infos de
la page proprement dites

j'ai donc créé mes 3 div, dans un fichier css, que j'intègre par la suite à
la page web

'--------

#title
{
position: absolute;
width: 100%;
height: 70px;
font-size:3.6em;
font-weight:bold;
font-family: verdana,tahoma,arial;
color:#0C4E5A;
background:url(../images/fond3.jpg);
background-color:#DFEFEF;
text-align:center;
border-style: outset;
border-width:3;
border-color: #c2dfe3 #ebfbfa #ebfbfa #c2dfe3;
}
#menu
{
position: absolute;
left:0;
top:70px;
width: 185px;
height:500px;
font-family: verdana,tahoma,arial;
color:#0C4E5A;
padding:10px,0px,5px,5px;
background:url(../images/fond3.jpg);
background-color:#DFEFEF;
border-style: outset;
border-color: #c2dfe3 #ebfbfa #ebfbfa #c2dfe3;
overflow: visible;
}
#main
{
position: absolute;
right:15px;
top:100px;
left:220px;
width:780;
height:500px;
bottom:15pt;
height:-250px;
font-size:10pt;
font-family: verdana,tahoma,arial;
color:#0C4E5A;
padding:20px,15px,10px,10px;
background-color:#DFEFEF;
border-style: outset;
border-color: #c2dfe3 #ebfbfa #ebfbfa #c2dfe3;
overflow: auto;
}


'------

or, le comportement est pas celui que je souhaiterais :

si je réduis sensiblement la page, les parties menu et main ne voient pas
apparaitre d'ascenseur, malgré le overflow placé sur auto
je ne vois pas comment modifier le code pour permettre cela ?
d'autre part, l'ascenseur n'apparait pas non plus sur la page, si je la
réduis ?

d'autre part, j'aurais souhaité éviter de coder en dur la hauteur du menu et
de la page, pour éviter les problèmes dûs aux différentes résolutions
d'écran

ma deuxième question est donc : comment faire, une fois défini le bandeau de
titre, pour occuper totalement l'espace restant ? :-)

si quelqu'un pouvait me renseigner, me mettre sur la voie ? :-)

d'avance merci


--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper

10 réponses

1 2 3
Avatar
~Jean-Marc~ [MVP]
Salutations *scraper* !
Dans http://groups.google.com/groups?threadm=u%
tu nous disais :

je ne comprends vraiment pas à quoi correspond cette zone de la page

le padding et margin sont déjà à 0


Hello scrap,

Quelle zone ? Je ne vois rien ?

Tu veux pas nous faire une tite capture d'écran avec quelques infos
dessus sur ce que tu veux obtenir ?

@+

--
~Jean-Marc~ MSAE & MVP Windows XP Fr
M'écrire : http://msmvps.com/docxp/contact.aspx
- http://docxp.mvps.org - http://msmvps.com/docxp/ -
Aide en DIRECT sur Internet : http://communautes-ms.akro-net.org/

Avatar
scraper
Bonjour ~Jean-Marc~ [MVP], dans le message
news:
tu disais :

Salutations *scraper* !
Dans
http://groups.google.com/groups?threadm=u%
tu nous disais :
je ne comprends vraiment pas à quoi correspond cette zone de la page

le padding et margin sont déjà à 0


Hello scrap,

Quelle zone ? Je ne vois rien ?


Tu veux pas nous faire une tite capture d'écran avec quelques infos
dessus sur ce que tu veux obtenir ?


ici :

http://scraper.chez.tiscali.fr/tempo/2.png



à noter que sur les conseils de Fred, j'ai bidouillé le doctype ... un peu
au hasard, faut dire

et effectivement, selon ce que je mets, cette bande disparait ... mais la
page s'affiche plus du tout comme je veux :-(



--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper


Avatar
Jean
Bonjour Jean, dans le message
news:
tu disais :


[...]

merci de la peine que tu t'es donnée ;-)

mais je souhaite éviter absolument le javascript, pour des problèmes liés au
niveau de sécurité , et à la désactivation des autorisations de script :-(


... heu ... le script n'est là que pour remplir le contenu :-) ... ça
prenait moins de place que de le mettre en dur dans le htm.

--
Jean - JMST
Belgium

Avatar
Jean
Bonjour Jean, dans le message
news:
tu disais :

cette P*** de scroll verticale non désirée, qui dévoile une bande
d'environ 2 centimètres en bas de la page ...

une idée de sa provenance ?


A première vue je dirais de remplacer votre section BODY dans le css
par :

HTML,BODY
{
... bla bla bla ...
padding:0;
margin:0;
overflow:hidden;
... bla bla bla ...
}
et supprimez les overflow-x et overflow-y.

overflow-x et overflow-y ne sont gérés (si j'ai bon souvenir) que par
IE (donc si vous ne ciblez que IE vous pouvez aussi mettre leurs
valeurs sur hidden au lieu de d'utiliser overflow).


ah, OK, j'ignorais ...
merci

néanmoins, ça ne me convient pas vraiment : si je cache le overflow, dans le
cas où la fenêtre est resizée, je n'ai plus accès aux ascenseurs :-(



Comme je disais vous devrez modifiez la structure (en mettant tout dans
une div par exemple sur laquelle vous mettez overflow sur auto ... elle
servira de pseudo-body en qq sorte) ... regardez en détail la structure
html que j'ai postée dans ce fil.

je ne comprends vraiment pas à quoi correspond cette zone de la page

le padding et margin sont déjà à 0



--
Jean - JMST
Belgium



Avatar
~Jean-Marc~ [MVP]
Salutations *scraper* !
Dans http://groups.google.com/groups?threadm=%
tu nous disais :
http://scraper.chez.tiscali.fr/tempo/2.png

à noter que sur les conseils de Fred, j'ai bidouillé le doctype ...
un peu au hasard, faut dire

et effectivement, selon ce que je mets, cette bande disparait ...
mais la page s'affiche plus du tout comme je veux :-(


OK, j'ai compris.

Déjà, il ne devrait rien y avoir après la balise </html>

Ensuite, mets tes scripts de comptage juste avant la fin de
ta DIV scrollcase et tu n'auras plus de bande "parasite".

@+

--
~Jean-Marc~ MSAE & MVP Windows XP Fr
M'écrire : http://msmvps.com/docxp/contact.aspx
- http://docxp.mvps.org - http://msmvps.com/docxp/ -
Aide en DIRECT sur Internet : http://communautes-ms.akro-net.org/

Avatar
scraper
Bonjour ~Jean-Marc~ [MVP], dans le message
news:
tu disais :

Salutations *scraper* !
Dans
http://groups.google.com/groups?threadm=%
tu nous disais :
http://scraper.chez.tiscali.fr/tempo/2.png

à noter que sur les conseils de Fred, j'ai bidouillé le doctype ...
un peu au hasard, faut dire

et effectivement, selon ce que je mets, cette bande disparait ...
mais la page s'affiche plus du tout comme je veux :-(


OK, j'ai compris.

Déjà, il ne devrait rien y avoir après la balise </html>


eh je sais bien !
mais je n'y peux rien ....

c'est ces enfoirés de tiscali qui rajoutent tout celà à l'insu de mon plein
gré ! :-(


Ensuite, mets tes scripts de comptage juste avant la fin de
ta DIV scrollcase et tu n'auras plus de bande "parasite".



tu penses vraiment que c'est ce qui cause ce problème ? :-(



@+


--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper


Avatar
scraper
Bonjour ~Jean-Marc~ [MVP], dans le message
news:
tu disais :

OK, j'ai compris.

Déjà, il ne devrait rien y avoir après la balise </html>

Ensuite, mets tes scripts de comptage juste avant la fin de
ta DIV scrollcase et tu n'auras plus de bande "parasite".


tiens, ça m'a fait penser à un truc :
vu que je peux pas empêcher tiscali de rajouter leur daube après ma balise
</html> (faut le faire, quand même !) j'ai eu l'idée de la supprimer de ma
page test ....

et là, il semble que l'affichage soit correct ? ;-)

bon, ben je ferai sans balise ;-)

merci en tout cas :-)




--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper

Avatar
Jean
il semble que l'affichage soit correct


Je ne veux pas jouer le rabat-joie :-) ... mais avez vous essayé votre
page dans Opera et Firefox ? ... ;-)

Amicalement,

--
Jean - JMST
Belgium

Avatar
scraper
Bonjour Jean, dans le message
news:
tu disais :

il semble que l'affichage soit correct


Je ne veux pas jouer le rabat-joie :-) ... mais avez vous essayé votre
page dans Opera et Firefox ? ... ;-)


je sais qu'il y a un blème ...

mais j'ai du mal à trouver une solution :-(

merci quand même de me le signaler ;-)



Amicalement,


--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper


Avatar
scraper
Bonjour Jean, dans le message
news:
tu disais :

En remplaçant certaines valeurs de dimensions exprimées en pixels
par des valeurs en %


C'est ce à quoi je pensais entre autre :-)
Voici document.htm et sa feuille de style document.css :
(pour tester http://users.skynet.be/jmst/document.htm)


bonjour

je reviens vers toi (un peu tard ...)

je me suis inspiré de ton code, et le résultat dans IE est pas trop mal ...
du moins, on se rapproche de l'effet escompté
http://scraper.chez.tiscali.fr/tempo/milady1/actu.php

sauf que pour que ça fonctionne correctement, je dois omettre volontairement
de fermer une balise <DIV> ??

vraiment bizarre .... sinon, je me retrouve encore avec cette foutue bande
en dessous de la zone de ma page, et le scroll vertical qui apparait ...
(http://scraper.chez.tiscali.fr//tempo/2.png)



sinon, il me reste une paire de problèmes, avant d'attaquer la compatibilité
dans les autres browsers ...

par exemple, comment puis je faire pour éviter que toutes les zones définies
de la page se réduisent, lorsqu'on réduit fortement la page ? (la zone de
titre, le menu, se retrouvent avec des ascenseurs dans tous les sens ...

(il y a bien les propriétés min-width et min-height, mais elles semblent ne
pas fonctionner dans IE 6 ? :-(

le but est d'obtenir l'affichage d'une taille minimum de l'ensemble de la
page, en dessous de quoi les ascenseurs verticaux et horizontaux de la page
apparaitraient, sans diminuer la taille du bandeau de titre et de menu, et
en garantissant une zone minimum pour le reste de la page

ouf !

en espérant avoir été clair .... :-)

merci de ton aide



--

Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr

scraper


1 2 3