FORUM MP | Xhtml/Css : probleme css avec includes

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Srv: irc.moteurprog.com

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

probleme css avec includes
	Forum : XHTML/CSS Sous Catégorie : Aucune Type du sujet : Sujet Normale FAQ : FAQ XHTML/CSS
		SUIVI PAR MAIL INACTIF
		SUJET RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

PAGE : [1]

FORUM XHTML/CSS
	Page précedente	Page suivante

gaou
Nouveau membre

Inscrit : 24/06/2007
Messages : 5

#136849 Posté le 24/06/07 à 14:36

bonjour à tous, j'ai un souci depuis avant hier que je n'arrive pas a résoudre !!

ma page index est constituée de 4 page php: entete.php, menu.php, accueil.php, et pied.php !!
mon soucis est dans le contenu, à savoir "accueil", vous voyez (Gaouprod) que mon fond blanc, ainsi que la bordure sur les cotés droits et gauche s'arretent, alors que je voudrais bien évidemment que celà continu jusqu'en bas de la page !!
je crois que c'est dans l'élément body de ma feuille css que ça foire, parce que je n'ai pas mis de propriété spéciale à une balise spéciale pour le contenu, pour simplifier, j'ai mis le fond blanc et les bordures droites et gauches à body !!

j'ai aussi essayé de bricoler en ajoutant une propriété padding-bottom à 20%, sur la page accueil, c'est bon, le tout va bien jusqu'en bas !! mais sur une autre page, encore une fois, ça ne va pas: page musique

si je le met à 100%, alors ma page est trop longue, je suis obligé de baisser la scrolbarr à peu près de 2 fois le contenu, ça fait un peu moche un espace aussi vide !!

je comprend vraiment pas comment faire, quelqu'un peu m'aider ??

PS: je comprend pas non plus pourquoi sous FF, la bordure basse de mon menu est décalée de 1 px en dessous (on peut le voir grace à la cellule grise, il y a un espace dessous), sous IE, ça passe sans probleme !!
merci

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

Czayfaboo
Co-Administrateur
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 2862

#136852 Posté le 24/06/07 à 15:15

Salut gaou Smiley

Alors quelques conseils d'un gars (moi) qui est en train de refaire tout un site (celui-ci) au normes (hard : la css fait + de 2000 lignes (au lieu de 6000 à la base lol)) :
- fait valider ton site par le W3C : Validateur W3C ... Bon çà va... t'as que 4 erreurs de rien du tout... mais même c'est pas une raison pour s'arrêter en si bon chemin... C'est presque parfait Smiley

...
- utilises au maximum des tailles relatives dans ta css (féminin car s = sheet = feuille)... Quand je dis taille relative, je parle généralement des em plus facile à utiliser que les x-larger & co... Ca te permet d'avoir de bons rendus (notamment pour les zooms) et de conserver des tailles proportionnelles entre tes fonts et des cadres & co...
- pour les fonts : astuce : déclare une taille de base dans une classe body ou html en taille figée (ex : 10pt)... et définit toutes tes autres tailles de polices en em... Elles seront ainsi relatives à la taille défini dans la classe html et tu n'auras plus qu'à changer cette taille initiale pour changer la taille de toutes les polices du site d'un coup...
Rq : le em, c'est comme le % mais divisé par 100... sauf que çà réagit pas pareil...
- 0 c'est 0, y'a pas besoin d'unité donc 0px... 0em... ben te complique pas, écrit juste 0, c'est plus lisible...

Sinon, pour ton problème (enfin me diras tu)... Ben la réponse est la dedans :

/* Generated by KaZcadeS */ body { margin: auto; font-family: Arial,Helvetica,sans-serif; background-color: white; width: 720px; font-size: 12px; color: #990000; border-left: 1px solid black; border-right: 1px solid black; z-index: 1; } html { background-color: #810507; } #entete { z-index: 2; } #pied { border-top: 1px solid #000000; background-color: #cccccc; width: 720px; z-index: 2; bottom: 0; } #menu, #menu a:link, #menu a:visited { display: block; position: fixed; font-family: Arial,Helvetica,sans-serif; background-color: #ffffff; color: #000000; font-size: 10px; border-bottom: 1px solid #000000; top: 190px; z-index: 2; width: 720px; text-decoration: none; } #menu a:hover { text-decoration: none; font-weight: bold; } #menu a:active { color: #ffffff; font-weight: bold; background-color: #000000; } #contenu { padding: 25px 15px 15px; padding-bottom: 25px; top: 205px; z-index: 1; } #cv { border: 1px solid #cc0000; padding: 10px; color: #ff6600; font-size: 10px; width: 250px; background-image: url(images/pel.jpg); background-position: right top; background-repeat: no-repeat; } .fish { display: inline; position: relative; top: 5px; }

Pour résumer : faut virer dans chacunes de tes classes container (entete, contenu, pied) les déclarations de position... Position fixed, çà veut dire que çà va défiler avec l'écran... position relative c'est quasiment pareil que static et static est la définition par défaut)... Je t'ai également virer des trucs inutiles (les margin auto dans entete, pied, accueil et contenu ne servent à rien vu que tu l'as mis dans body)... et d'autres ptits trucs...

Quoi qu'il en soit, ca marche now Smiley

__________________________
Sujet résolu ? Pensez à mettre le tag

Un problème en C# ? Vérifiez celui-ci n'est pas déjà résolu dans la FAQ et que le sujet n'est pas traité parmis les tutoriaux ou les articles avant de poster dans le forum C#.

HAUT DE PAGE

gaou
Nouveau membre

Inscrit : 24/06/2007
Messages : 5

#136897 Posté le 24/06/07 à 18:55

salut Czayfaboo !! je te remerci pour tous tes conseils, j'ai testé ton code source, c'est sûr que là, ça marche, mais ça ne fait pas l'effet que j'aurai voulu !!

j'aurai aimé que seul la partie "accueil" (en gros le contenu même du site) soit sous l'effet du scroll !! je voulais que l'entete, le menu et le pied soit toujours à la même place et ne bouge pas (donc soit fixé Smiley

) !!

aurais-tu une idée, un bricolage a faire pour que je puisse garder cet effet, et que le contenu de la partie centrale soit seul a pouvoir etre sous l'effet du scroll ??

HAUT DE PAGE

Czayfaboo
Co-Administrateur
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 2862

#136903 Posté le 24/06/07 à 19:17

fixé par rapport à quoi ? au navigateur (position:fixed) ou à la page (position:absolute) ou au contenu environnant (position:relative ou static)

...

Si c'est pas rapport au navigateur, ben position:fixed et tu mets une marge du haut pour ton contenu grande comme tous les éléments supérieurs qui sont fixed... (pigé ?) ...

Voila ;)
__________________________
Sujet résolu ? Pensez à mettre le tag

Un problème en C# ? Vérifiez celui-ci n'est pas déjà résolu dans la FAQ et que le sujet n'est pas traité parmis les tutoriaux ou les articles avant de poster dans le forum C#.

HAUT DE PAGE

gaou
Nouveau membre

Inscrit : 24/06/2007
Messages : 5

#136904 Posté le 24/06/07 à 19:39

punaise, nikel !! les choses ont l'air si simple quand tu les expliques Smiley

!!!

bon, juste parce que j'ai le soucis du détail, j'ai quand même remarqué que dans IE, tout sortait nikel, cependant, dans Firefox, la bordure droite et gauche au niveau de l'entete bouge en fonction de la position de la scrollbar !! en gros, on dirait que la bordure ne s'aplique qu'au contenu, et que lorsque le contenu passe sous l'entete (par défilement de la barre) alors on voit la bordure dépasser de l'entete !!

l'idéal serait que ça fasse comme dans IE, la bordure est partout, et on a pas l'impression qu'elle bouge avec la barre !!

2eme petit détail, toujours dans Firefox, la bordure basse du menu est 1px en dessous de la cellule on dirait (si tu regarde sous la celule coloriée en gris, tu verra, il y a 1px blanc sur toute la largeur) !!

Voilà, si tu trouve t'es un champion, mais tu m'as déjà enlevé une sacrée épine du pied, un grand merci !!!

HAUT DE PAGE

Czayfaboo
Co-Administrateur
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 2862

#136908 Posté le 24/06/07 à 22:33

T'inquiete que j'ai fait bien pire... C'est vraiment pas évident d'adapter une feuille de style entre IE et FF et d'avoir en plus ce qu'on veut... au mieux on a quelque chose de satisfaisant dans les cas extrèmes... Si tu veux vraiment voir ce qu'est une galère css entre IE et FF, amuse toi à faire des liste non organisées (ul), à les mettres en position inside (list-style-position: inside) et à essayer de régler exactement le rendu de la même manière (avec une list-style-image genre flèche comme tu peux voir dans les menus de moteurprog sur la gauche)... Ben çà, c'est vraiment la rouille... Truc de fou quoi !!! Smiley

Et c'est bien simple à comprendre quand on débug la liste... En fait, IE gère de manière totalement différentes les listes ul que FF... Je passe les détails, je te laisserais découvrir le problème quand il t'arriveras... C'est vraiment... Hot !

Sinon, ton pb, ben c'est encore pck tu t'y es mal pris (ton tableau était horrible)... (€dit : pas méchant... surtout normal en fait quand on s'est pas tapé 10 000 lignes de css à débugger)
Alors je t'ai repris quelques trucs et corriger d'autres... A toi de voir ce qu'il y a à prendre...

Le HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>.:: Gaouprod ::.</title><meta content="DF" name=".::GaouProd::."><link media="screen" rel="stylesheet" href="style.css" type="text/css"></head> <body> <div id="entete"> <a href="http://gaouprod.free.fr/index.php"><img style="border: 0px solid ; width: 720px; height: 190px;" src="http://gaouprod.free.fr/images/entete.jpg" alt="entete.jpg"></a> </div><div id="fixed"> <div id="menu"> <table> <tr> <td></td> <td>Video</td> <td>Musique</td> <td>Contact / Livre d'or</td> </tr> </table> </div> </div> <div id="contenu"> Soyez les bienvenus sur ce site !!!<br/><br/>Ce site est là pour vous montrer mes projets audiovisuels, et également vous faire partager certaines techniques utilisées dans ces créations (notament grâce au logiciel 3D Open source Blender) !!<br/><br/>Vous pourrez bientôt découvrir mes projets vidéos et musicaux !!<br/><br/><br/> <div> <div id="cv"><span style="font-weight: bold;">Mini CV</span><br/><ul><li>Prénom / Nom: David Fabre</li><li>Age: 22 ans</li><li>Formation: <ul><li>En préparation de BTS audiovisuel (opt montage et post-production)</li><li>2007 Licence en art du spectacle (cinema, audiovisuel, multimédia)</li><li>2004 Bac S (opt Science de l'Ingénieur)</li></ul></li><li>Centre d'interet: Video (montage, trucage, 3D, compositing) et musique bien entendu !!!</li><li>Signe particulier: <img class="fish" src="images/christfish.jpg" alt="ichtus">....   <img class="fish" src="http://smileys.sur-la-toile.com/repository/Content/0001.gif" alt="clin d'oeuil"> !!!</li></ul></div> <div class="lecteuracc"></div> </div><br/><br/><span style="font-weight: bold;">TRES BIENTOT</span>: écoute et télécharge mes musiques en Creative Commons, spécialement faites pour les films !!<br/> </div> <div id="pied"> <strong> 3</strong> visiteurs dont <strong> 3</strong> aujourd'hui sur http://gaouprod.free.fr/</div> </body> </html>

Le CSS :

/* Generated by KaZcadeS */ body { margin: auto; font-family: Arial,Helvetica,sans-serif; background-color: white; width: 720px; font-size: 12px; color: #990000; z-index: 1; } html { background-color: #810507; } #entete { z-index: 2; position: fixed; top: 0; } #pied { border-top: 1px solid #000000; background-color: #cccccc; width: 720px; z-index: 2; position: fixed; bottom: 0; } #menu, #menu a:link, #menu a:visited { font-family: Arial,Helvetica,sans-serif; color: #000000; font-size: 10px; position: fixed; top: 190px; z-index: 2; text-decoration: none; } #menu a:hover { text-decoration: none; font-weight: bold; } #menu a:active { color: #ffffff; font-weight: bold; background-color: #000000; } #menu table { width:720px; height:15px; border-bottom: 1px solid #000000; border-collapse:collapse; } #menu table td { width:300px; background-color:#CCCCCC; } /* Premiere colonne et + du tableau */ #menu table td + td { width:140px; text-align:center; background-color:#FFFFFF; } /* Deuxième colonne et + du tableau (redéfinitions) */ #contenu { padding: 25px 15px 15px; padding-bottom: 25px; margin-top: 205px; z-index: 1; height: 100%; } #cv { border: 1px solid #cc0000; padding: 10px; color: #ff6600; font-size: 10px; width: 250px; background-image: url(images/pel.jpg); background-position: right top; background-repeat: no-repeat; } .fish { display: inline; position: relative; top: 5px; }

Voila... J'ai réglé le pb de la bordure de menu... C'est normal que ca déconnait vu que tu l'avais attribuées à l'ensemble du div (#menu) au lieu de l'attribuer au tableau...
J'ai complètement viré les bordures noires sur le côté... et j'ai pas eu le temps de les remettres... mais c'est pas bien diffcille... Suffit de prendre chacun des gros blocs contenur (entete, contenu, menu) et de leur ajouter des border left et right (faudra peut etre redimensionner alors le conteneur en question pour que ca marche nikel à la fois sous FF et IE)...

Sinon, encore quelques conseilles :
- quand tu fais un table : n'utilise aucun attribut (genre border, cellspacing, cellspading, width, height...) pareil pour les tr, les td & co... passe exclussivement par la feuille de style (utilise l'opérateur + à bon escient et tout marchera nikel (+ veut dire la balise qui suit... ex : table td + td désigne toutes les balises td à partir de la deuxième colonne... pour atteindre la troisième : table td + td + td)...
- pas d'accents directement dans le html... passe par les équivalents (pour l'internationalisation et le respect des normes... ex : é doit être remplacé par é ... à par &agrave. ... etc. )...
- et y'en a d'autres... mais suite au prochain épisode Smiley

PS : T'avais la foi n'empeche : mettre des border-left & right directement dans le body... lol Smiley

y'a que IE pour faire marcher un truc pareil...

PS 2 : Si tu veux voir ce que rend ton site vis à vis des respects des standards... ben installe opera (opera.com) qui respecte à 100% les normes... et tu verras le rendu exact de ce qui est codé ! Ca peut parfois bien différer de FF et de IE... mais vu que ton site est tout petit, ben ca va, t'as exactement le meme rendu sur les 3 navig avec le code que je viens de te passer... (te reste juste à ajouter les border left & right)...
__________________________
Sujet résolu ? Pensez à mettre le tag

Un problème en C# ? Vérifiez celui-ci n'est pas déjà résolu dans la FAQ et que le sujet n'est pas traité parmis les tutoriaux ou les articles avant de poster dans le forum C#.

HAUT DE PAGE

gaou
Nouveau membre

Inscrit : 24/06/2007
Messages : 5

#136966 Posté le 25/06/07 à 22:21

NIKEL !! j'ai remplacé le code, c'est parfait, vraiment merci pour le temps que tu as passé à m'expliquer tout ça et a revoir ma source, c'est super sympa de ta part !! Smiley

j'ai un ptit peu galéré pour redimensionner le contenu (bon, ya un tout petit pixel de defaut, j'ai pas réussit à trouver d'où ça pouvait venir, mais ça se remarque pas trop, ça va) !!

vraiment je te remerci beaucoup, j'ai beaucoup apris rien qu'avec ça, top !!

HAUT DE PAGE

Czayfaboo
Co-Administrateur
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 2862

#136996 Posté le 26/06/07 à 11:09

Je rajoute à présent quelques conseils d'ordre esthétique (un avis graphique sur ton site en gros)...

Le menu : je n'aime pas trop le fond gris à gauche... ptèt qu'en dégradé ca serait mieux (passer par un background de 1px de large). Les liens du menu sont moches à l'état hover... Texte blanc sur petit fond noir, c'est vraiment pas terrible... Change juste la couleur du texte çà peut suffir...
Rq : Tu peux faire des menus très jolis avec plusieurs background-image (des fonds quoi)... Utiliser des séparateurs & co (exemple qui me passe par la tete Smiley

: ici... Look le menu orange tout en haut).

Le reste : ben sur un petit écran çà va... C'est pas mal... Mais quand j'ai débuggé ton site ce week j'était sur un 17 widescreen et je crois me rappeller que la barre du bas (cf. conteur) restaient collée en bas du navigateur au lieu de se coller en bas de la zone de contenu... Ca faisait un gros trou en rouge (la meilleure solution est d'étendre le contenu avec fond blanc de manière à ce qu'il occupe toute la haute du navigateur).

Léger détail : au lieu de faire des appels à index.php (cf. clic sur la caméra ou éventuels futurs argu (cf. ?arg1=val&arg2=...)), tu peux simplement taper ? (eh oui, vu que la page index est la page principale, la redirection est automatique)... Ca fait plus joli de ne pas voir le index.php dans la barre d'adresse...

Voila...

Juste mon point de vue Smiley

__________________________
Sujet résolu ? Pensez à mettre le tag

Un problème en C# ? Vérifiez celui-ci n'est pas déjà résolu dans la FAQ et que le sujet n'est pas traité parmis les tutoriaux ou les articles avant de poster dans le forum C#.

HAUT DE PAGE

gaou
Nouveau membre

Inscrit : 24/06/2007
Messages : 5

#137042 Posté le 26/06/07 à 18:24

ok parfait !! alors je te répond pour certains trucs, et j'en profite pour te poser des questions d'ordre technique pour d'autres !!

-pour le fond gris a gauche du menu, je ne comptais pas le laisser, en fait, c'était juste pour marquer l'emplacement d'un futur lecteur de mp3 que je positionnerait exactement là (voilà le lecteur en question si ça t'interesse: Music Player Slim) )

!!! figure toi qu'au moment où je t'écris, je me rend compte de ma betise, je pensais que de le mettre là permettrai que le morceau ne se recharge pas à chaque fois qu'on change de page, mais je viens tout juste de me rendre compte que ce ne serait pas le cas, quel c** !!

-pour les liens, effectievement, l'état hover est moche, et c'était pas ça a la base que je voulais, mais j'ai galérer pour rien hier à essayer des trucs qui n'ont pas marchés !! Ma première idée, c'était que ce fameux fond noir couvre toute la celulle, plutot que seulement la grandeur du mot, je pense que ça l'aurait mieux fait, mais j'ai pas trouvé comment faire !! j'ai essayé de rajouter des classes aux <td> pour modifier le css des cellules, sans résultats !! j'ai du foiré !!

-pour le pied de page, je l'ai fixé aussi !! mais c'est vrai que des fois, y'a cette petite bare rouge dû à une page (contenu, ou autre) qui se termine pas !! j'ai pourtant mis height: 100% avec un padding-bottom: 25px aux propriétés css du contenu !! comment fais tu pour que chaque fois le puisse aller jusqu'en bas ??!!

et pour la ptite question, j'ai remarqué, en jonglant sur le peu de page que j'ai pour le moment, que des fois, l'ensemble se décallait légerement de quelques pixels !! sais-tu a quoi c'est dû ??

HAUT DE PAGE

Czayfaboo
Co-Administrateur
Superviseur :
- Langages Dot.
Modérateur :
- CSharp (C#)
Chef de projet(s) :
- ID3.NET Library
- MoteurProg Work.

Inscrit : 05/01/2005
Messages : 2862

#137207 Posté le 28/06/07 à 13:38

Pour la ptite question, met une page dans la section vidéo que je puisse y voir quelque chose...

Pour le lecteur mp3, tu peux le faire de différentes manières :
- charger le contenu de ton site dans une iframe... Ca te permet de ne recharger que ce qu'il y a dans la iframe et pas le reste...
- utiliser du Ajax (qui te permet de rafraichir n'importe quel morceau de ton site sans tout recharger forcément...).
- passer par Javascript (très déconseillé selon moi)

Le choix 1 est le plus simple à mettre en oeuvre. Le 2, ben c'est du Ajax, je sais juste que çà marche à peu près comme çà mais j'ai jamais vu une ligne de code de Ajax de ma vie... le 3e, à éviter mais c'est possible en principe...
__________________________
Sujet résolu ? Pensez à mettre le tag

Un problème en C# ? Vérifiez celui-ci n'est pas déjà résolu dans la FAQ et que le sujet n'est pas traité parmis les tutoriaux ou les articles avant de poster dans le forum C#.

HAUT DE PAGE


	Page précédente	Page suivante
FORUM XHTML/CSS

PAGE : [1]

.: Site Web développé par Julien Pichot et l'équipe MPWG avec www.evolvia-web.com :.