bonjour à tous
je rencontre un pb avec le positionnement en "display inline-block" et la compatibilité sous ie7 et inférieur. Je pense avoir identifier le pb mais je ne sais pas comment le résoudre.
Dans les codes suivants je souhaite faire un positionnement en "display inline-block" pour mon menu.
Le problème que j'ai identifié est que mes balises<a> sont en "display block" pour pouvoir centrer mon texte.
Dans mon correctif pour ie mes balises <li> sont elles en "display inline" et de ce fait ne peuvent contenir mes balises <a> qui elles sont en "block"
J'ai également un problème avec le aside sous ie7 mais je ne me suis pas encore pencher sur la question
si quelqu'un peux m'aider
Merci d'avance!!!
code html:
feuille de style:
feuille de style sous ie
Modifié par Ludolegends (11 Oct 2013 - 10:35)
je rencontre un pb avec le positionnement en "display inline-block" et la compatibilité sous ie7 et inférieur. Je pense avoir identifier le pb mais je ne sais pas comment le résoudre.
Dans les codes suivants je souhaite faire un positionnement en "display inline-block" pour mon menu.
Le problème que j'ai identifié est que mes balises<a> sont en "display block" pour pouvoir centrer mon texte.
Dans mon correctif pour ie mes balises <li> sont elles en "display inline" et de ce fait ne peuvent contenir mes balises <a> qui elles sont en "block"
J'ai également un problème avec le aside sous ie7 mais je ne me suis pas encore pencher sur la question
si quelqu'un peux m'aider
Merci d'avance!!!
code html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- [if lte IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie.css />
<! [endif -->
<link rel="stylesheet" href="style.css" />
<title>Accueil</title>
</head>
<body>
<div id="bloc_page">
<header>
<h1>Lorem Ipsum Alsacien</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li><!-- correction white-space
--><li><a href="#">Divers</a></li><!-- correction white-space
--><li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<p>Sed ut metus sed wisi commodo viverra. Suspendisse dignissim elit ac leo. Fusce magna augue, accumsan eu, sollicitudin ut, ultricies eu, elit. Vestibulum faucibus turpis at lacus. Nulla pede nibh, congue ac, luctus at, pharetra ut, nulla. Nulla in ipsum eget tortor lobortis laoreet. Morbi molestie nibh dapibus justo. Nulla sapien lorem, tincidunt sit amet, lobortis laoreet, feugiat a, leo. Etiam id mauris in libero molestie dictum. Cras nisl diam, dapibus ut, sollicitudin sed, auctor nec, orci. Nam eleifend, dui in dapibus congue, mi diam luctus velit, eu imperdiet pede elit nec lorem. Proin laoreet, eros a dictum faucibus, nunc wisi rhoncus nunc, at rhoncus lectus tellus vitae urna. Curabitur a turpis at ligula lobortis cursus.</p>
</article>
<aside contenteditable="true" >
Ce texte est modifiable, vous pouvez même y insérer vos notes!
</aside>
</section>
<footer>
<p>Pied de page</p>
</footer>
</div>
</body>
</html>
feuille de style:
/* MISE EN PAGE GENERAL */
#bloc_page
{
width: 990px;
margin:0 auto;
}
body
{
font-family:Verdana, Geneva, sans-serif;
margin:0;
}
/* HEADER */
header
{
height: 100px;
text-align:left;
border-bottom:1px dotted #666666 ;
}
header h1
{
line-height:100px;
margin:0;
}
/* NAV */
nav
{
height:50px;
background-color:red;
text-align:left;
}
nav li
{
display:inline-block;
height: 48px;
width:100px;
border:1px dotted white;
background-color:orange;
list-style:none;
}
nav a
{
text-decoration:none;
color: white;
font-weight:bold;
font-size:1.2 em;
line-height:50px;
display:block;
text-align:center;
}
nav a:hover
{
color:orange;
background-color:white;
}
/* CORPS DE PAGE */
article
{
display:inline-block;
width: 760px;
vertical-align:top;
margin-right:10px;
text-align:justify;
}
aside
{
display:inline-block;
width:200px;
vertical-align:top;
background-color:#FFC;
min-height:200px;
padding:5px;
margin-top:20px;
border: 1px dotted #333333;
text-align:left;
}
footer
{
height: 50px;
text-align:left;
border-top:1px dotted #666666 ;
}
feuille de style sous ie
section, aside, nav li
{
display: inline;
zoom: 1;
}
Modifié par Ludolegends (11 Oct 2013 - 10:35)
