Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Scripting Microsoft fichiers css ...

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
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3
Avatar
Fred
Dans : news:uq%,
scraper disait :
Bonjour à tous !


Salut scraper ;-)

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 ?


C'est vrai mais il y a, à mon avis, quelques spécialistes de la chose
ici !

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 ...


C'est pas gagné :-(
Je te donne quelques infos à connaître avant que tu te tortures les
méninges.
Premièrement, IE ne respecte pas à la lettre le standard css. Il le
respecte toutefois un peu mieux si tu mets un bon doctype en tout début
de page.
D'autre part, pour faire ce que tu veux, l'idéal est l'attribut
position:fixed, mais pas supporté par IE ... 6.
Tu devrais peut-être installer FF et/ou Opera sur ton poste pour être
sûr que cela est de ton fait en cas de comportement inattendu.
Sinon, un *excellent* site, où, je pense, tu devrais trouver ce qu'il
faut pour ton problème : http://www.positioniseverything.net/



--
Fred
http://www.cerbermail.com/?3kA6ftaCvT

Avatar
scraper
Bonjour Fred, dans le message
news: %
tu disais :

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 ?


C'est vrai mais il y a, à mon avis, quelques spécialistes de la chose
ici !


qu'ils se dénoncent ! ;-)

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
...


C'est pas gagné :-(
Je te donne quelques infos à connaître avant que tu te tortures les
méninges.


trop tard rofl

Premièrement, IE ne respecte pas à la lettre le standard css. Il le
respecte toutefois un peu mieux si tu mets un bon doctype en tout
début de page.


c'est vrai que ça y fait lol

D'autre part, pour faire ce que tu veux, l'idéal est l'attribut
position:fixed, mais pas supporté par IE ... 6.


exact ! :-(

Tu devrais peut-être installer FF et/ou Opera sur ton poste pour être
sûr que cela est de ton fait en cas de comportement inattendu.
Sinon, un *excellent* site, où, je pense, tu devrais trouver ce qu'il
faut pour ton problème : http://www.positioniseverything.net/


merci pour le lien, on apprend plein de trucs édifiants !
notamment que si tu veux créer un site qui soit visible par tous les
navigateurs de la même façon, c'est pas gagné :-(

mais j'ai pas vu de réponse à mon problème spécifique ??

alors je suis passé par la création d'un tableau, combiné à des feuilles de
style ....

le résultat (ici : http://scraper.chez.tiscali.fr/tempo/milady/lien1.php )
commence à ressembler à ce que je veux faire

en outre, en réduisant la page, le comportement (dans IE, pas encore testé
les autres) reste satisfaisant

seul hic (y'en a toujours un, faut croire ! ;-) :
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 ?

merci en tout cas de ton aide ;-)



--

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

scraper


Avatar
sympatix
Salut !

Un petit tuyau (peut-être ...)
En remplaçant certaines valeurs de dimensions exprimées en pixels par des
valeurs en %, peut aussi t'aider à résoudre certains problèmes de
redimensionnement, en fonction des résolutions d'écrans.

Si ça peut t'aider...

Cordialement
saint_path_x_arobase_t'es_laide_euh_point_fr

(Antispam: Ôter les "toto" dans l'adresse, pour me répondre)
Avatar
Fred
scraper wrote:
Bonjour Fred, dans le message
news: %
tu disais :

Premièrement, IE ne respecte pas à la lettre le standard css. Il le
respecte toutefois un peu mieux si tu mets un bon doctype en tout
début de page.


c'est vrai que ça y fait lol


Oui, il faut un doctype, amis en plus, pas n'importe lequel et pas
n'importe où (avec IE)
Regarde ici pour plus de précisions :
http://hsivonen.iki.fi/doctype/


Tu devrais peut-être installer FF et/ou Opera sur ton poste pour être
sûr que cela est de ton fait en cas de comportement inattendu.
Sinon, un *excellent* site, où, je pense, tu devrais trouver ce
qu'il faut pour ton problème : http://www.positioniseverything.net/


merci pour le lien, on apprend plein de trucs édifiants !


N'est-ce pas ? ;-)
Voila qui va amener de l'eau au moulin des détracteurs d'IE lol

mais j'ai pas vu de réponse à mon problème spécifique ??


Oui, désolé, je n'ai pas eu le temps de vérifier.

Mais regarde ici :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Très bon aussi ... et en français cette fois :-)

alors je suis passé par la création d'un tableau, combiné à des
feuilles de style ....


Vilain :-p

le résultat (ici :
http://scraper.chez.tiscali.fr/tempo/milady/lien1.php ) commence à
ressembler à ce que je veux faire


Tu as un nouveau pseudo ? ;-)
Cherche aussi des infos sur le serveur Apache et l'utilisation du
fichier .htaccess
C'est comme cela que j'ai gardé l'extension htm sur des fichiers avec du
code php par exemple.
Pour un nouveau site ce n'est pas trop grave mais si tu reprends un site
déjà en ligne et/ou référencé cela peut-être utile.

en outre, en réduisant la page, le comportement (dans IE, pas encore
testé les autres) reste satisfaisant

seul hic (y'en a toujours un, faut croire ! ;-) :
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 ?


À brûle pourpoint non. Margin ou padding sur le body ?

merci en tout cas de ton aide ;-)


De rien :-)


--
Fred
http://www.cerbermail.com/?3kA6ftaCvT


Avatar
Jean
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)

<!---8<---document.htm--->
<html>
<head>
<link rel="stylesheet" href="document.css">
<title>structure</title>
</head>
<body>
<div id="titre">TITRE<br /></div>
<div id="menu"></div>
<div id="contenu"><div id="texte"></div></div>
<script type="text/javascript">
<!--
//-------Remplissage du document------
with(menu){
innerHTML='MENU<br />'
for(var i=0;i<10;i++){
innerHTML+='élément '+(i+1)+'<br />'
}
}
with(texte){
innerHTML='CONTENU<br />'
for(var i=0;i<30;i++){
for(var j=0;j<15;j++){
innerHTML+='blabla'
}
innerHTML+='<br />'
}
}
// -->
</script>
</body>
</html>
<!---8<---document.htm--->

/*---8<---document.css---*/
HTML,BODY{
margin:0;
padding:0;
overflow:hidden;
font-family:verdana,arial,serif;
font-size:9pt;
}

#titre{
background-color:#CD853F;
color:#F0E68C;
position:relative;
text-align:center;
font-weight:bold;
width:100%;
height:5%;
overflow:auto;
}

#menu{
background-color:#DEB887;
color:#A0522D;
position:relative;
width:15%;
height:95%;
overflow:auto;
}

#contenu{
background-color:#F5DEB3;
color:#B8860B;
position:absolute;
width:85%;
height:95%;
top:5%;
left:15%;
overflow:auto;
}

#texte{
padding-left:15px;
padding-top:10px;
}
/*---8<---document.css---*/

--
Jean - JMST
Belgium

Avatar
Jean
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).

Après vous devrez sans doute modifier votre structure ... voir ma
réponse à Sympatix ...

Amicalement,


--
Jean - JMST
Belgium

Avatar
scraper
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 :-(

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

le padding et margin sont déjà à 0





--

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

scraper


Avatar
scraper
Bonjour Fred, dans le message
news: %
tu disais :

Oui, il faut un doctype, amis en plus, pas n'importe lequel et pas
n'importe où (avec IE)
Regarde ici pour plus de précisions :
http://hsivonen.iki.fi/doctype/


je vais voir
merci

Oui, désolé, je n'ai pas eu le temps de vérifier.

Mais regarde ici :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Très bon aussi ... et en français cette fois :-)


je crois que j'ai déjà regardé là :-)


le résultat (ici :
http://scraper.chez.tiscali.fr/tempo/milady/lien1.php ) commence à
ressembler à ce que je veux faire


Tu as un nouveau pseudo ? ;-)


vi ;-)

Cherche aussi des infos sur le serveur Apache et l'utilisation du
fichier .htaccess
C'est comme cela que j'ai gardé l'extension htm sur des fichiers avec
du code php par exemple.
Pour un nouveau site ce n'est pas trop grave mais si tu reprends un
site déjà en ligne et/ou référencé cela peut-être utile.


c'est un nouveau site (enfin, un projet ;-)

seul hic (y'en a toujours un, faut croire ! ;-) :
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 ?


À brûle pourpoint non. Margin ou padding sur le body ?


sont à 0 :-(


merci en tout cas de ton aide ;-)


De rien :-)


--

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

scraper


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

Salut !

Un petit tuyau (peut-être ...)
En remplaçant certaines valeurs de dimensions exprimées en pixels par
des valeurs en %, peut aussi t'aider à résoudre certains problèmes de
redimensionnement, en fonction des résolutions d'écrans.


je m'y suis déjà essayé, mais je dois mal m'y prendre ;-)


--

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 :


[...]

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 :-(


--

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

scraper
1 2 3