28220 sujets

CSS et mise en forme, CSS3

[Résolu] [IE] Le titre de la page disparait.

Bonjour,
Voici une copie d'une page que j'ai écrite :
[problème résolu]
Sa feuille de style est:
[problème résolu]

Je n'arrive pas à comprendre pourquoi, avec IE, le titre et le cadre qui contient le titre disparaissent pour la première page et pas pour la seconde. Avez vous une explication ?
Modifié par Sacha (31 Oct 2005 - 01:15)
Modérateur
bonjour,
Comme toi, je comprend pas bien cette histoire avec IE, néanmoins pour obliger IE a afficher un element (comme dans ton cas), je lui ajoute dans le css un position:relative;
Il conserve ainsi sa place et son espace dans la page, comme par defaut, mais cela semble bien obliger IE a l'afficher a l'ecran.
Ce "truc" que j'utilise fonctionne souvent face a ce cas.
Je n'ai pas d'explications, vu qu'a priori ce n'est pas lié, (IE et les normes..).

Autre solution, donner une taille a ton element (ici en pourcentage ?) et la il sera afficher par IE sans probleme !

a plus
Bonjour,

ce qui est beaucoup moins super, c'est d'avoir supprimé le code du message initial : ce sujet n'a strictement plus aucun intérêt pour les autres membres du forum qu'il aurait peut-être aidé à résoudre une difficulté similaire Smiley cligne
Le problème, c'est que j'ai pas vraiment de site pour l'héberger durablement. Maintenant, je peux insérer le code directement :

fichier test.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css"/><title>Site de test</title></head>
      
<body>

<div class="page">
<div class="titre">
<h1>Site de test</h1>
</div>

<div class="menu"> 
<h2>Navigation</h2>
<div class="titreBoite"><h3>Pages de test</h3></div>
<div class="boite"> 
<ul>
<li><a href="test.html">Page principale</a></li>
<li class="dernier"><a href="test2.html">Lorem Ispum</a></li>
</ul>
</div>

</div>

<div class="contenu"><h2>Accueil</h2>

<p>Bienvenue sur le site de test. Ici, on parle de test.</p>

</div>

<div class="apropos">
<h2>A propos</h2>
Site proposé par quelqu'un. certains droits réservés.  
<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</div>
</div>
</body></html>


fichier test2.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css"/><title>Site de test</title></head>
      
<body>

<div class="page">
<div class="titre">
<h1>Site de test</h1>
</div>

<div class="menu"> 
<h2>Navigation</h2>
<div class="titreBoite"><h3>Pages de test</h3></div>
<div class="boite"> 
<ul>
<li><a href="test.html">Page principale</a></li>
<li class="dernier"><a href="test2.html">Lorem Ispum</a></li>
</ul>
</div>

</div>

<div class="contenu"><h2>Lorem Ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus semper tellus sodales metus. Morbi vehicula egestas elit.
Vestibulum massa ligula, pellentesque a, cursus ut, cursus ac, nibh.
Vestibulum tincidunt euismod pede. Donec sed lectus. Sed ut ligula.
Aenean auctor dui et metus suscipit lacinia. Pellentesque dolor.
Maecenas facilisis venenatis est. Nullam nulla sapien, luctus id,
eleifend sed, mattis ut, felis. Curabitur arcu leo, consequat vel,
semper id, aliquam at, nibh.</p>

<p>Nam commodo. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nulla nonummy blandit ipsum.
Morbi eget sapien nec nisi cursus viverra. Nullam arcu. Phasellus id
felis et nisi posuere pretium. Cras sem nisi, imperdiet et, lobortis
nec, tempus vel, lacus. Cras auctor felis vel elit. Aliquam erat
volutpat. Nullam auctor lobortis enim. Morbi nulla erat, pellentesque
eu, facilisis nec, ullamcorper a, enim. Quisque est leo, egestas ut,
imperdiet non, tempor nec, urna. Etiam nonummy. Etiam sed lacus. Mauris
convallis imperdiet tellus. Proin sit amet massa eu erat interdum
pulvinar. Pellentesque egestas. Sed pulvinar egestas neque. Quisque non
massa eget sapien mattis aliquet. Etiam nec ante vel arcu bibendum
gravida. </p>

</div>

<div class="apropos">
<h2>A propos</h2>
Site proposé par quelqu'un. certains droits réservés.  
<a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</div>
</div>
</body></html>


fichier style.css
html { 
padding:0px;
margin:0px;
}

div.page {
background-color : white;
color : black ;
padding : 40px;
border-style : solid ;
margin:40px 15%  ;
border-color :#9d6a63;
}


body {
background-image :url('fond.gif') ;
background-color :#aaa ;
}

/*Banni?re du titre---------------*/

div.titre {
background-color : #da948a;
padding:1px 0px 1px 20px ;
margin : 0px 0px 40px 0px ;
border-style :  solid ;
border-width : 3px ;
border-color : #9d6a63;
color : black ;
}

div.titre h1 {
font-size : 200%;
font-family: arial , sans-serif;
margin : 10px;
}

/*Barre de menu-------------------*/

div.menu {
float: left;
width: 30%;
margin  : 0px 0px 0px 0px ;
overflow: hidden;
}

div.boite {
background-color : #da948a;
margin:0px 20% 40px 0px ;
overflow: hidden;
text-align:center;
border-color : #9d6a63;
border-style : solid ;
border-width: 0px 3px 3px 3px ;
}

div.titreBoite {
background-color : #9d6a63;
margin:0px 20% 0px 0px ;
overflow: hidden;
text-align:center;
}

div.menu ul {
padding : 0;
margin : 0;
}

div.menu ul li{
list-style: none;
display:block;
list-style-position: outside;
border-bottom: 1px dashed #9d6a63;
padding: 2px; 	
}

div.menu ul li.dernier{
list-style: none;
display:block;
list-style-position: outside;
border-bottom: none;
padding: 2px; 	
}

div.menu h2{
margin :0 ;
color : white ;
font-size : 1px;
}

div.menu h3{
color : #ffd9d4;
font-weight:bold;
font-size : 85%;
font-family : Arial , sans-serif ;
margin : 0px;
padding : 2px;
}

div.menu a:link {
color:white;
text-decoration:none;
}

div.menu a:visited {
color:#ffd9d4;
text-decoration:none;
}

div.menu a:hover {
color:white;
text-decoration:none;
}

/*Contenu de la page--------------*/

div.contenu {
background-color : white ;
text-align : justify;
margin : 0px 0px 10px 0px ;
overflow: auto;
float:left;
width:70%;
font-size : 100%;
padding : 0px;
overflow: visible;
} 

div.contenu h2 {
margin : 0px 0px 10px 0px ;
font-size : 150%;
}

/*Bas de la page------------------*/
div.apropos {
clear : left ;
border-style : solid ;
border-color : #9d6a63;
border-width: 1px 0px 0px 0px ;
}

div.apropos h2{
margin :0 ;
color : white ;
font-size : 1px;
}

Modifié par Sacha (31 Oct 2005 - 13:05)
Sujet clos
Aller à