28173 sujets

CSS et mise en forme, CSS3

CSS et IE7

Bonjour

Je suis novice en création de pages web et j'ai un souci d'affichage avec IE7.
Ci dessous le code du css, il fonctionne sous firefox mais avec IE7 la seconde colonne n'apparait pas, si on place le curseur de la souris on s'apercoit qu'elle est sous la première en fait. QQ' un aurait une idée pour corriger cela ?
Merci

		p
			{
			    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
				 color:#CC99FF;
                font-size: 12pt;
				width:200px;
				height:450px; 
				position:absolute;
				left:35px;
				top:50px;
			}
	
			
			
			titres
			{
			    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
				 color:#CC99FF;
                font-size: 12pt;
				width:250px;
				height:450px;
				position:absolute;
				left:300px;
				top:50px;
				
			
			}
Voila le code html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <link rel="stylesheet" media="screen" type="text/css" title="jeux principale" href="jeux principale.css" />
</head>
<body>
<body bgcolor="#000000">
<dir>
<p>Age of empires 3<br>
Baldur”s gate 2<br>
Battlefield 2142<br>
Battlefield1942<br>
Battlefield2<br>
Call of Duty 2<br>
Civilization 4<br>
Company of Heroes<br>
Counterstrike source<br>
Daoc ( +extensions)<br>
Diablo2 – Lod<br>
Dofus<br>
Dungeon Siege 2<br>
Everquest 2 (+extensions)<br>
Far cry<br>
Guild wars (+extensions)<br>
Half life2<br>
</p></dir>
 
<dir>
<titres>Heroes of Might & Magic V<br>
Hitman 2<br>
Medieval 2<br>
Neverwinter Nights 2<br>
Oblivion<br>
Prey<br>
Prince of Persia 3<br>
Quake3<br>
Quake4<br>
Silent Hill 3<br>
Soul reaver2<br>
Splintercell 3<br>
Unreal tournament 2004<br>
Warcraft3<br>
Warhammer 40 000 : Dawn of war<br>
Wings of War<br>
World of warcraft + BC
</titres></dir>
</body>
</html>
euh ce sont des balises officielles ça dir et titres ? Smiley sweatdrop

jamais entendu parler pour ma part
Modifié par Sol (08 Apr 2007 - 21:00)
HTML : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

  <title>Jeux Principaux</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" media="screen" type="text/css" href="jeux_principaux.css" />

</head>

<body>

<p id='colonne_1'>
	Age of empires 3 <br />
	Baldur”s gate 2 <br />
	Battlefield 2142 <br />
	Battlefield1942 <br />
	Battlefield2 <br />
	Call of Duty 2 <br />
	Civilization 4 <br />
	Company of Heroes <br />
	Counterstrike source <br />
	Daoc ( +extensions) <br />
	Diablo2 – Lod <br />
	Dofus <br />
	Dungeon Siege 2 <br />
	Everquest 2 (+extensions) <br />
	Far cry <br />
	Guild wars (+extensions) <br />
	Half life2
</p>

<p id='colonne_2'> 
	Heroes of Might & Magic V<br />
	Hitman 2<br />
	Medieval 2<br />
	Neverwinter Nights 2<br />
	Oblivion<br />
	Prey<br />
	Prince of Persia 3<br />
	Quake3<br />
	Quake4<br />
	Silent Hill 3<br />
	Soul reaver2<br />
	Splintercell 3<br />
	Unreal tournament 2004<br />
	Warcraft3<br />
	Warhammer 40 000 : Dawn of war<br />
	Wings of War<br />
	World of warcraft + BC
</p>

</body>

</html>


CSS :

body {
	background-color: #000000;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	color:#CC99FF;
	font-size: 12pt;
}

p {
	position: absolute;
	top: 1em;
	
}

p#colonne_1 {
	left: 2em;
}

p#colonne_2 {
	left: 20em;
}


Voilà ma version de ton code fait en 30 secondes sous Notepad, quand on respecte les règles de codage ça marche tout seul.
Ba perso je fairais plutôt un truc dans ce style :


<!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>Jeux Principaux</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
				color:#CC99FF;
				font-size: 12px
			}

			ul {
				float: left;
				padding: 0;
				margin: 0;
				list-style-type: none
			}

			li {
				margin-right: 40px
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Age of empires 3</li>
			<li>Battlefield 2142</li>
			<li>Call of Duty 2</li>
			<li>Civilization 4</li>
			<li>Dungeon Siege 2</li>
		</ul>
		<ul>
			<li>Heroes of Might &amp; Magic V</li>
			<li>Hitman 2</li>
			<li>Medieval 2</li>
			<li>Neverwinter Nights 2</li>
			<li>Oblivion</li>
		</ul>
	</body>
</html>


C'est une liste, on a les balises faites pour çà. Et puis pourquoi ne pas utiliser un "float: left" plutôt qu'un positionnement en absolute un peu lourding...
À propos du code HTML soumis par iyanola :

1. Il manque un Doctype. Mauvaise idée. Voir la page suivante :
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

2. L'élément HTML dir est déprécié en HTML 4. En bon français, ça veut dire que faut plus l'utiliser. Smiley cligne
http://www.w3.org/TR/html401/struct/lists.html#edef-DIR

3. L'élément titres n'a jamais existé en HTML. Faudrait voir à pas pousser mémé dans les orties, non plus, hein. Si chacun se met à inventer ses propres éléments, comment est-ce que les navigateurs sont censés les interpréter ? Smiley biggol
Sujet clos
Aller à