I E // stress [Résolu]

Question

FranZz

24 Oct 2007 à 16:34

Stress- Mon texte ne s'affiche pas ou il devrait.
Il est rejeté en bas de page. Smiley biggol

En visu, voici:
Modifié par FranZz (13 Dec 2007 - 12:01)

FranZz

24 Oct 2007 à 16:36

Ankart

24 Oct 2007 à 16:41

Le "bloc" qui sort est il en float ? si c'est le cas peut etre que la fonction "clear" peut resoudre le probleme pour que tes flottant puissent etre sur la meme ligne horizontal...Difficile sans code tellement d'autres possibilités.

FranZz

24 Oct 2007 à 16:47

Bon, pour une entrée en matière, je fais fort...

Alors, voici mon code XHTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="24octobre.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('boutons/11bout.gif','boutons/22bout.gif','boutons/33bout.gif','boutons/55bout.gif','boutons/66bout.gif')">
  
 <div id="entete"><img src="logo.gif" width="760" height="100" /></div>
  
   <div id="blocgauche"><a href="page.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','boutons/11bout.gif',1)"><img src="boutons/1bout.gif" name="Image2" width="58" height="24" border="0" id="Image2" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','boutons/22bout.gif',1)"><img src="boutons/2bout.gif" name="Image4" width="61" height="24" border="0" id="Image4" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','boutons/33bout.gif',1)"><img src="boutons/3bout.gif" name="Image6" width="85" height="24" border="0" id="Image6" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','boutons/55bout.gif',1)"><img src="boutons/5bout.gif" name="Image8" width="78" height="24" border="0" id="Image8" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','boutons/66bout.gif',1)"><img src="boutons/6bout.gif" name="Image10" width="58" height="24" border="0" id="Image10" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','boutons/11bout.gif',1)"><img src="boutons/1bout.gif" name="Image12" width="58" height="24" border="0" id="Image12" /></a><img src="boutons/sep.gif" width="13" height="24" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','boutons/55bout.gif',1)"><img src="boutons/5bout.gif" name="Image14" width="78" height="24" border="0" id="Image14" /></a>
   </div>
   <div class="fondblue" id="bloccentre"></div>
   <div id="blocenglobant">
      <div id="interieurgoche">
        <div id="titrenews">News du 20/03/07 </div>
        <div id="bodynews">Il &eacute;tait une fois dans une sombre p&eacute;nombre, un petit chat                           appell&eacute; romarin.. Son pelage &eacute;tait doux, doux comme le vent, et                           sa famille &eacute;tait plutot nombreuse... Jusqu'&agrave; ce jour, il n'y eu                           plus jamais de chat joli comme celui-ci...</div>
     <div id="0separation"></div>
	 <div id="titrenews">A ne pas manquer </div>
	 <div id="bodynews">&bull; Health and Food</div>
	 <div id="bodynews">&bull; Dialogue Santé</div>
	 <div id="bodynews">&bull; Le généraliste</div>
	 <div id="bodynews">&bull; Le journal du Médecin</div>
	 <div id="bodynews">&bull; L'agenda</div>
	 <div id="0separation"></div>
	 <div id="titrenews">A l'honneur</div>
	 <div id="bodynews">Il &eacute;tait une fois dans une sombre p&eacute;nombre, un petit chat appell                        &eacute; romarin.. Son pelage &eacute;tait doux, doux comme le vent, et sa                        famille &eacute;tait plutot nombreuse... Jusqu'&agrave; ce jour, il n'y eu plus                        jamais de chat joli comme celui-ci...</div>
	 <div id="titrenews">Se tourner vers le passé</div>
	 <div id="bodynews">Il &eacute;tait une fois dans une sombre p&eacute;nombre, un petit chat appell                        &eacute; romarin.. Son pelage &eacute;tait doux, doux comme le vent, et sa                        famille &eacute;tait plutot nombreuse... Jusqu'&agrave; ce jour, il n'y eu plus                        jamais de chat joli comme celui-ci...</div>
	 <div id="titrenews">Pour finir...</div>
	 <div id="bodynews">Il &eacute;tait une fois dans une sombre p&eacute;nombre, un petit chat appell                        &eacute; romarin.. Son pelage &eacute;tait doux, doux comme le vent, et sa                        famille &eacute;tait plutot nombreuse... Jusqu'&agrave; ce jour, il n'y eu plus                        jamais de chat joli comme celui-ci...</div>
	 
	 </div>
      <div id="interieurdroit">
	   <div id="image"><img src="bandeau.jpg" /></div>
	   <div id="titrenews">En r&eacute;sum&eacute;... </div>
		   <div id="bodynews">C'est avec une grande fierté que nous vous proposons aujourd'hui l'accès gratuit au site du Folia Urgentia, issue évidente à notre revue "papier". Dans ce soite vous pourrez retrouver au grand complet les articles écrits par nos rédacteurs ( Médecins, psychologues, Docteurs en sciences biomédicales et diététiciennes ). Diffu-Sciencs vous offre l'opportunité de "surfer" sur son site, un accès non négligeable à la pointe de l'information dans le domaine de l'Urgence médicale... Toute l'équipe vous souhaite la bienvenue sur son site.<br /><br />
		   C'est avec une grande fierté que nous vous proposons aujourd'hui l'accès gratuit au site du Folia Urgentia, issue évidente à notre revue "papier". Dans ce soite vous pourrez retrouver au grand complet les articles écrits par nos rédacteurs ( Médecins, psychologues, Docteurs en sciences biomédicales et diététiciennes ). Diffu-Sciencs vous offre l'opportunité de "surfer" sur son site, un accès non négligeable à la pointe de l'information dans le domaine de l'Urgence médicale... Toute l'équipe vous souhaite la bienvenue sur son site.<br /><br />
		   C'est avec une grande fierté que nous vous proposons aujourd'hui l'accès gratuit au site du Folia Urgentia, issue évidente à notre revue "papier". Dans ce soite vous pourrez retrouver au grand complet les articles écrits par nos rédacteurs ( Médecins, psychologues, Docteurs en sciences biomédicales et diététiciennes ). Diffu-Sciencs vous offre l'opportunité de "surfer" sur son site, un accès non négligeable à la pointe de l'information dans le domaine de l'Urgence médicale... Toute l'équipe vous souhaite la bienvenue sur son site.<br /></div>
     </div>
	  
	  
	   </div>
   
</body>
</html>[/i][/i][/i][/i][/i][/i]

Modifié par FranZz (13 Dec 2007 - 11:59)

FranZz

24 Oct 2007 à 16:48

et voici mon css

/* CSS Document */

 body{
 
	width: 760px;
	background-image: url(fon.png);
	margin: 40px auto auto;
}

#entete{
	width: 760px;
	height: 100px;
	background-repeat: no-repeat;
	margin: 0px 0px 10px;
	text-align: center;
}
#souslentete{
	background-color: #999999;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #009FB8;
	height: 100%;
	
}
#blocenglobant{
	background-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #009FB8;
	width: 760px;
	height: 500px;
	vertical-align: top;
	position: static;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-left-style: dotted;
	border-top-color: #009FB8;
	border-right-color: #009FB8;
	border-left-color: #009FB8;
	float: right;
	margin-bottom: 10px;
	margin-top: 10px;
	
}
#blocgauche{
	background-color: #FFFFFF;
	width: 760px;
	height: 24px;
	text-align: center;
	float: none;
	border-bottom-color: #009FB8;
	
	
}

#blocmilieu1{
	background-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #009FB8;
	width: 760px;
	float: right;
	vertical-align: top;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-left-style: solid;
	border-top-color: #009FB8;
	border-right-color: #009FB8;
	border-left-color: #009FB8;

}
#bloccentre{
	background-color: #FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #009FB8;
	width: 760px;
	height: 6px;
	float: right;
	vertical-align: top;
	position: static;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-left-style: dotted;
	border-top-color: #009FB8;
	border-right-color: #009FB8;
	border-left-color: #009FB8;
	background-image: url(6x10.gif);
	margin-bottom: 10px;
	margin-top: 10px;

}

#blocdroit{
	background-color: #999999;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCFF00;
	width: 10%;
	
	
}
.fondblue {
	background-image: url(6x10.gif);
	background-repeat: repeat-x;
}
#interieurgoche {
	margin: 10px;
	width: 200px;
	height: 600px;
	text-align: left;
	float: left;
}
#interieurdroit {
	margin: 10px;
	width: 515px;
	height: 600px;
	background-position: left top;
	float: left;
}
#gogoche2 {
	margin: 10px;
	width: 200px;
	border: 1px solid #CCCCCC;
	height: 600px;
}
#bodynews {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color: #999999;
	text-decoration: none;
	text-align: left;
	vertical-align: top;
	margin-bottom: 15px;
	visibility: visible;
}
#titrenews {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color: #009FB8;
	text-decoration: none;
	text-align: left;
	vertical-align: top;
	margin-bottom: 10px;
}
#0separation {
	text-align: center;
	vertical-align: top;
	margin-bottom: 10px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #009FB8;
	margin-top: 10px;
	width: 10%;
	height: 1px;
}
#image {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color: #009FB8;
	text-decoration: none;
	text-align: left;
	vertical-align: top;
	margin-bottom: 10px;
	height: 150px;
	width: 515px;
}

Modifié par FranZz (13 Dec 2007 - 12:00)

FranZz

24 Oct 2007 à 16:53

Hello Ankart ( sympa ton visu),

Voici du code justement...

Je précise en passant que je suis autodidacte... et donc novice...

ENfin soit...

Ps-> Si mon code est trop lourd à suivre, je suis également ouvert à une proposition
de remaniement de celui ci !!! Genre un exemple, vide, avec la meme structure (très basique que j'utilise !!! )

Et puis merci d'avance !

françois>>>>>{}

Tymlis

24 Oct 2007 à 16:58

Hello,


#interieurgoche {
margin: 10px;
[...]
float: left;
}

Voici le bout de code qui doit être source de tes problèmes. Rajoute un display:inline ça devrait aller.

C'est un bug d'IE6 qui double les marges des flottants, plus d'infos ici
Modifié par Tymlis (24 Oct 2007 - 16:58)

FranZz

24 Oct 2007 à 17:13

Tymlis, waouuu...

J'ai du mal à saisir la précision...

Du premier coup, ça y est !!!!un petit coup de display inline et c'est bon !!!!

Donc, c'est cool !! mon premier stress est résolu !

FranZz

24 Oct 2007 à 17:38

Sinon, cela engendre un autre stress, dumoins, cela le renforce , parce qu'il était djà présent

En gros, j'ai spécifié une taille de 500px (hauteur) pour mon cadre englobant...

Maintenant que j'ai du contenu à mettre dedans, je lui ai attribué un height de 100%;

Mais pas de bol, mon texte sort de ce cadre ! On dirait qu'il n'est pas pris en compte

{Voir illu en pièce jointe}

J'ai essayé aussi de laisser une valeur par défaut, mais cela ne change rien, malheureusement, le texte sort de mon bloc... Au lieu de l'aggrandir proportionellement à ce qu'il contient !!! et cela dans tous les navig..

FranZz

24 Oct 2007 à 17:39

dominique

24 Oct 2007 à 18:04

Bonjour et bienvenue parmi nous, FranZz Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

FranZz

24 Oct 2007 à 18:17

Merci de la bienvenue, voici donc, conformément aux normes ( 2 essai), la problématique que je rencontre...

Sinon, cela engendre un autre stress, dumoins, cela le renforce , parce qu'il était djà présent

En gros, j'ai spécifié une taille de

500px

(hauteur) pour mon cadre englobant...

Maintenant que j'ai du contenu à mettre dedans, je lui ai attribué un

height 100%;

Mais pas de bol, mon texte sort de ce cadre ! On dirait qu'il n'est pas pris en compte

J'ai essayé aussi de laisser une valeur par défaut, mais cela ne change rien, malheureusement, le texte sort de mon bloc... Au lieu de l'aggrandir proportionellement à ce qu'il contient !!! Et cela dans tous les navig..

Tymlis

24 Oct 2007 à 20:01

Yop, re

Dans ton #blocenglobant et dans ton #interieurgoche, tu défini des hauteurs, ça signifie que ces blocs ne doivent pas être plus grands que ces hauteurs.
Donc quand tu mets trop de texte, le texte dépasse, mais n'entraine pas le bloc avec lui.

Enleve donc ces hauteurs, et alors tes blocs s'adapteront à la taille du texte Smiley smile

FranZz

24 Oct 2007 à 20:42

>Yéyo Tymlis,

Je n'ai pas eu le temps de chopper mes css chez moi, je suis ton conseil demain matin, 7 h59 tappante !!!

J'espère que tu vises juste !!! Smiley eek

En tout cas merci !!!

FranZz

25 Oct 2007 à 08:52

[RESOLU]

Tymilis__

Un grand Merci ! C'est impec, tout fonctionne !

Très bonne journée

François

Tymlis

25 Oct 2007 à 09:25

hehe,

Content d'avoir aidé Smiley smile

Tu peux rajouter le [Résolu] dans le titre de ton topic pour aider aux futures recherches ?

Sujet clos

CSS et mise en forme, CSS3

I E // stress [Résolu]