28173 sujets

CSS et mise en forme, CSS3

Pb d'affichage sous IE j'en ai marre

Aidez moi plz, regardez cette page LA, sous mozilla qui est plutot bien mise a part un texte qui dépasse de la zone et sort du cadre, je comprend pas maiçs c'est tout .

Par contre sous IE, le probléme c'est que les news sont toutes en bas, pourkoi ?

dites moi la cause de ce truc qui m'arrive trés souvent ...

Merci beaucoup
Bien le bonjour à toi junior,

Point n'est besoin ici de t'égosiller pour recevoir quelque aide... (Évite d'écrire tout ton message en gras.)


Visiblement, il n'y a pas assez d'espace sous IE pour que le contenu s'affiche à coté du menu. Il faut donc revoir les dimensions de certains blocs (contenu droit, ou menu à gauche) à la baisse, en tenant compte des marges, paddings, etc.
On peut aussi jouer en agrandissant le conteneur (mais dans ce cas, il faut faire suivre la taille de la bannière et du pied-de-page et procéder à quelques ajustements...)

Au passage, tes multiples <div id="contenu"> sont erronés ; l'ID d'un DIV est une étiquette qui correspond à un nom propre : jamais deux identiques.
Ici, il faut avoir <div class="contenu"> associé à : .contenu {(...)}.
Modifié par Smiley neko (20 May 2006 - 12:54)
Merci bcp neko, je revois ca la baisse, mais c est embétant ce pb entrez navigateur qui ne lit pas les margin et padding de la m^meme maniére.

Lpe pb c est que si je fais comme tu dis, c est a dire d agrandir ou retrécir le contenu droit ou le div contenu, sous fire fox cela va avoir des conséquences... par exemple augmenterles espaces entre le contenu droit et les news, ce qui est pas top ...
Salut

Le plus simple est de retirer le width: 803px; de #cadre, il prendra automatiquement la largeur du parent moins le margin-left

A+
ca marche toujours pas, le tout reste en dessous de la ban de gauche, je suis démotivé Smiley decu

Ca vient d'où, j'ai essayé de toucher toutes les margin et padding, rien a faire !!

sniffff

help
Ton bandeau entête fait aussi 803 pixel par sont image met lui dans le CSS une hauteur et met l’image en fond

A+
salut

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
	   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">	

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
	   "http://www.w3.org/TR/html4/frameset.dtd">



çà je ne l'avait pas encore vu...

trois doctype, c'est une de trop.

<title>Scandia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


toujours placer le charset avant le title.c'est de la sémantique.

<style type="text/css">
<!--


les commentaires sont à supprimer.

<div id="ban_vert"> <img src="../image/ban_verticale_actu.jpg" width="176" height="591"></div>


le slash est absent.

et plus bas

<div id="entete"> <img  src="../image/entete_actu.jpg"/></div>


le slash est présent mais pas correct, il manque un espace.un peu de rigueur Smiley cligne 

<div class="contenu"> <img src="./newsimg/roni.jpg"/>


et le width et le height?

et çà : 
<body bgcolor="#000000">



bref! beaucoup d'erreurs à corriger.
Modifié par keran (19 May 2006 - 21:08)
keran a écrit :

trois doctype, c'est une de trop.

Je dirais même deux de trop Smiley cligne
keran a écrit :
bref! beaucoup d'erreurs à corriger.


Beaucoup de tes remarques ne concernent pas des erreurs.
- ces 'commentaires' dans le style est un vieux truc utilisé pour filtrer les (trop) vieux navigateurs. S'il n'y a pas de raison particulière de l'enlever en revanche ce serait mieux d'utiliser un fichier CSS.

- concernant les slash de fermeture de la balise IMG : en HTML 4.01, il n'y a pas à en mettre (les trois DOCTYPE sont du HTML 4). En revanche c'est obligatoire en XHTML. Ne pas mettre d'espace n'est pas une erreur puis c'est "juste" une recommandation de compatibilité.

- Il n'y pas non plus d'obligation d'indiquer un WIDTH ou un HEIGHT pour cette balise.

Quant au BGCOLOR c'est autorisé en transitional (c'est pas pour ça qu'il faut l'utiliser bien sûr)
Modifié par Alan (19 May 2006 - 21:42)
Petit essai pour toi

Pas tout coriger mais la mise en page devrais te convenir et sans utiliser des float partout, sans marge negative , sans position absolue


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scandia</title>
	
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body {
	height: 100%;
	text-align: center;  /* pour IE centrage */
}
#conteneur{
	width:981px;
	margin-right: auto; /* Centrage */
	margin-left: auto;  /* Pour les autres */
}
#header{
}
#cadre {/* conteneur global et arrière-plan du titre du cadre */
	margin-left:176px;
	background-color:#c1dbff;
	padding-top:50px;
	padding-bottom:30px;
	background-image: url(indexnews_fichiers/entete_actu.jpg);
	background-repeat: no-repeat;
}
.contenu{
	width:650px;
	background:url(../image/ban_actualites.jpg) top left no-repeat;
	_height:190px;   /* pour IE  */
	min-height:190px; /* Pour les autres */
	padding:24px 5px 5px 10px;
	border: #003399 1px solid;
	border-top:#003399 3px solid;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
}
.contenu H1{
	color:#095891;
	text-decoration:underline;
	padding-left:10px;
	font-size:20px;
}
.contenu p{
	color:#5f77ff;
	padding-top:5px;
	padding-left:30px;
	padding-right: 220px;
	font-size:14px;
	text-align:justify;
}
.contenu p:first-letter{ 
	color:#54980e;
	font-size:25px;;
	text-transform:uppercase;
}
.contenu img{
	float:right;
	width:220px;
	height:165px;
	margin:5px;
	border: #003399 1px solid;
}
#ban_vert{
	float:left;
	background-image: url(indexnews_fichiers/ban_verticale_actu.jpg);
	height: 591px;
	width: 176px;
	background-repeat: no-repeat;
}
-->
</style>
</head>
<body bgcolor="#000000">
<div id="conteneur">

<div id="header">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="100" width="981">
    <param name="movie" value="./baniere_haut.swf">
    <param name="quality" value="high">
    <embed src="indexnews_fichiers/baniere_haut.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="100" width="981">
  </object>
</div>
<div id="ban_vert"> </div>
<div id="cadre">
  <div class="contenu"> <img src="indexnews_fichiers/roni.jpg">
    <h1>Barcelone champion</h1>    <!-- Titre-->
    <p>
Ronaldinho a assuré que la victoire de Barcelone sur Arsenal (2 - 1)
est "un jour très spécial pour tous" et que les joueurs ne vont jamais
"oublier". "Cette saison a été incroyable, et terminer de cette manière
est parfait", a ajouté le joueur brésilien, spécialement heureux par le
but décisif de son compatriote Juliano Belletti. "Il a été très spécial
parce que c'est un grand ami, son but est important pour le groupe et
pour moi", a indiqué la star du Barça.<br>
<br>
C'est fini !!! Le Barça champion d'Europe pour la seconde fois
consécutives face à une très bonne équipe d'Arsenal !!!!! Campions
d'Europa !!!! Le Barça aura souffert jusqu'à la 77e minute et ce but de
Eto'o qui venait égaliser. 3 minutes plus tard, Belletti venait marquer
le 2-1 définitif qui donnait le titre tant attendu au Barça. Les héros
de ce soir s'appellent Eto'o , Belletti et Larsson auteur des 2 passes
décisives, tout un symbole pour son dernier match européen en tant que
blaugrana. Ronnie bien marqué ce soir, remporte son premier titre de
champion d'Europe avec le Barça et marque ainsi l'histoire du club avec
ce second titre européen majeur obtenu. Nous vous ferons partager le
bonheur de Ronnie et de ses coéquipiers très prochainement sur le site.</p>
  </div>
  <div class="contenu"> <img src="indexnews_fichiers/1.jpg">
    <h1>Scandia offre 80 % </h1>    <!-- Titre-->
    <p>
A l'occasion de la fête du pain cette semaine, SCandia offre 80 % sur
les abonnements cette semaine, donc nous comptons sur vous pour faire
exploser le nombre de visites!!<br>
<br>
Abientot tout le monde,<br>
<br>
L'équipe de scandia.    </p>
  </div>
  <div class="contenu"> <img src="indexnews_fichiers/rooney2.jpg">
    <h1> Module de news sur SCandia  </h1>   <!-- Titre-->
    <p>
      Le module de news commence à me gonfler, car je galére à l'installer.<br>
Mise à part ca, le lancement de Fun foot se fait mardi avec
l'organisation d'un mini tournoi, nous comptons sur votre
participation, les places sont limitées donc dépéchez vous de vous
inscrire !! </p>
  </div>
</div>
</div>
</body>
</html>


A+
salut ttlm

bon oui, c'est deux de trop, évidement.et quitte à nettoyer garde la première, strict.il est plus que temps d'arréter le transitionel.

width et height sont obligatoires pour toutes images et puis la remarque concerne la rigueur de codage.un coup oui un coup non, pourquoi?oui partout, tout le monde est content et les navigateurs vous remercierons.

quant aux slashs des balises img, avec html, il ne sont certes pas obligatoires mais si ils sont présents autant les placés correctement.

a écrit :
"juste" une recommandation de compatibilité.


ce qui constitue donc une source d'erreurs, c'est donc une erreur.pas de syntaxe mais de logique(comme pour php).

a écrit :
ces 'commentaires' dans le style est un vieux truc utilisé pour filtrer les (trop) vieux navigateurs.


tout est dit.çà n'à plus lieu d'être.idem pour js.pour le bgcolor,

a écrit :
(c'est pas pour ça qu'il faut l'utiliser bien sûr)


à supprimer même en transitionel.mais ce n'est que mon avis...
Modifié par keran (20 May 2006 - 13:00)
keran a écrit :

width et height sont obligatoires pour toutes images


Salut Keran,
Ce n'est pas du tout obligatoire, ça offre juste quelques avantages.

a écrit :

ce qui constitue donc une source d'erreurs, c'est donc une erreur.pas de syntaxe mais de logique(comme pour php).


Il n'y a pas d'erreur de logique, l'ajout de l'espace avant le slash de fermeture est juste une recommandation pour assurer une compatibilité avec les vieux navigateurs, dans ce cas particulièrement NS 4.

a écrit :
tout est dit.çà n'à plus lieu d'être.

Suivant ce raisonnement il faudrait dire la même chose pour l'espace avant le slash...
salut alan

a écrit :
Ce n'est pas du tout obligatoire


chuut...n'importe quel débutant pourrait le prendre au premier degré.

en plus il manque le alt="" et çà aussi c'est obligatoire...

a écrit :
ça offre juste quelques avantages


alors, c'est obligatoire Smiley lol je sais, je joue sur les mots.un code propre, c'est un code plus facile à corriger.

empiriquement, je sais que si on oublie volontairement de placer largeur et hauteur, sous pretexte que ce n'est nécessaire, c'est le bordel potentiel.on trouve encore des align dans les balises ou des <p> pour insérer un espace en xhtml.sus aux dérives.dans le même genre, le border="0" des images.en html, ok. mais n'est-ce pas plus bénéfique de le placer dans le css? pour un gros site, on gagne plusieurs Ko.de plus, pour la taille, çà permet de gagner en vitesse d'affichage et çà c'est un argument suffisant.non?le navigateur n'ayant pas à calculer lui même.pour, par exemple, une galerie çà fait la différence.plutôt qu'obligatoire, je dirais donc, vivement conseillé.

pour le slash, ok.de toute façons, aucun navigateur ne s'en offusquera aujourd'hui, encore qu'ie5(navigateur encore utilisé), c'est pas sur.je n'ai jamais tester.

bref! codons proprement pour avoir des navigateurs homogénes le plus vite possible, il serait temps.l'évolution d'ie6 est un bon exemple de ce que ce type de dérives, permissivité, peut produire.mais là je trolle, alors je stoppe içi mes commentaires.
Bonsoir,

a écrit :
mais là je trolle, alors je stoppe içi mes commentaires.
Mais non, un troll, c'est ça, ou ça :
"Ta touche espace semble défectueuse."

Junior, on dirait que ton problème est [résolu]. Smiley cligne
keran a écrit :
pour le slash, ok.de toute façons, aucun navigateur ne s'en offusquera aujourd'hui, encore qu'ie5(navigateur encore utilisé), c'est pas sur.je n'ai jamais tester.


Ca ne pose pas de problème à IE5, ni IE 4. En revanche à IE3 et NS4 principalement, oui.
Le sens général de mes remarques est qu'il y a une différence bien précise dans les spécifications entre ce qu'on peut, devrait ou doit faire ou ne pas faire. C'est pourquoi il ne faut pas parler d'erreur ou d'obligation pour ce qu'il relève de la recommandation voir de la simple possiblité.
Modifié par Alan (20 May 2006 - 17:55)
Sujet clos
Aller à