5568 sujets

Sémantique web et HTML

Overflow, ie et Doctype [Résolu]

Bonjour à tous, Je viens vers vous avec un problème qui m'échappe.

Je suis pas encore vraiement à l'aise avec les Doctype et tout ca.

éééé forcement, j'ai un petit problème. Je vous explique et le code suivra.

J'ai une div qui contient du contenu. Cette div fait 500px de haut et est en overflow. Le contenu à l'interieur est positionné en absolu par rapport à une base de données (ceci ne peut en aucun cas être modifié).

En gros sur FF j'ai ma div avec son contenu à l'interieur. Lorsque je scroll dans la div je vois bien mon contenu.

Sous ie, le contenu se positionne en dehors de la div en gardant ses propriétées en absolu.

Lorsque je fais un test sur une autre page, cela fonctionne... Puis j'ai rajouté les éléments de ma premiere page un par un pour voir ce qui l'ennuyait et apparement c'est des que je met le DOCTYPE.

Comment faire pour que ma page se comporte tout comme elle le fait sans doctype ?

Je suis preneur sur toute forme d'idée ou d'aide Smiley smile 



<!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" xml:lang="fr" lang="fr">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<link rel="stylesheet" type="text/css" href="site.css"></link>
</head>
<body>

<div id='div_pour_web style='border:5px solid red;'>
     <div id='web_overflow' style='border:5px solid blue;'>
	<div id="web" style="width:0px;height:10000px;position:relative;top:0px;left:0px;border:5px solid green;'">
		<div style='position:relative;height:150px;border:5px solid black;'>
		<div style="position:absolute; left:10px; top:799px; width:685px; height:551px;">
		<img alt='' border='0' src='./contenu/image/chevaux1024.jpg' width='100%' height='100%' />
	</div>
	<div align="left" style="position:absolute; left:10px; top:0px; width:685px; height:804px;">
	<?php include ("./contenu/texte/construction,.htm"); ?>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>


Merci d'avance Smiley smile

Rude
Modifié par ffwrude (22 Aug 2007 - 10:24)
Déjà, vérifier la syntaxe des pages (avec le validateur par exemple).

ex :
<div id='div_pour_web style='border:5px solid red;'>
devrait être :
<div id="div_pour_web" style="border:5px solid red">
Mpok a écrit :
ex :
<div id='div_pour_web style='border:5px solid red;'>
devrait être :
<div id="div_pour_web" style="border:5px solid red">

Hmm... à voir.
Dans l'exemple relevé, il y a une erreur de syntaxe car les guillemets ne sont pas refermés après la valeur de l'attribut id ("div_pour_web"). Par contre, je ne suis pas sûr qu'il faille passer de l'apostrophe droite (single quote) aux guillemets anglais droits (double quotes).

La spécification XHTML 1.0 dit:
a écrit :
All attribute values must be quoted, even those which appear to be numeric.
(http://www.w3.org/TR/xhtml1/#h-4.4 )

L'exemple donné utilise des double quotes («"»), mais rien n'indique que ceux-ci soient normatifs. D'ailleurs, le validateur du W3C les accepte, y compris en XHTML 1.0 Strict.
ffwrude a écrit :
Je suis pas encore vraiement à l'aise avec les Doctype et tout ca.

Pas encore lu et relu l'article dans les tutoriels d'Alsacréations? C'est pas bien ça...

ffwrude a écrit :
Sous ie, le contenu se positionne en dehors de la div en gardant ses propriétées en absolu.

Diagnostic: bug ou insuffisance d'IE.

ffwrude a écrit :
Lorsque je fais un test sur une autre page, cela fonctionne... Puis j'ai rajouté les éléments de ma premiere page un par un pour voir ce qui l'ennuyait et apparement c'est des que je met le DOCTYPE.

Comme tu as bien lu l'article d'Alsacréations (hein, hein?), tu sais pertinemment que:
- sans Doctype: la page est rendue en mode Quirks;
- avec Doctype complet: la page est rendue en mode Standard.
Et bien sûr tu connais les différences entre le mode Standard et le mode Quirks, donc je ne reviens pas dessus. Smiley cligne

ffwrude a écrit :
Comment faire pour que ma page se comporte tout comme elle le fait sans doctype ?

Ben si c'est un bug d'IE en mode Standard, je vois pas trop ce que tu peux faire, sauf essayer de résoudre (ou contourner) ce bug d'une manière ou d'une autre toujours en restant en mode Standard. Faire ses pages pour le mode Quirks n'est vraiment pas une bonne idée. Le comportement des navigateurs y est trop imprévisible (déjà qu'en mode Standard c'est pas toujours évident...).
ffwrude a écrit :
Cette div fait 500px de haut et est en overflow.

Pour rappel: «être en overflow» ne veut strictement rien dire. Tous les éléments d'une page ont une propriété overflow, avec par défaut la valeur standard: "visible". Tu peux dire que ta div est en overflow: auto, overflow: hidden ou overflow: scroll, par exemple, ça sera plus clair et plus juste.

ffwrude a écrit :
Lorsque je fais un test sur une autre page, cela fonctionne... Puis j'ai rajouté les éléments de ma premiere page un par un pour voir ce qui l'ennuyait et apparement c'est des que je met le DOCTYPE.

Tu veux dire que tu fais un coup une page avec un Doctype, et un coup une page sans Doctype, sans trop faire attention?
Argh.

Sinon et pour finir: faire une div de 500px de haut avec une barre de défilement interne, c'est à mon sens une bêtise dans 90% des cas. Et si je m'écoutais je dirais 99% des cas. Smiley lol
Salut Florent merci pour ces réponses (ainsi qu'Mpok). Bon alors pour la quote c'est juste que j'ai renomé les div dans le bloc CODE d'alsa et j'ai supprimé la quote par inadvertance mais apres vérification elle est bien dans le code.

Pour ce qui est de : Etre en overflow oui exacte ce n'étais pas vraiement explicite. Je vais collé les class CSS ca sera plus éxplicite.


#div_pour_web{
	float:left;
	background-image:url("./img_site/droite.jpg");
	background-repeat:no-repeat;
	margin-top:-1px;
	width:719px;
	height:567px;
}

#web_overflow{
	height:500px;
	overflow:auto;
	margin-top:8px;
}


Bref sinon pour le mode quircks euh... je ne savais même pas ce que c'était. Pourtant je l'ai lu le tuto (Premiere chose que j'ai faite Smiley smile )

Si c'est un bug incontournable je vais avoir des soucis... Pour ce qui est de la div 500px avec le scroll internet ceci m'est imposé... Sinon tout comme toi je ne suis pas fana des scrolls interne.

Bref ... Je ne sais pas trop comment m'en sortir.

Je vais déjà passé ca au validateur voir ce qu'il en dit ... Mais je ne veux pas sortir des standards... (c'est moche déjà et pi sinon je posterai pas ici Smiley smile ).

Si vous avez d'autres idées ... n'hésitez pas. Je vous tiens au courant de mon côté.

Rude

PS : J'aime les menus déroulants...

Edit : Le validateur me dit :
This Page Is Valid XHTML 1.0 Transitional! ......
Modifié par ffwrude (21 Aug 2007 - 10:25)
Rude,
Je galère tout comme toi Smiley smile J'ai une page valide, avec :


<!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" xml:lang="fr" lang="fr">


Et vous savez quoi ? J'en veux à IE !

K.

EDIT
En continuant à fouiller au sujet de ce pb, voilà ce que j'ai trouvé :
http://www.thescripts.com/forum/thread644980.html

et une illustration du pb : http://www.rapidcity.net/~justin/test/position.html

En résumé : c'est un bug connu de IE...
Modifié par misterK (21 Aug 2007 - 17:10)
Raaaaaa tout merci c'est trop bien !

J'ai du passer à coté. En tout cas cela fonctionne juste en rajoutant


   position:relative;


dans ma class CSS web_overflow

Merci encore Smiley smile

Rude
Sujet clos
Aller à