28220 sujets

CSS et mise en forme, CSS3

[résolu]Texte sur 2 colonnes

Bonsoir,

malgré toutes mes recherches sur ce forum et ailleurs, je ne parviens pas à obtenir une mise en page correcte de texte sur 2 colonnes.
- Sous Mozilla (Gecko), la mise en page passe pourvu que la fenêtre du navigateur occuppe la taille de l'écran. En revanche, si je réduis la largeur de la fenetre du navigateur, l'ensemble des composants css sur du cadre body.
- Sous IE, la mise en page sors du cadre que la fenetre du navigateur soit maximale ou non. De plus la seconde colonne s'affiche dans la diagonale de la 1ère.

Trève de discours, voici le rendu sous Mozilla :
upload/1321-site.jpg

Voici une version simplifiée de ma CSS :

body {
margin:0px;
padding: 0px;
background : #f9faff url(../images/bg.png) repeat-y center;
}
div#page {
position: relative; /* on positionne le conteneur */
margin-left:auto;
margin-right:auto;
padding : 0;
height : 100%;
width : 740px;
font-family : Helvetica, Arial, sans-serif;
text-align : justify;
}
div#column2 {
position:relative;
margin-left:auto;
margin-right:auto;
float: left;
padding : 0;
    width: 100%;
}
div#column1 {
padding: 0px;
width: 100%;
}

div#colgauche {
	padding: 10px;
	width: 345px;
	float: left;
}
div#coldroite {
	padding: 10px;
	margin-left: 360px;
	}
.spacer {
  clear: both;
padding-bottom:1px;/*Netscape 6 & 7*/
}


Envoi voici le code html :

<body>
  <div id="page">
<div>
    <h1>Accueil</h1>
    <div id="column2">
      <div id="column1">
        <div id="colgauche">
        blablabla
        </div>
         <div id="coldroite">
        blablabla
        </div>
      </div>
     </div>
</div>
</div>
</body>


J'espère ne pas oublier de détails. Smiley rolleyes
Une idée du problème siouplait ? Smiley decu

--
Marc
sioups,
précision sans doute inutile mais sait on jamais,
les textes sur une colonne s'affichent correctement.
Etrange

--
Marc
J'avoue que je n'ai pas trop compris ton problème. Chez Moi ça s'affiche pareil dans les 2 navigateurs. Tu peux cependant définir tes largeur en pourcentage afin que tes colonnes ne disparaisssent pas quand tu réduis la fenêtre de ton navigateur.
Essai un truc comme ça :

<style>
p {
margin:10px;
}
#page {
background-color:green;
font-size:2em;
overflow:hidden;
width:100%;
}
#Header {
background-color:red;
border:1px solid red;
}
#colgauche {
width: 48%;
float: left;
background-color:#FF0;
display:inline;
border:1px solid yellow;
margin:10px;
}
#coldroite {
margin:10px;
background-color:#FF0;
margin-left	:52%;
border:1px solid yellow;
}
</style>
</head>

<body>
<div id="page">
	<div id="Header"><h1>Accueil</h1></div>
	<div id="colgauche"><p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p></div>
	<div id="coldroite"><p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p></div>
</div>
</body>
</html>
merci pour l'idée sur les
a écrit :
largeurs en pourcentage.

Je vais le tester.
Mais tu m'as donné une autre (meilleurs ?) piste, en insérant le mot clé 
overflow:hidden;
dans le bloc page.
Je l'ai inséré dans ma css et je n'observe plus de bordure de page ( 
bg.png
) qui s'affiche au dessus du texte lorsque que je réduis la fenêtre du navigateur.
Cela donne le code suivant :

body {
margin : 0px;
padding : 0px;
background : #f9faff url(../images/bg.png) repeat-y center;

}
div#page {
margin-left: auto;
margin-right: auto;
padding : 0;
height : 100%;
width : 740px;
overflow:hidden;
font-family : Helvetica, Arial, sans-serif;
font-size : 12pt;
text-align : justify;
}

Pourtant, je ne comprends pas pourquoi ce problème a été résolu de cette manière. Selon http://www.ultra-fluide.com/ressources/css/template-css2.htm[/url] ,
a écrit :

Overflow:hidden.
overflow:hidden rend invisible un contenu qui dépasse, mais ne le supprime pas.

D'après cette définition, je devrais avoir sans doute du contenu effacé, et non recadré à l'intérieur de ma page. Smiley eek Si je comprenais le phénomène, ce serait mieux, mais déjà sur ce point ça marche. Smiley biggrin

Reste un problème bien visible :
mes 2 colonnes ne s'affichent pas côte à côte mais suivant une diagonale dans ce satané IE. Une idée ? Smiley apartee Je me retiens d'insérer un petit code Javascript : veuillez utiliser un navigateur moderne et non buggué par consulter mon site. [/apartee] (Oui bon, hein, le bug pourrait aussi venir de moi, je vais rester un peu modeste Smiley cligne ).

--
Marc
Je ne comprends pas trop ton histoire de png en background. Tu me dis que si tu réduis la taille de la fenêtre le background passe par dessus le texte ?
Pour ce qui est de la disposition en "diagonale", je ne comprends pas trop là non plus ce que tu veux dire. Essai de mettre des bordures à tes cadres colonnes pour empêcher la fusion des marge. C'est peux être là ton problème.

Je ne comprends pas trop ton histoire de png en background. Tu me dis que si tu réduis la taille de la fenêtre le background passe par dessus le texte ?

Je me suis pas tout à fait bien exprimé. Il s'agit d'un problème de bordure de page qui passait sous (et non sur) le texte lorsque que je minimisais la fenetre du navigauteur. L'image que j'ai collé en début de post illustre le problème. Je l'ai résolu en ajoutant un 
overflow:hidden;
dans mon bloc div#page comme tu me l'as suggéré. Smiley smile .
Un petit café et je regarde l'histoire des bordures.

--
Marc
euh, elle était en background ?
Mes excuses, c'est la première image que j'envoie. Et pourtant, je la lis sans probllèmes depuis le forum. Je serais le seul à avoir les droits de lecture dessus ?
La revoici :
upload/1321-1321-site.jpg

--
Marc
non je parle de ça :

a écrit :
body {
margin:0px;
padding: 0px;
background : #f9faff url(../images/bg.png) repeat-y center;
}
ok,
le but était justement qu'on voit cette image et le fond, et que ceux-ci s'affichent de manière propre. Et surtout la bordure ( bg.png ) doit encadrer le texte et non se déplacer dessous lorsqu'on redimensionne la fenêtre du navigateur.

a écrit :

Pour ce qui est de la disposition en "diagonale", je ne comprends pas trop là non plus ce que tu veux dire. Essai de mettre des bordures à tes cadres colonnes pour empêcher la fusion des marge. C'est peux être là ton problème.

J'ai inséré des bordures autour de mes blocs, cela ne change rien au problème.
J'ai aussi regardé le lien http://pompage.net/pompe/margesnegatives/[/url] sur les marges négatives. Comme Internet Explorer ne gère pas les marges de la même manière que Mozilla, le problème vient peut être de là.

Faute de pouvoir résoudre le problème, je mettrai sur ma page d'accueil un petit message tel qu'ici : http://citron-vert.info/breve.php3?id_breve=15[/url] , tout en m'excusant pour les malheureuses victimes d'Internet Explorer.

--
Marc
J'ai pas trop d'idée là. D'autant plus qu'avec ton code je ne vois pas de décalage sous IE. Mais tu peux toujours faire un commentaire conditionnel si ce bug te résiste.
mathmax a écrit :
J'ai pas trop d'idée là. D'autant plus qu'avec ton code je ne vois pas de décalage sous IE. Mais tu peux toujours faire un commentaire conditionnel si ce bug te résiste.

Qu'entends tu par bug conditionnel ?
Je vais en fait considérer le bug comme contourné. J'en ai assez de faire de l'acharnement thérapeutique. Je vais désormais conseiller aux gens qui consultent mon site de choisir un navigateur libre à base Gecko (ce qui représente déjà la majorité des connexions sur mon site) ou à défaut le navigateur Opera.

En fait, comment fait on pour marquer le message [Resolu} ou [Contourne] SVP ?

--
Marc

---------------------------------------------------------------------------------------
Merci beaucoup pour ces conseils !

Comme je suis désormais très désapointé par IE et que ça je déteste Smiley fache , mon site sera désormais affublé d'un message qualifiant les utilisateurs de IE de parias (enfin je veux dire de gentils parias, je suis tout de même un persécuteur modéré Smiley cligne ).
Bon sérieusement, ça me semble difficile par les jours qui courent de faire des CSS un peu complexes tout en faisant de sorte qu'elles restent compatibles avec IE. J'en me demande si la solution n'est pas d'être élitiste, d'arrêter de faire des patches pour ce malade incurable IE et faire comprendre aux gens qu'ils doivent utiliser autre chose ...

Je suis content d'avoir appris plein de choses via ce post, mais que de temps passé là dessus, qui restera à jamais inemployé pour améliorer le look de mon site ou programmer entre autres.

Pour les commentaires conditionnels,
la syntaxe exacte est dans mon cas 
<style type="text/css">
div#coldroite{margin-top:-435px;}
</style>
<![endif]-->
.

Je lirai désormais la faq et la tournerai 7 fois dans ma tête avant de répondre. (Bien reçu Smiley ohwell )

--
Marc
Modifié par marco (13 Nov 2005 - 01:53)
Un commentaire conditionnel c'est un bout de code html qui n'est vu que par certaines versions de Internet Explorer. Ca permet de corriger des bugs propre à IE. Par exemple dans ton cas, si ta colonne de droite est un peu plus basse que celle de gauche, tu peuc écrire un commentaire conditionnel dans ta page html du style (le code ne s'affiche pas bien ici ) :

<!--[if IE]>
#ColonneDroite {margin-top:-20px;}
<![endif]-->


Celà aura pour effet de relever un peu ta colonne de droite (dans IE seulement) Smiley cligne

Tu peux voir ici les commentaires conditionnels qui peuvent s'utiliser pour les différentes versions d'IE

Voilà. J'éspère que ça résoudra ton bug. Smiley smile

PS : Pour marquer un sujet [résolu], tu va sur ton post, puis tu fais "éditer" en haut de ton message, puis tu modifi le titre de ton sujet en ajoutant [résolu]
Modifié par mathmax (13 Nov 2005 - 00:50)
Sujet clos
Aller à