Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: Ludomega le le 20-10-2003 a 13:45:28

Titre: Petit probleme CSS
Posté par: Ludomega le le 20-10-2003 a 13:45:28

Bon suite a un conseil dans un autre sujet d'utiliser le css pour remplacer une i frame je fait face a quelques problemes que je n'arrive pas à résoudre....

LE debut allait assez bien, mais la je bloque. Etant débutant dans le css je suis d'abord allé voir le site all html histoire de trouvé les bonnes balises, mais même la ca veut pas........... ???

Donc mon probleme.....

Voici le code dans lma feuille de style pour ma frame.

.frame {
margin-left: 221px;
width: 493;
height: 515px;
overflow: auto;
font-size: 14px;
background-color: #CCCCCC;
border: 1;
border-color:#000000;

Et mon probleme c'est, la bordure s'affiche pas. Pourtant, c'est bien ces balises qu'il faut utiliser non??? Je comprend pas tout....

Entuiste un autre probleme:

Ce code est dans ma page index...

<body>
<div class="menu"></div>
<div align="left" class="frame">
<h1 align="left">une présentation sans Frames !</h1>
<p align="left">test</p>
<p align="left">test</p>
... div>
<div class="bas" align = "left"></div>
</body>

J'aimerais faire apparaitre tout ca au centre de l'ecran et non a gauche.... j'ai éssayé de le mettre dans un tableau de xidth 100% et de faire align = center mais ca amrche pas non plus....

Si qqn a une idée???

Titre: Re:Petit probleme CSS
Posté par: dominique_c le le 20-10-2003 a 14:25:50

ok tu n'es pas trop mal parti... oublie complètement l'idée de tableau... Si tu ne connais pas encore les tutoriaux de sibelius, ils sont là : http://www.alsacreations.com/articles/

Sérieusement, tout y est expliqué de façon claire avec des exemples... Essai et poste de nouveau si tu ne trouves pas la solution, mais je suis persuadé que tu vas trouver ;)

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 20-10-2003 a 18:09:04

Oki merci beacoup :)

J'avais pris deux tutoriaux de ce site qu'on m'avait conseiller dans un autre post, mais j'avais pas du tout penser a allez voir si y'en a d'autre qui pouvaient m'aider.

Bref, j'vais étudier tout ca et tenter de m'en sortir.....

Et si vraiment j'arrive pas, c'est toujours cool de savoir qu'on pourra etre aidé ;)

Titre: Re:Petit probleme CSS
Posté par: Chanchan le le 20-10-2003 a 18:14:00

N'hésite surtout pas à venir poser tes questions ici Ludomega :D

Je suis sûre qu'il y aura toujours quelqu'un pour essayer de t'aider.

Et bonne chance pour le développement de ton site :D

Titre: Re:Petit probleme CSS
Posté par: SIBELIUS le le 20-10-2003 a 18:42:56

Bonne chance petit scarabée : il y'a pas mal de monde ici qui pourra bien t'aider dans ton projet ;)

Titre: Re:Petit probleme CSS
Posté par: DJolhan le le 20-10-2003 a 19:37:55

oué, et pourquoi ?
Parceque Vive le XHTML + CSS ;)

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 21-10-2003 a 10:21:56

Lol, merci c'est sympa tout ca.....

Bon j'ai bosser hier un peu, et j'ai presque reussit de centrer le site (j'avais quelques problemes que j'ai toujours pas compris qui m'ont ralentit)........


Titre: Re:Petit probleme CSS
Posté par: dominique_c le le 21-10-2003 a 10:26:54

Ta patience finira par triompher ;)

Quels problèmes as-tu ?

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 21-10-2003 a 10:33:50

C'était assez bizarre en fait...........

J'avais donc passé mon site d'une iframe en CSS grace au tuto d'alsacreations et ensuite j'ai voulu centrer mon site......

J'ai modifié mon site avec le code donné dans les tutos, mais rien ne marchait.... et je comprenait pas pourquoi.... le site ne se centrait ni sur IE ni sur Modzila..... j'ai tout éssayé, de ne garder que les balises vraiment nécéssaire pour voir....rien.

Bref a la fin j'en ai eu tellement marre que j'ai recuperer le script de "3 zones (en-tête, menu à gauche, contenu à droite), de taille fixe 770px et centré dans la page" et que je l'ai adapté a mes besoins.....

Et maintenant ca marche.... ;)

Titre: Re:Petit probleme CSS
Posté par: dominique_c le le 21-10-2003 a 10:39:13

ok donc pour l'instant, ru n'as pas de problème ?

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 21-10-2003 a 11:08:37

Non, c'est cool :)

Je vient de finir le centrage du site et j'ai reussit a mettre une bordure a mon cadre principal...

Merci bcp a tous :D

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 22-10-2003 a 11:36:52

Bon, alors voila, petits problemes... Rien de bien méchant en fait mais si j'arrive a les corriger c'est parfait....

J'ai donc fait 3 blocs dans mon CSS. Un pour les menus, un pour le contenu, et un tout petit pour mettre le nom de la personne et le mien.

Ces blocs sont disposé de cette maniere : celui pour le menu sur la gauche, et les deux autres l'un au dessus de l'autre la taille totale des deux blocs faisant celle du menu.....

J'sais pas si vous arrivez a me suivre la... ???

Bon, dans le trosieme bloque j'ai centré le texte.... Sur IE ca marche nickel, le texte est centré et est donc également centré par rapport au bloc du contenu. Mais sur Modzilla, c'est centré par rapport a la page..... :'(

Et un autre petit probleme... 'ai créer encore un autre bloc avec une bordure en haut et en bas. Celui ci apparait dans le bloc du contenu. Sur IE on voit la bordure, mais sur modzilla pas....

Voici mon code pouir le CSS:

.menu { (c'est le bloc menu ;D)
float: left;
width: 221px;
height: 525px;
}
.contenu { (le bloc ou seront les informations)
height: 505px;
background-color:#cccccc;
overflow: auto;
padding: 5px;
border : 3px double #000000;
}
.bas { (le bloc ou y'a les noms)
height: 20px;
background-color: #ffffff;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 10px;
padding: 5px;
}

.rubrik { (le bloc qui est placé dans la page dans le bloc contenu)
width: 510;
height: 20;
background-color:#cccccc;
border-bottom : 1px double #000000;
border-top : 1px double #000000;

J'esperre que j'ai a peu pres reussit a me faire comprendre.............

Titre: Re:Petit probleme CSS
Posté par: dominique_c le le 22-10-2003 a 11:54:14

Dans un premier temps, je ne vois pas trop ce qui peux provoquer ces erreurs, surtout pour les bordures sous Mozilla...

A tout hasard, tu n'as pas mis tes pages en ligne dans une zone tests de ton site ?

Pour le texte, je suppose que l'as définis aussi sur la feuille de style, est-ce qu'il est centré dans cette déclaration ?

Par exemple, pour un paragraphe centré :

p.centre {
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: normal;
   text-decoration: none;
   font-size: 80%;
   text-align: center;
}

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 22-10-2003 a 12:16:22

Pour le site en fait il est pas en ligne, il est chez moi et je teste avec easy php....... mais je test bien la même page sur les deux navigateurs.....

C'est pr ca que je peux pas vous montrer.....

Pour le texte j'vais voir pour l'alignement. Mais j'ai surtout l'impression que sous ie le bloc du bas est bien placé et pas sur modzilla....

J'mexplique: immaginon le bloc menu qui fait 100 px de haut.... le contenu 90.px de haut et le bas 10 px de haut..... Dc sous IE tout se passe bien.

Modzilla (en fait c'est le Firebird, je sais aps si ca change) lui met le bloc menu a 100, le contenu a 100 et donc celui de 10 se retrouve en bas sur toute la largeur et est donc aligné sur la apge....

Faudrait que je le mette en ligne pour voir....

Sinon plus simple si tu as modzilla, envoit moi un MP et je te file l'ip....

En tout cas merci, et j'vais quand même ta solution.

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 22-10-2003 a 12:38:40

C'est tres etrange en fait.......

j'ai voulu ajouter ton code, et la j'ai d'abbord tenter de vérifier exactement ce qui se passait.........

En fait mon bloc se trouvait bien tt a gauche en dessous du menu sur modzilla. En augmentant la taille de mon conteneur, j'ai donc réussit a faire passé le bloc sous celui du contenu (je pense qu'il faut 2-3 pixel de battement sous modzilla).

Mais ensuite je me suis apercu que le bloc s'adaptait a la taille du texte sous modzilla.... Dc que je le centre, que je l'aligne a gauche ou a droite, le texte ne changeait pas de taille. j'ai alors appliqué les mêmes parametres qu'a mon bloc contenu (qui lui ne s'adapte pas a la taille du texte) et la ca marche.... Seulement le parametre qui a permis ca c'est overflow.... alors que j'en ai pas besoin dans ce bloc ??? Donc je pense que doit y'avoir un autre parametre fonctionnant, mais bon, a la limite ca marche donc....

Par contre pour mes bordures j'ai toujours pas compris, je vais voir si y'a pas un delire dans le même genre...

C'est bizare en fait les changements entre les deux navigateurs... Si je regarde bien le site sur les deux navigateurs, les cadre n'ont pas la même taille alors que la taille en px est spécifié. C'est étrange, on dirait que modzilla rajoute des marges un peu aprtout ce que IE ne fait pas....


Titre: Re:Petit probleme CSS
Posté par: Chanchan le le 22-10-2003 a 12:43:13

Mmmm, je crois voir ton problème...

Cela s'appelle la gestion des boîtes standards et Microsoft.

OpenWeb t'expliquera bien mieux que moi ce problème ;)

http://www.openweb.eu.org/articles/dimensions_boites_css/

Mais en clair c'est que Mozilla et Internet Explorer ne gère pas de la même manière la largeur des div dans lesquels tu as indiqué un padding.

C'est sûrement ceci qui fait ta différence de largeur

Titre: Re:Petit probleme CSS
Posté par: DJolhan le le 22-10-2003 a 12:47:45

Sous ie, les probleme de bloc ne sont pas les meme que sous Netscape (mozilla etc etc)

Lorsque ton site semble etre nickel sous ie, tu t'appercois que sous netscape, il est loin de l'etre, et c'est a ce moment la , que tu comprends que tu as fait des erreurs dans tes Css ou placement ou bien des oublie.

Petit indice pour tes blocs:

float: left;
ou
float: right;

T'aidera surement à regler pas mal de probleme pour l'affichage sous Netscape ;)

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 22-10-2003 a 13:14:50

Oki, j'suis allé voir et effectivement j'ai vraiment l'impression que c'est ce qui fait la différence.....

En gros si je comprend bien, Ie ne respecte toujours pas le standard du w3c..... ???


Titre: Re:Petit probleme CSS
Posté par: Chanchan le le 22-10-2003 a 13:25:14

Citation de: Ludomega le le 22-10-2003 a 13:14:50
Oki, j'suis allé voir et effectivement j'ai vraiment l'impression que c'est ce qui fait la différence.....

En gros si je comprend bien, Ie ne respecte toujours pas le standard du w3c..... ???




;D Exact ! ;D Il n'en fait qu'à sa tête pour imposer SON standard à lui ;D

Titre: Re:Petit probleme CSS
Posté par: dominique_c le le 22-10-2003 a 13:59:20

Les solutions sont venues... je voudrais juste ajouter une suggestion... Prépare tes pages en fonction de Mozilla... puis regarde comment ça apparaît sous ie... en général, tu devrais avoir juste quelques écarts, et tu pourras jongler avec les dimensions pour trouver le bon équilibre d'affichage dans les deux navigateurs... Mais ce n'est pas fiable à 100% quand même. ;)

Si tu mets un test en ligne, tu peux m'envoyer l'adresse par mp et je regarderais... Mais si tu as trouvé les soluces pour l'instant, pas de problème ;)

Pour les bordures, je suis surpris.... regarde bien si ton css est correct... qu'il ne manque pas de ";" et de "}"

Titre: Re:Petit probleme CSS
Posté par: DJolhan le le 22-10-2003 a 14:03:41

! Attention !

Tu peux avoir ta page validée W3C et pourtant avoir un site qui ne s'affiche pas correctement

Titre: Re:Petit probleme CSS
Posté par: Ludomega le le 22-10-2003 a 14:15:18

Ouai, c'est ce que j'ai vu ;D
Le site est validé par le w3c mais ne s'affiche efectivement pas correctement...

Pour les bordure j'vient de trouver

Mon acien code
.rubrik {
width: 510;
height: 20;
background-color: #cccccc;
border-bottom : 1px double #000000;
border-top : 1px double #000000;
}

Suelement sous modzila une bordure double ne passe pas avec 1px, il faut au moins 2, contrairement a IE qui affiche une bordure normale.

J'ai donc changé et j'ai mis solid, la ca passe sous modzilla et Ie.....



Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.