mise en page css

mise en page css - HTML/CSS - Programmation

Marsh Posté le 20-03-2004 à 15:37:47    

Voilà, sur cette page: http://xmail.blognote.be/main_light.htm j'ai 2 blocs. J'aimerais que le bloc vert, celui de droite, reste à la droite du bloc bleu en toute circonstance, or quand je redimensionne ma fenêtre le bloc vert passe en dessous du bloc bleu  :(. Y a-t-il un moyen pour que ce bloc reste à la droite du bloc bleu et que les scrollbars apparaissent au lieu de ce retour à la ligne?
 
Merci  :)

Reply

Marsh Posté le 20-03-2004 à 15:37:47   

Reply

Marsh Posté le 20-03-2004 à 15:43:28    

enlève le float du second et remplace-le par une marge.

Reply

Marsh Posté le 20-03-2004 à 15:56:17    

J'ai changé, mais sous IE ça change rien, ça passe toujours en dessous mais décallé de x pixels de marge, par contre sous Firefox ça marche mais mon texte sort du cadre vert alors que pour le bien il devrait s'élargir. Une solution?
 
Merci :)

Reply

Marsh Posté le 20-03-2004 à 15:57:15    

ok, dans ce cas, inclu le premier dans le second.
 
EDIT: et retire la marge.
 
Mais c'est bizarre qu'il fasse cela.


Message édité par gizmo le 20-03-2004 à 15:58:02
Reply

Marsh Posté le 20-03-2004 à 16:20:17    

En supprimant l'attribut 'height' IE veut bien le laisser à côté  : http://xmail.blognote.be/main_light.htm, mais ça m'arrange pas trop... Si je mets le bloc bleu dans le bloc vert, visuellement ça correspond plus à ce que je veux mais en plus quand je redimensionne ma fenêtre le texte dans le bloc vert vient se mettre en dessous du bloc bleu :/
 
En gros c'est pas possible si je comprends bien? Si je le fais avec un tableau de 2 colonnes ça ira mais la mise en page par tableau c'est pas vraiment génial...

Reply

Marsh Posté le 21-03-2004 à 11:44:41    

Je sais pas si j'ai bien compris, mais moi pour avoir 2 divs l'un a cote de l'autre, j'utilise cette methode :
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Reply

Marsh Posté le 21-03-2004 à 14:57:19    

yeffries > Le prob est le même sur cette page, quand tu réduis ta fenêtre en largeur la 'Right Col' passe en dessous des autres et ne reste pas à leur droite.

Reply

Marsh Posté le 21-03-2004 à 17:40:31    

En mettant ça sur le div qui contient les autres div =>
 
min-width:780px;  /* au pif, 780 */
width:expression(document.body.clientWidth < 780? "780": "auto" );
 
 
ça empêche le div de droite de se mettre sous le div de gauche, normalement. Desolé si je réponds à côté de la plaque.  :)  

Reply

Marsh Posté le 21-03-2004 à 20:10:09    

Ca a rien changé ça  :( Par contre en bricolant un peu je suis arrivé à ça: http://xmail.blognote.be/suite.htm mais maintenant le prob c'est que je voudrais que le cadre de droite (le bleu) prenne la largeur restante. En ne lui donnant pas l'attribut 'width' sou Firefox il prend bien toute la largeur restante mais sous IE il passe à la ligne  :fou: Je peux lui donner une largeur par javascript en fonction de la résolution mais il y a peut-être un autre moyen?
 
En tout cas merci pour votre aide  :)

Reply

Marsh Posté le 22-03-2004 à 01:31:02    

en pourcentage (width : 100%; ) ça marche pô ?


Message édité par Master p le 22-03-2004 à 01:31:31
Reply

Marsh Posté le 22-03-2004 à 01:31:02   

Reply

Marsh Posté le 22-03-2004 à 12:59:09    

Si je mets width : 100%; sous IE ça passe impec, il me prend l'espace restant, mais sous Firefox il me crée un bloc de la largeur totale de mon écran. Comme j'ai déjà un petit bloc sur la gauche le tout est beaucoup trop large. Par contre quand je ne spécifie pas de largeur Firefox me prend bien l'espace restant et IE me met un retour à la ligne :( Bref, le compromis est difficile à trouver!

Reply

Marsh Posté le 22-03-2004 à 21:00:12    

Amigo ... j'ai pri ton premier code est si j'ai bien compris ce que tu veut, ca marche impec ...
 
le probleme vient du fait que tu a mis un loooooooooooonnnnng mot que l'on ne peut pas couper au milieu ...
 
j'ai simplement séparer le mot  avec de petit escape parci-par-là et ca marche bien ...
 


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 22-03-2004 à 21:26:44    

oui c'est normal le long mot, il est possible que ça arrive, pour le cas des mots on utilise wordwrap et on en parle plus, mais dans mon cas c'est pour un webmail, et ce qui arrive c'est que le contenu d'un mail peut être plus large (un tableau ou une image par exemple) que l'espace disponible et dans ce cas là mon code css est pas intéressant car ce fameux problème de bloc. Don en gros pour le moment ce que je cherche c'est que soit mon deuxième bloc s'elargisse par rapport à la taille de son contenu, mais ça ne le fait pas sous IE ET Mozilla en même temps(retour à la ligne). Ou alors j'utilise la propriété overflow sur le 2e bloc et je donne à  ce bloc toute la largeur restante (100%), mais ça ne le fait pas non plus sous IE ET Mozilla en même temps. Donc en gros mon prob est devenu un prob d'interprétation différente du code sous IE et Mozilla.

Reply

Marsh Posté le 22-03-2004 à 21:36:30    

malvino a écrit :

oui c'est normal le long mot, il est possible que ça arrive, pour le cas des mots on utilise wordwrap et on en parle plus, mais dans mon cas c'est pour un webmail, et ce qui arrive c'est que le contenu d'un mail peut être plus large (un tableau ou une image par exemple) que l'espace disponible et dans ce cas là mon code css est pas intéressant car ce fameux problème de bloc. Don en gros pour le moment ce que je cherche c'est que soit mon deuxième bloc s'elargisse par rapport à la taille de son contenu, mais ça ne le fait pas sous IE ET Mozilla en même temps(retour à la ligne). Ou alors j'utilise la propriété overflow sur le 2e bloc et je donne à  ce bloc toute la largeur restante (100%), mais ça ne le fait pas non plus sous IE ET Mozilla en même temps. Donc en gros mon prob est devenu un prob d'interprétation différente du code sous IE et Mozilla.


 
Je suis désoler, mais je ne comprend pas bien ou tu veut en venir ...


---------------
Tout n'est descriptible que du point de vue de l'observateur, donc sûrement faux pour le reste du monde.
Reply

Marsh Posté le 22-03-2004 à 22:06:29    

Je te donne un exemple. Je suis en 1024x768. Ma colonne de gauche fait 200, il me reste un truc comme 800 pour afficher le contenu d'un mail dans le bloc de droite. Si dans ce mail il y a, par exemple, un tableau de 1000 de large (donc plus large que mes 800 restants), dans ce cas j'ai 2 comportements, soit le bloc contenant le tableau trop large passe en dessous du bloc de '200', comme sur cette page (http://www.pixy.cz/blogg/clanky/css-3col-layout/), tu réduis la largeur de la fenêtre et les blocs passent les uns en dessous des autres. J'ai bien trouvé une solution mais les comportements sont différents sous IE et Mozilla.
Ou alors j'utilise la propriété overflow comme sur cette page : http://xmail.blognote.be/suite.htm mais je ne sais pas donner au 2e bloc (bleu) tout le restant de la largeur car IE et Mozilla calculent différement apparement.
 
En espérant avoir été plus clair...

Reply

Sujets relatifs:

Leave a Replay

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