[CSS] J'ai un problème avec mon beau div

J'ai un problème avec mon beau div [CSS] - HTML/CSS - Programmation

Marsh Posté le 17-07-2005 à 23:45:17    

Bonsoir :)
 
J'ai un problème que je n'arrive pas à résoudre !
 
Voici mon site dans son état actuel :
http://meow.hd.free.fr
 
Avec Firefox, le site s'affiche "assez bien", car comme je le veux, il y a une sorte de page blanche. Bon, première problème, si vous rétrécissez la taille de votre firefox de manière à ce que le contenu dépasse celui du navigateur, lorsque vous scrollez vers le bas, vous remarquerez que le texte s'en va du div ! (bon il faut faire attention car vu que le texte est en noir et que le fond est en noir on le voit pas mais si on le sélectionne on voit bien qu'il sort).
 
Second problème, toujours avec ce même div (!), sous Internet Explorer... suffit d'essayer... la page n'apparait carrément pas !
 
Que dois-je faire pour avoir la page comme je la souhaite ?
 
Je vous remercie de votre aide :bounce:

Reply

Marsh Posté le 17-07-2005 à 23:45:17   

Reply

Marsh Posté le 17-07-2005 à 23:56:32    

ça vient de ton height: 100%; dans .page . Quand tu resize ta page, le "100%" n'a plus la même valeur, donc logiquement ton div rétrécit. Quand à IE, je crois qu'il gère difficilement le height: 100%;.

Reply

Marsh Posté le 18-07-2005 à 00:07:09    

Oublie les positionnements absolus pour ce genre de design ...
T'as l'impression que c'est peut-etre plus pratique mais le fait est que tu ne maitrises pas cette notion et que tu as des effets de bords que tu ne comprends pas.
 
http://css.alsacreations.com/modeles/modele8.htm
Un exemple de design fluide (extensible) qui ressemble a ce que tu souhaites faire. Adapte le a tes besoins.

Reply

Marsh Posté le 18-07-2005 à 09:39:02    

Merci beaucoup, je vais essayer de m'adapter à partir de ce modèle...
 
Petite question avant de commencer : j'avais également essayer de mettre ce div là en autre chose qu'absolute (en normal et en relative), et j'arrivais jamais à spécifier les attributs left et right ! En effet je veux garder cet effet avec les bords sur les côtés, et du coup je dois spécifier ces deux valeurs... et en autre chose qu'absolute ça fonctionnait pas.
 
Normal pas normal ?

Reply

Marsh Posté le 18-07-2005 à 10:03:17    

position: normal n'existe pas.
Par defaut c'est static.
Les proprietes left et right n'ont de sens que pour position absolute ou relative ou fixed.
 
Tu peux te renseigner sur les proprietes CSS "float" et "clear".

Reply

Marsh Posté le 18-07-2005 à 10:39:25    

Quand je disais normal je pensais à ... quand on met rien ;) Donc comme tu le dis, c'est static mais comme j'avais oublié... :/
 
Je vais me renseigner sur float et clear, float j'ai compris le procédé, mais il me manque quand même beaucoup de pratique dans tout ça...  
 
Merci beaucoup je pense que je vais y arriver maintenant !

Reply

Marsh Posté le 19-07-2005 à 19:54:01    

Bon en fait mon problème ne s'arrange pas :)
J'arrive sans problème à adapter ce style qui convient à mon site : http://css.alsacreations.com/modeles/modele4.htm !
 
Le problème c'est que... essayez d'enlever du contenu de la div du centre, et vous verrez que le menu sera rogné ! La solution serait de définir une height minimal mais je crois pas que ce soit possible...
 
Merci de vos idées :p

Reply

Marsh Posté le 20-07-2005 à 08:17:55    

Bien sur que si c'est possible ...
 
min-height ca sert à quoi à ton avis ?
 
Bon c'est pas reconnu comme IE, pour lequel un height fait la même chose ...
 
Donc moi, je conseillerais le positionnement flottant, comme la : http://test.roane-irkana.net/2_cols_fluide.htm
 
Evidemment, la ou j'ai mis des classes, la plupart du temps faut plutot mettre des id, mais bon le point est plus rapide  à taper pour moi que le dièse, donc voila ...  
 
Un jour je corrigerai ^^'


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 11:18:10    

Merci ta solution marche PARFAITEMENT :) Et pourtant j'ai regardé plein de débats sur le sujet et beaucoup en venait aux tables... ce que je voulais absolument éviter... par fierté ? :p
 
Bon en tout cas j'admet que je ne comprend pas trop bien la notion de floating et ce que signifie "clear", même si j'ai été voir quelques explications...  
 
Par contre, si j'enlève min-height, sous firefox, le positionnement flottant ne fonctionne pas, et j'ai mon menu qui est rogné à nouveau ! En fait ça marche bien avec min-height ET le positionnement flottant... l'un pour Firefox, l'autre pour IE. Normal ?
 
Sinon j'ai un autre problème, j'ai une sorte de fenêtre de chat en FIXED, qui fonctionne très bien sous Firefox... comment la faire fonctionner de la même façon sous IE ? Merci encore :)

Reply

Marsh Posté le 20-07-2005 à 11:31:24    

Deux secondes ... c'est ma version en positionnement absolu la oups ^^'
 
Je te mets la version avec float dans quelques minutes
 
Sinon le position:fixed n'est pas reconnu sous IE. Y a des trucs pour émuler, mais c'est crade.
 
Edit : version en flottant, légèrement corrigée. Enjoy :)


Message édité par plainsofpain le 20-07-2005 à 11:36:12

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 11:31:24   

Reply

Marsh Posté le 20-07-2005 à 11:52:15    

Merci beaucoup là ça marche sans le min-height, c'est parfait ! Bon dommage pour le fixed... il faudrait que je fasse le positionnement en javascript, mais bon ... voilà c'est pas très "beau"... je crois que tout simplement je vais virer le chat sous IE et ça sera tout ! D'ailleurs y'a t-il une possibilité de faire des conditions en CSS ? Genre... IF IE IS DETECTED ? :p

Reply

Marsh Posté le 20-07-2005 à 11:55:40    

non :o
 
Mais pourquoi un chat positionné en fixed ?
 
Crée une page rien que pour lui ou il sera dans le flux :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 12:02:47    

En fait je veux qu'il soit visible de partout :) C'est un tout petit truc ! :)

Reply

Marsh Posté le 20-07-2005 à 12:04:37    

ben abandonne cette idée, ou utilise le hack IE7 :
 
http://dean.edwards.name/IE7/


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 20-07-2005 à 17:49:20    

J'ai essayé IE7 je suis pas totalement convaincu, en plus ça fait ramer j'ai l'impression :/
Bref, je me suis plutôt décidé à mettre une mise en garde à ceux qui ont IE pour qu'ils aillent s'installer Firefox eheh, et sous IE je désactive le chat...
Merci pour toute votre aide :)

Reply

Marsh Posté le 21-07-2005 à 08:57:42    

De rien :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed